如果有条件的背景颜色？

我一直在尝试制作井字游戏，但由于某些原因，条件不起作用。如果有条件的背景颜色？

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

有没有人有一个想法，为什么？

这里是我的代码：

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>

您的帮助将非常感激！

来源

2017-04-24 Ashish Dommety

另一件事：了解[事件代表团（http://stackoverflow.com/q/1687296/4642212）。你不需要九个不同的事件监听器。你只需要用一个参数（例如'e'）绑定一个参数到'＃total'，并用'e.target'检查哪个旋钮已被点击。 – Xufox

我为您的版本添加了一个替代解决方案并进行了一些优化 – Teocci

问题是你的if语句只能在开始时运行一次。你需要把它变成一个函数，然后在每个事件之后调用它。喜欢的东西

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

在事件侦听器的最后，你会调用它像这样：

check();

（就像Xufox上面说的，你真的应该考虑代表团所以，这是更易于管理，你不必重复一切）

来源

2017-04-24 01:20:06 Pango

在您的代码：

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");

您不需要像这样声明每个按钮。您可以使用数组和像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() { 
     ... 
    } 
}

你加入一个监听到每个按钮与addEventListener。这可以优化，因为我在我的第一点提到。你得到的按钮元素var element = document.getElementById(id);，你可以在同一个forEach中添加监听器。
我也使用了相同的forEach来初始化我的board数组，每个元素使用-1。这意味着它是空的。
现在您需要添加一种方法来验证每次点击后是否有赢家。在这个代码示例中，我使用了verifyWinner(index);，并且我传递了按钮的索引;
此外，在这一行one.style.backgroundColor == 'red'只==是不够的，所以我建议你使用===比较strings。
使用基于CSS的此方法的问题是，如果在同一个旋钮中单击两次或多次，会发生什么情况？计数器会增加，旋钮会将颜色从red更改为yellow。这就是为什么我建议你使用board阵列来映射“游戏状态”。
最后，我创建了一个board作为数组，并且如果是yellow，则将1设为red和2。这将帮助您简化验证过程。

这里是代码示例。快乐的编码。注意：我缩小了旋钮尺寸以便在片段跑步者中更好地观察。

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; 
 
    } 
 
    } 
 
}

.knobs { 
 
    background-color: blue; 
 
    border: none; 
 
    padding: 25px; 
 
    margin: 3px; 
 
} 
 

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

 
#total { 
 
    text-align: center; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
}

<!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>

来源

2017-04-24 03:00:55 Teocci

如果有条件的背景颜色？

回答

相关问题