Inhoud

  1. Geen paragrafen H1 - Voorwoord
  2. Geeft paragrafen weer H2 - Wat is JavaScript?
    1. §1. Wat kun je met JavaScript?
    2. §2. De script-tag
    3. §3. Opdrachten
  3. Geeft paragrafen weer H3 - Statements (opdrachten)
    1. §1. Wat zijn statements?
    2. §2. Functie document.write
    3. §3. Commentaar
    4. §4. Functie alert
    5. §5. Opdrachten
  4. Geeft paragrafen weer H4 - Variabelen
    1. §1. Wat is een variabele?
    2. §2. Variabelen maken en gebruiken
    3. §3. Functie prompt
    4. §4. Operatoren
    5. §5. Strings
    6. §6. Opdrachten
  5. Geeft paragrafen weer H5 - Functies
    1. §1. Wat is een functie?
    2. §2. Functies maken en gebruiken
    3. §3. Functies die iets teruggeven
    4. §4. Parameters en argumenten
    5. §5. De scope van variabelen
    6. §6. Opdrachten
  6. Geeft paragrafen weer H6 - Loops en voorwaardes
    1. §1. Wat zijn loops en voorwaardes?
    2. §2. Het if-else statement
    3. §3. Vergelijkingen en hun operatoren
    4. §4. Functie confirm
    5. §5. Het switch-statement
    6. §6. De while-loop
    7. §7. De for-loop
    8. §8. Stoppen door break
    9. §9. Opdrachten
  7. Geeft paragrafen weer H7 - Events
    1. §1. Wat is een event?
    2. §2. Events maken en gebruiken
    3. §3. Welke events zijn er?
    4. §4. Variabele this
    5. §5. Variabele window.event
    6. §6. Opdrachten
  8. Geeft paragrafen weer H8 - Array
    1. §1. Wat is een Array?
    2. §2. Een Array maken en gebruiken
    3. §3. Een Array doorlopen
    4. §4. Een associatieve array
    5. §5. De for-in loop
    6. §6. Opdrachten
  9. Geeft paragrafen weer H9 - Objecten
    1. §1. Wat is een object?
    2. §2. Verschil object en variabele
    3. §3. Eigenschappen
    4. §4. Methodes
    5. §5. Eigenschappen en methodes
    6. §6. Opdrachten
  10. Geeft paragrafen weer H10 - Globale objecten
    1. §1. Wat zijn globale objecten?
    2. §2. Het window object
    3. §3. Het document object
    4. §4. Het Math object
    5. §5. Standaard HTML-Element object
    6. §6. Een HTML-Table object
    7. §7. Opdrachten

Hoofdstuk 10 - Opdracht 10

De opdracht:

Hetzelfde als opdracht 9, maar nu maak je het 'speelveld' iets groter. Namelijk 10 bij 10. Wanneer de gebruiker nu ergens klikt komt daar een muur (rood blokje). Door te klikken terwijl shift ingedrukt wordt moeten de muren weer weggehaald kunnen worden.
Het zwarte blokje mag uiteraard niet op/over een muur lopen.

Het antwoord:

Het is handig om van elk vakje waarin een muur komt simpelweg alleen de class te veranderen. In de CSS kan dan aangegeven worden dat vakjes met die class rood moeten zijn. Een class blijft namelijk altijd hetzelfde, een background-color kan door de browser aangepast worden (jij geeft bijvoorbeeld "#f00" op als background-color, dan kan de browser daar bijvoorbeeld "#FF0000" van maken).

