Welkom bij de wereld van webontwikkeling, waar kleurrijke websites tot leven komen! Vandaag gaan we kennis maken met
drie belangrijke talen die je zullen helpen om je eigen webpagina’s te bouwen: HTML, JavaScript en CSS.
HTML, ook wel bekend als HyperText Markup Language, is als de skeletstructuur van een website. Het is de taal die je
gebruikt om de inhoud van je pagina te structureren. Stel je voor dat je een huis bouwt en HTML de blauwdruk is. Het
vertelt de browser hoe de verschillende elementen van je pagina moeten worden georganiseerd, zoals koppen, paragrafen,
afbeeldingen en links. Met HTML kun je je creativiteit de vrije loop laten en je eigen unieke webpagina’s maken.
JavaScript is de taal waarmee je je webpagina’s interactief kunt maken. Het voegt leven toe aan je statische
HTML-structuur. Vergelijk het met de elektrische bedrading en schakelaars in je huis. Met JavaScript kun je dynamische
elementen toevoegen, zoals interactieve knoppen, spelletjes, animaties en zelfs geavanceerdere functies, zoals het
verwerken van formulieren of het laden van gegevens vanaf het internet. Het is de taal die je in staat stelt om met je
gebruikers te communiceren en je website tot leven te brengen.
CSS, oftewel Cascading Style Sheets, is de taal die je gebruikt om je webpagina’s er mooi en aantrekkelijk uit te laten
zien. Stel je voor dat je het interieur van je huis decoreert met kleuren, meubels en gordijnen. CSS doet hetzelfde voor
je webpagina’s. Met CSS kun je kleuren, lettertypen, lay-outs, achtergronden en andere visuele aspecten van je pagina
aanpassen. Het helpt je om je eigen stijl en ontwerp toe te voegen aan je website, zodat deze er precies uitziet zoals
jij wilt.
Samen vormen HTML, JavaScript en CSS een krachtig trio waarmee je je eigen unieke websites kunt maken. Of je nu een
leuke spelletjespagina wilt maken, een blog wilt starten of je creatieve kunstwerken wilt delen, met deze talen kun je
je ideeën tot leven brengen op het internet. Dus laten we aan de slag gaan en de magie van webontwikkeling ontdekken!
bron: ChatGPT
Onze instructies
Javascript - Snake - einde instructie
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Snake</title> <style> canvas { display: block; margin: 0 auto; border: 1px solid black; } h1 { text-align: center; } </style> </head> <body> <h1>Snake</h1> <div class="snakearea"> <canvas id="speelveld" width="800" height="800"></canvas> <div style="display: none;"> <img id="appel" src="data:image/png;base64,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" > </div> </div> <script> const speelveld = document.getElementById("speelveld"); const ctx = speelveld.getContext("2d"); const vakGrootte = 25; const appelGrootte = vakGrootte * 1.2; const aantalVakjes = speelveld.width / vakGrootte; const appel = { x: 0, y: 0 }; const slang = [{ x: 10, y: 10 }]; let richting = "rechts"; const appelPlaatje = document.getElementById("appel"); function tekenAppel() { ctx.drawImage(appelPlaatje, appel.x * vakGrootte, appel.y * vakGrootte, appelGrootte, appelGrootte); } function tekenSlang() { for (let slangDeel of slang) { ctx.fillStyle = "green"; ctx.fillRect(slangDeel.x * vakGrootte, slangDeel.y * vakGrootte, vakGrootte - 1, vakGrootte - 1); } } function toonGameOver() { ctx.fillStyle = "orange"; ctx.font = "75px Arial"; ctx.fillText("Game over!", 200, 400); } let score = 0; function toonScore() { ctx.fillStyle = "black"; ctx.font = "30px Arial"; ctx.fillText(`Score ${score}`, 350, 30); } function nieuwePlaatsAppel() { appel.x = Math.floor(Math.random() * aantalVakjes); appel.y = Math.floor(Math.random() * aantalVakjes); } function verplaatsSlang() { const nieuweSlangenKop = {...slang[0]}; switch (richting) { case "omhoog": nieuweSlangenKop.y -= 1; break; case "omlaag": nieuweSlangenKop.y += 1; break; case "links": nieuweSlangenKop.x -= 1; break; case "rechts": nieuweSlangenKop.x += 1; break; } slang.unshift(nieuweSlangenKop); if (nieuweSlangenKop.x === appel.x && nieuweSlangenKop.y === appel.y) { nieuwePlaatsAppel(); score += 1; } else { slang.pop(); } } document.addEventListener("keydown", (event) => { switch (event.key) { case "ArrowUp": richting = "omhoog"; break case "ArrowDown": richting = "omlaag"; break case "ArrowLeft": richting = "links"; break case "ArrowRight": richting = "rechts"; break case "o": document.location.reload(); break } console.log(richting); }); function maakSpeelveldLeeg() { ctx.clearRect(0, 0, speelveld.width, speelveld.height); } function slangHeeftZichzelfGeraakt() { const slangenKop = slang[0]; for (let slangDeel of slang.slice(1)) { if (slangDeel.x === slangenKop.x && slangDeel.y === slangenKop.y) { return true; } } return false; } function slangHeeftEenRandGeraakt() { const slangenKop = slang[0]; return slangenKop.x < 0 || slangenKop.x >= aantalVakjes || slangenKop.y < 0 || slangenKop.y >= aantalVakjes; } function isGameOver() { return slangHeeftZichzelfGeraakt() || slangHeeftEenRandGeraakt(); } function gameLoop() { if (isGameOver()) { toonGameOver(); return; } maakSpeelveldLeeg(); verplaatsSlang(); tekenAppel(); tekenSlang(); toonScore(); } nieuwePlaatsAppel(); setInterval(gameLoop, 100); </script> </body> </html> Javascript - Snake - tot en met opdracht 4
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Snake</title> <style> canvas { display: block; margin: 0 auto; border: 1px solid black; } </style> </head> <body> <h1>Snake</h1> <div class="snakearea"> <canvas id="speelveld" width="800" height="800"></canvas> </div> <script> const speelveld = document.getElementById("speelveld"); const ctx = speelveld.getContext("2d"); const vakGrootte = 25; const appelGrootte = vakGrootte / 2 + 1; const aantalVakjes = speelveld.width / vakGrootte; const appel = { x: 0, y: 0 }; const slang = [{ x: 10, y: 10 }]; let richting = "rechts"; function tekenAppel() { ctx.fillStyle = "red"; ctx.beginPath(); ctx.arc(appel.x * vakGrootte + appelGrootte, appel.y * vakGrootte + appelGrootte, appelGrootte, 0, 2 * Math.PI); ctx.fill(); } function tekenSlang() { for (let slangDeel of slang) { ctx.fillStyle = "green"; ctx.fillRect(slangDeel.x * vakGrootte, slangDeel.y * vakGrootte, vakGrootte - 1, vakGrootte - 1); } } function verplaatsSlang() { const head = {...slang[0]}; switch (richting) { case "omhoog": head.y -= 1; break; case "omlaag": head.y += 1; break; case "links": head.x -= 1; break; case "rechts": head.x += 1; break; } slang.unshift(head); slang.pop(); } document.addEventListener("keydown", (event) => { switch (event.key) { case "ArrowUp": richting = "omhoog"; break case "ArrowDown": richting = "omlaag"; break case "ArrowLeft": richting = "links"; break case "ArrowRight": richting = "rechts"; break case "o": document.location.reload(); break } console.log(richting); }); function maakSpeelveldLeeg() { ctx.clearRect(0, 0, speelveld.width, speelveld.height); } function gameLoop() { maakSpeelveldLeeg(); verplaatsSlang(); tekenAppel(); tekenSlang(); } setInterval(gameLoop, 100); </script> </body> </html> Instructies met enkel HTML & CSS
Dit zijn instructies van de RaspberryPi foundation en zijn gericht op beginnende gebruikers van HTML en CSS.
Een overzicht van alle projecten in module 1 vind
je hieronder.
De projecten van module 2 vind je hieronder.