wenn für Hintergrundfarbe bedingt?

Ich habe versucht, ein Tic-Tac-Toe-Spiel zu machen, aber aus irgendeinem Grund funktioniert die Bedingung nicht ..wenn für Hintergrundfarbe bedingt?

Ich habe versucht, die ersten drei Elemente in der ersten Zeile und wenn sie alle waren die gleiche Farbe, wollte ich browser, um ein "win" pop-up warnen, aber es passiert nicht.

Hat jemand eine Idee warum?

Hier ist mein Code:

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>

wird Ihre Hilfe sehr geschätzt!

Quelle

2017-04-24 Ashish Dommety

Eine andere Sache: lernen [Ereignis Delegation] (http://stackoverflow.com/q/1687296/4642212). Sie benötigen keine neun verschiedenen Ereignis-Listener. Sie müssen nur einen einzelnen mit einem Argument (z. B. "e") an "# total" binden und mit "e.target" überprüfen, auf welchen Knopf geklickt wurde. – Xufox

Ich füge eine alternative Lösung zu Ihrer Version und ein paar Optimierungen hinzu – Teocci

Das Problem ist, dass Ihre if-Anweisung nur einmal am Anfang ausgeführt wird. Sie müssen es in eine Funktion umwandeln und dann nach jedem Ereignis aufrufen. So etwas wie

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

Am Ende der Veranstaltung Zuhörer würden Sie es wie so nennen:

check();

(Wie Xufox oben gesagt, Sie wirklich in eine Delegation aussehen sollte, damit diese besser handhabbar ist und Sie müssen nicht alles wiederholen)

Quelle

2017-04-24 01:20:06 Pango

In Ihrem Code.

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

Sie müssen nicht jede Ihrer Schaltflächen wie folgt deklarieren. Sie können es mit einem Array und einer Schleife wie for oder forEach optimieren. Wie folgt aus:

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

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

Sie fügen einen Zuhörer zu jeder Taste mit addEventListener. Dies kann optimiert werden, wie ich in meinem Punkt Nummer 1 erwähnen. Sie erhalten das Button-Element mit var element = document.getElementById(id); und die Sie cund fügen den Listener in der gleichen forEach.
Ich verwendete auch die gleichen forEach, um meine board Array mit -1 für jedes Element zu initialisieren. Das bedeutet, dass es leer ist.
Jetzt müssen Sie eine Methode hinzufügen, um zu überprüfen, ob es nach jedem Klick einen Gewinner gibt. In diesem Codebeispiel habe ich verifyWinner(index); verwendet und den Index der Schaltfläche übergeben.
Auch in dieser Zeile one.style.backgroundColor == 'red' nur == ist nicht genug, also schlage ich vor, Sie verwenden === zum Vergleichen strings.
Das Problem, diese Methode basierend auf CSS verwenden, ist, dass Was passiert, wenn Sie zwei oder mehrere Male in den gleichen Knopf klicken? Der Zähler erhöht sich und der Knopf ändert beispielsweise die Farbe von red zu yellow. Deshalb empfehle ich Ihnen, ein board Array zu verwenden, um den "Spielstatus" zu kartieren.
Schließlich habe ich eine board als Array und ich habe 1 wenn red und 2 wenn yellow ist. Dies wird Ihnen helfen, den Verifizierungsprozess zu vereinfachen.

Hier ist das Codebeispiel. Glückliche Kodierung. Hinweis: Ich habe die Größe des Knobs für eine bessere Visualisierung im Snippet-Runner reduziert.

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>

Quelle

2017-04-24 03:00:55 Teocci

wenn für Hintergrundfarbe bedingt?

Antwort

Verwandte Themen