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 9

De opdracht:

Maak een tabel van 5 bij 5, waarin in het midden een zwart blokje start. Dit blokje moet bestuurt kunnen worden met de pijltjestoetsen. Als het blokje aan de rand komt stopt het daar (het gaat dus niet naar de andere kant, en gaat ook niet van de rand af).
Tip: maak gebruik van het voorbeeld van H10.6

Het antwoord:

Zie code.

JavaScript:
  1. var x = 2; // De x-coordinaat van het zwarte wordt in deze variabele bijgehouden
  2. var y = 2; // 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. var table = document.getElementById("gameboard");
  10. table.rows[y].cells[x].style.backgroundColor = "#fff"; // Maak het huidige zwarte vakje wit, we gaan immers hier vandaan verplaatsen
  11. // Als er geen pijltjes toets ingedrukt is blijven de coordinaten ongewijzigd
  12. // en zal het vakje dus opnieuw zwart worden gemaakt aan het einde van deze functie
  13.  
  14. switch(event.keyCode)
  15. {
  16. case 37: // Pijltje naar links
  17. if(--x < 0) // Trek 1 van x af, als het resultaat kleiner is dan 0 (dus buiten de tabel valt)
  18. {
  19. x = 0; // Maak x dan weer 0
  20. }
  21. break;
  22.  
  23. case 38: // Pijltje naar boven
  24. if(--y < 0) // Trek 1 van y af, als het resultaat kleiner is dan 0 (dus buiten de tabel valt)
  25. {
  26. y = 0; // Maak y dan weer 0
  27. }
  28. break;
  29.  
  30. case 39: // Pijltje naar rechts
  31. if(++x > 4) // Tel 1 bij x op, als het resultaat groter is dan 4 (dus buiten de tabel valt)
  32. {
  33. x = 4; // Maak x dan weer 4
  34. }
  35. break;
  36.  
  37. case 40: // Pijltje naar onder
  38. if(++y > 4) // Tel 1 bij y op, als het resultaat groter is dan 4 (dus buiten de tabel valt)
  39. {
  40. y = 4; // Maak y dan weer 4
  41. }
  42. break;
  43. }
  44.  
  45. table.rows[y].cells[x].style.backgroundColor = "#000"; // Maak het vakje met de nieuwe coordinaten zwart
  46. }
  47.  
  48. function maakEvents()
  49. {
  50. document.body.onkeydown = beweeg;
  51. }
  52. window.onload = maakEvents;

HTML:
  1. <table id="gameboard" style="empty-cells:show;width:250px;height:250px;">
  2. <tr><td></td><td></td><td></td><td></td><td></td></tr>
  3. <tr><td></td><td></td><td></td><td></td><td></td></tr>
  4. <tr><td></td><td></td><td style="background-color:#000;"></td><td></td><td></td></tr>
  5. <tr><td></td><td></td><td></td><td></td><td></td></tr>
  6. <tr><td></td><td></td><td></td><td></td><td></td></tr>
  7. </table>
  8. Bestuur het zwarte vakje met de pijltjes