JavaScript:
  1. var x = 5; // De x-coordinaat van het zwarte wordt in deze variabele bijgehouden
  2. var y = 5; // De y-coordinaat van het zwarte wordt in deze variabele bijgehouden
  3.  
  4. function beweeg(event)
  5. {
  6. if(window.event)
  7. event = window.event;
  8.  
  9. // Hou bij welke op welke coordinaten de speler staat voordat deze verplaatst gaat worden
  10. // Zo kan de speler altijd nog teruggeplaatst worden (stel dat hij op een muur probeert te lopen)
  11. var oldX = x;
  12. var oldY = y;
  13.  
  14. var table = document.getElementById("gameboard");
  15. table.rows[y].cells[x].className = ""; // Haal de speler van het huidige vakje af, we gaan immers hier vandaan verplaatsen
  16. // Als er geen pijltjes toets ingedrukt is blijven de coordinaten ongewijzigd
  17. // en zal het vakje dus opnieuw zwart worden gemaakt aan het einde van deze functie
  18.  
  19. switch(event.keyCode)
  20. {
  21. case 37: // Pijltje naar links
  22. if(--x < 0) // Trek 1 van x af, als het resultaat kleiner is dan 0 (dus buiten de tabel valt)
  23. {
  24. x = 0; // Maak x dan weer 0
  25. }
  26. break;
  27.  
  28. case 38: // Pijltje naar boven
  29. if(--y < 0) // Trek 1 van y af, als het resultaat kleiner is dan 0 (dus buiten de tabel valt)
  30. {
  31. y = 0; // Maak y dan weer 0
  32. }
  33. break;
  34.  
  35. case 39: // Pijltje naar rechts
  36. if(++x >= table.rows[0].cells.length) // Tel 1 bij x op, als het resultaat groter is dan (of gelijk aan) de breedte van de tabel
  37. {
  38. x = table.rows[0].cells.length - 1; // Maak x dan weer gelijk aan de breedte v/d tabel - 1
  39. }
  40. break;
  41.  
  42. case 40: // Pijltje naar onder
  43. if(++y >= table.rows.length) // Tel 1 bij y op, als het resultaat groter is dan 4 (dus buiten de tabel valt)
  44. {
  45. y = table.rows.length-1; // Maak y dan weer 4
  46. }
  47. break;
  48. }
  49.  
  50. if(table.rows[y].cells[x].className != "") // Als het vakje waar we naartoe willen lopen momenteel niet leeg is
  51. {
  52. // Zet dan de oude coordinaten (van voor het lopen) terug
  53. x = oldX;
  54. y = oldY;
  55. }
  56. table.rows[y].cells[x].className = "player"; // Maak van het vakje met de nieuwe coordinaten de speler
  57. }
  58.  
  59. function muur(event)
  60. {
  61. if(window.event)
  62. event = window.event;
  63.  
  64. // Als speler op het vakje waarop geklikt wordt staat moet er niks gebeuren
  65. if(this.className == "player")
  66. return;
  67.  
  68. // Als de shift toets ingedrukt is
  69. if(event.shiftKey)
  70. {
  71. this.className = ""; // Haal dan de muur weg van dit vakje (als er niks stond is er geen verandering)
  72. }
  73. else
  74. {
  75. this.className = "wall"; // Anders wordt juist een muur neergezet (als er al een muur stond verandert er niks)
  76. }
  77. }
  78.  
  79. function maakEvents()
  80. {
  81. document.body.onkeydown = beweeg;
  82.  
  83. // Ken aan alle tds in het document een onclick event toe
  84. var tds = document.getElementsByTagName("td");
  85. for(var i = 0; i < tds.length; ++i)
  86. {
  87. tds[i].onclick = muur;
  88. }
  89. }
  90. window.onload = maakEvents;

HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
  3. <head>
  4. <title>Eigen doolhof maken</title>
  5. <style type="text/css">
  6. table
  7. {
  8. empty-cells: show;
  9. width: 250px;
  10. height: 250px;
  11. border: 1px solid #000;
  12. }
  13. .wall
  14. {
  15. background-color: #f00;
  16. }
  17. .player
  18. {
  19. background-color: #000;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <p>
  25. Bestuur het zwarte vakje met de pijltjes.<br />
  26. Klik ergens om een muur te maken, shift+klik om muren weg te halen.
  27. </p>
  28. <table id="gameboard">
  29. <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  30. <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  31. <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  32. <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  33. <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  34. <tr><td></td><td></td><td></td><td></td><td></td><td class="player"></td><td></td><td></td><td></td><td></td></tr>
  35. <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  36. <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  37. <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  38. <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  39. </table>
  40. </body>
  41. </html>