如果条件为背景颜色？

时间：2017-04-24 01:01:25

标签： javascript if-statement alert background-color tic-tac-toe

我一直在尝试制作一个井字游戏，但出于某种原因，条件不起作用..

我试图将第一行中的前三个元素作为目标，如果它们都是相同的颜色，我想浏览器提示“赢”弹出窗口，但它不会发生。

有谁知道为什么？

这是我的代码：

var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
var four = document.getElementById("four");
var five = document.getElementById("five");
var six = document.getElementById("six");
var seven = document.getElementById("seven");
var eight = document.getElementById("eight");
var nine = document.getElementById("nine");


var counter = 1;

//code that changes the box color
one.addEventListener("click", function() {
  if (counter < 10 && counter % 2 === 0) {
    one.style.backgroundColor = "yellow";
  } else if (counter < 10 && counter % 2 != 0) {
    one.style.backgroundColor = "red";
  }
  counter++;
  console.log(counter);
});
two.addEventListener("click", function() {
  if (counter < 10 && counter % 2 === 0) {
    two.style.backgroundColor = "yellow";
  } else if (counter < 10 && counter % 2 != 0) {
    two.style.backgroundColor = "red";
  }
  counter++;
  console.log(counter);
});
three.addEventListener("click", function() {
  if (counter < 10 && counter % 2 === 0) {
    three.style.backgroundColor = "yellow";
  } else if (counter < 10 && counter % 2 != 0) {
    three.style.backgroundColor = "red";
  }
  counter++;
  console.log(counter);
});
four.addEventListener("click", function() {
  if (counter < 10 && counter % 2 === 0) {
    four.style.backgroundColor = "yellow";
  } else if (counter < 10 && counter % 2 != 0) {
    four.style.backgroundColor = "red";
  }
  counter++;
  console.log(counter);
});
five.addEventListener("click", function() {
  if (counter < 10 && counter % 2 === 0) {
    five.style.backgroundColor = "yellow";
  } else if (counter < 10 && counter % 2 != 0) {
    five.style.backgroundColor = "red";
  }
  counter++;
  console.log(counter);
});
six.addEventListener("click", function() {
  if (counter < 10 && counter % 2 === 0) {
    six.style.backgroundColor = "yellow";
  } else if (counter < 10 && counter % 2 != 0) {
    six.style.backgroundColor = "red";
  }
  counter++;
  console.log(counter);
});
seven.addEventListener("click", function() {
  if (counter < 10 && counter % 2 === 0) {
    seven.style.backgroundColor = "yellow";
  } else if (counter < 10 && counter % 2 != 0) {
    seven.style.backgroundColor = "red";
  }
  counter++;
  console.log(counter);
});
eight.addEventListener("click", function() {
  if (counter < 10 && counter % 2 === 0) {
    eight.style.backgroundColor = "yellow";
  } else if (counter < 10 && counter % 2 != 0) {
    eight.style.backgroundColor = "red";
  }
  counter++;
  console.log(counter);
});
nine.addEventListener("click", function() {
  if (counter < 10 && counter % 2 === 0) {
    nine.style.backgroundColor = "yellow";
  } else if (counter < 10 && counter % 2 != 0) {
    nine.style.backgroundColor = "red";
  }
  counter++;
  console.log(counter);
});

//logic for winning
if (one.style.backgroundColor == "red" && two.style.backgroundColor == "red" && three.style.backgroundColor == "red") {
  console.log("red wins");
}
.knobs {
  background-color: blue;
  border: none;
  padding: 50px;
  margin: 10px;
}

.knobs:focus {
  outline: none;
}

#total {
  text-align: center;
}
<!DOCTYPE html>

<div id="total">
  <button id="one" class="knobs"></button>
  <button id="two" class="knobs"></button>
  <button id="three" class="knobs"></button>
  <br>
  <button id="four" class="knobs"></button>
  <button id="five" class="knobs"></button>
  <button id="six" class="knobs"></button>
  <br>
  <button id="seven" class="knobs"></button>
  <button id="eight" class="knobs"></button>
  <button id="nine" class="knobs"></button>
</div>

非常感谢您的帮助！

2 个答案:

答案 0 :(得分：3)

问题是你的if语句只在​​开头运行一次。您需要将其转换为函数，然后在每个事件后调用它。像

这样的东西 
function check() {
    if (one.style.backgroundColor == "red" && two.style.backgroundColor == "red" && three.style.backgroundColor == "red"){
    console.log("red wins");
    }
}

在事件监听器结束时，您可以这样称呼它：

check();

（就像Xufox上面说的那样，你应该真正关注委托，这样才能更容易管理，而且你不必重复所有事情。）

答案 1 :(得分：0)

在您的代码中：

var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
var four = document.getElementById("four");
var five = document.getElementById("five");
var six = document.getElementById("six");
var seven = document.getElementById("seven");
var eight = document.getElementById("eight");
var nine = document.getElementById("nine");

  1. 您不需要像这样声明每个按钮。您可以使用数组和for或forEach之类的循环对其进行优化。像这样：

    var knobs = [
    'one', 
    'two', 
    'three', 
    'four', 
    'five', 
    'six', 
    'seven', 
    'eight', 
    'nine'
];

