Javascript Übungen (5)

10.07.2017 04:31 Uhr

TicTacToe Spiel mit Javascript

HTML:

<body>
<h1>TicTacToe</h1>
<section class="tictactoe">
	<p>Zum Spielen bitte abwechselnd in die Spielfelder klicken</p>
    <form>
    <table id="tab">
        <tr>
        <td><input type="button" id="b0" name="b0" value="     " onclick="markbox(this)"/></td>
       <td><input type="button" id="b1" name="b1" value="     " onclick="markbox(this)"/></td>
            <td><input type="button" id="b2" name="b2" value="     " onclick="markbox(this)"/></td>
        </tr>
        <tr>
       <td><input type="button" id="b3" name="b3" value="     " onclick="markbox(this)"/></td>
            <td><input type="button" id="b4" name="b4" value="     " onclick="markbox(this)"/></td>
            <td><input type="button" id="b5" name="b5" value="     " onclick="markbox(this)"/></td>
        </tr>              
        <tr>
       <td><input type="button" id="b6" name="b6" value="     " onclick="markbox(this)"/></td>
            <td><input type="button" id="b7" name="b7" value="     " onclick="markbox(this)"/></td>
            <td><input type="button" id="b8" name="b8" value="     " onclick="markbox(this)"/></td>
        </tr>
   </table>
    </form>
</section>
</body>

Unvollständiger Javascript Code:

var box;
var symbol = "X";
var spieler = "Spieler X";

    function markbox(box) {
        
        if (box.value == "     ") {
            box.value = symbol;
            if (symbol == "X") {
                //Hier fehlen die Anweisungen 
            }
            else{ 
             //Hier auch
            }
        }else{
        alert("Schon besetzt!");
        }
        
        if (winning_condition(box.value)) {
            if (spieler == "Spieler X") {
            //Hier auch
            }else{ 
            // ... und hier leider auch
            }
            alert(spieler + " hat gewonnen!");
            return;
        } else{}
    }
        
  function winning_condition(symbol) {
        if (document.getElementById("b0").value == symbol && document.getElementById("b1").value == symbol && document.getElementById("b2").value == symbol) return true;
       if (document.getElementById("b3").value == symbol && document.getElementById("b4").value == symbol && document.getElementById("b5").value == symbol) return true;
       if (document.getElementById("b6").value == symbol && document.getElementById("b7").value == symbol && document.getElementById("b8").value == symbol) return true;
      // Hier fehlen die vertikalen und diagonalen "Gewinner Bedingungen"
        else return false;
    }

 

nächste Folie

Schlagwörter: