Inhoud

Hoofdstuk 10 - Opdracht 5

De opdracht:

Maak een boter, kaas en eieren spelletje.
De spelers mogen om de beurt klikken, alleen als er op een leeg vakje geklikt wordt zal er een x of o verschijnen (afhankelijk van wie aan de beurt is).
Er hoeft geen bericht te verschijnen als er iemand gewonnen heeft.

Het antwoord:

Het handigste is om dit met een tabel te doen.

JavaScript:

var beurtSpeler1 = true;                // Speler 1 begint
 
function zet()
{
    if(this.innerHTML != "")            // Als er al iets in staat,
    {
        return;                         // dan gaat de zet niet door
    }
    else                                // Als de cel leeg is,
    {                                   // dan gaan we de zet verwerken
        if(beurtSpeler1)                // Als speler 1 aan de beurt is,
        {
            this.innerHTML = 'x';       // dan wordt de inhoud een X
        }
        else                            // Als speler 2 aan de beurt is,
        {
            this.innerHTML = 'o';       // dan wordt de inhoud een O
        }
 
        beurtSpeler1 = !beurtSpeler1;   // Wissel de beurt
    }
}
 
function maakEvents()
{
    // Ken een onclick event toe aan alle td's in het document
    var tds = document.getElementsByTagName("td");
    for(var i = 0; i < tds.length; ++i)
    {
        tds[i].onclick = zet;
    }
}
window.onload = maakEvents;

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
 <head>
  <title>Boter, kaas en eieren</title>
  <style type="text/css">
   table
   {
       border: 1px solid #000;
   }
   td
   {
      border: 1px solid #000;
      font-size: 48px;
      width: 75px;
      height: 75px;
      text-align: center;
   }
  </style>
 </head>
 <body>
  <table>
   <tr><td></td><td></td><td></td></tr>
   <tr><td></td><td></td><td></td></tr>
   <tr><td></td><td></td><td></td></tr>
  </table>
 </body>
</html>