knobs.forEach(function(id) {
  var element = document.getElementById(id);
  element.addEventListener('click', function() {
      ...
  }
}

  2. 您正在使用addEventListener为每个按钮添加一个侦听器。这可以在我的第1点提到时进行优化。你得到了带有var element = document.getElementById(id);的按钮元素，你可以在同一forEach中添加听众。

  3. 我还使用相同的forEach为每个元素初始化board数组-1。这意味着它是空的。
  4. 现在您需要添加一个方法来验证每次点击后是否有赢家。在此代码示例中，我使用了verifyWinner(index);并传递了按钮的索引;
  5. 另外，在此行one.style.backgroundColor == 'red'中仅==是不够的，因此建议您使用===进行比较strings。
  6. 基于CSS使用此方法的问题是如果在同一个旋钮中单击两次或更多次会发生什么？计数器将增加，旋钮将更改{{1例如，以red为例。这就是为什么我建议你使用yellow数组来映射＆＃34;游戏状态＆＃34;。
  7. 最后，我创建了一个board作为数组，如果board，则1如果red则2。yellow这有助于您简化验证过程。

    8. 这是代码示例。快乐的编码。 注意：我减小了旋钮大小，以便在代码片段中获得更好的可视化效果。

    ＆＃13;
    ＆＃13; 
    var knobs = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
var board = [];

var isRed = true;
var isEndGame = false;
var counter = 0;
knobs.forEach(function(id) {
  var element = document.getElementById(id);
  board.push(-1);
  element.addEventListener('click', function() {
    var index = knobs.indexOf(id);
    if (!isEndGame && board[index] == -1) {
      if (isRed) {
        element.style.backgroundColor = 'red';
        board[index] = 1;
      } else {
        element.style.backgroundColor = 'yellow';
        board[index] = 2;
      }
      verifyWinner(index);
      isRed = !isRed;
      counter++;
      //console.log(counter)
    }
    if (counter == 9) {
      isEndGame = true;
      console.log('End of game.');
    }
  });
});

function verifyWinner(index) {
  //logic for winning
  var player = isRed ? 1 : 2;

  switch (index) {
    case 0:
    case 2:
    case 6:
    case 8:
    case 4:
      verifyVertial(index);
      verifyHorizontal(index);
      verifyDiagonal(index);
      break;
    case 1:
    case 3:
    case 5:
    case 7:
      verifyVertial(index);
      verifyHorizontal(index);
      break;
  }
  if (isEndGame) {
    console.log((isRed ? 'Red' : 'Yellow') + ' has won.');
    console.log('End of game.');
  }
}

function verifyVertial(index) {
  //logic for winning
  if (!isEndGame) {
    var player = isRed ? 1 : 2;
    switch (index) {
      case 0:
      case 3:
      case 6:
        if (board[0] == player && board[3] == player && board[6] == player) {
          isEndGame = true;
        }
        break;
      case 1:
      case 4:
      case 7:
        if (board[1] == player && board[4] == player && board[7] == player) {
          isEndGame = true;
        }
        break;
      case 2:
      case 5:
      case 8: // edges
        if (board[2] == player && board[5] == player && board[8] == player) {
          isEndGame = true;
        }
        break;
    }
  }
}

function verifyHorizontal(index) {
  //logic for winning
  if (!isEndGame) {
    var player = isRed ? 1 : 2;
    switch (index) {
      case 0:
      case 1:
      case 2: // edges
        if (board[0] == player && board[1] == player && board[2] == player) {
          isEndGame = true;
        }
        break;
      case 3:
      case 4:
      case 5:
        if (board[3] == player && board[4] == player && board[5] == player) {
          isEndGame = true;
        }
        break;
      case 6:
      case 7:
      case 8: // edges
        if (board[6] == player && board[7] == player && board[8] == player) {
          isEndGame = true;
        }
        break;
    }
  }
}

function verifyDiagonal(index) {
  //logic for winning
  if (!isEndGame) {
    var player = isRed ? 1 : 2;
    switch (index) {
      case 0:
      case 4:
      case 8: // edges
        if (board[0] == player && board[4] == player && board[8] == player) {
          isEndGame = true;
        }
        break;
      case 2:
      case 4:
      case 6: // edges
        if (board[2] == player && board[4] == player && board[6] == player) {
          isEndGame = true;
        }
        break;
    }
  }
}
    ＆＃13; 
    .knobs {
  background-color: blue;
  border: none;
  padding: 25px;
  margin: 3px;
}

.knobs:focus .clear:focus {
  outline: none;
}

#total {
  text-align: center;
}

.clear {
  clear: both;
}
    ＆＃13; 
    <!DOCTYPE html>

<div id="total">
  <button id="one" class="knobs"></button>
  <button id="two" class="knobs"></button>
  <button id="three" class="knobs"></button>
  <div class="clearfix"></div>
  <button id="four" class="knobs"></button>
  <button id="five" class="knobs"></button>
  <button id="six" class="knobs"></button>
  <div class="clearfix"></div>
  <button id="seven" class="knobs"></button>
  <button id="eight" class="knobs"></button>
  <button id="nine" class="knobs"></button>
</div>
    ＆＃13;
    ＆＃13;
    ＆＃13;

相关问题
最新问题