Skip to content

Commit aeac503

Browse files
bashopmanbashopman
committed
Initial instructions and working snake.html.
1 parent 4374edd commit aeac503

File tree

3 files changed

+191
-4
lines changed

3 files changed

+191
-4
lines changed

‎index.md‎

Lines changed: 63 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,75 @@
11
---
2-
title: "Instructie template"
3-
date: 2024-09-20T15:51:01+02:00
2+
title: "Javascript - Snake"
3+
date: 2025-10-19T10:51:01+02:00
44
draft: false
55
toc: true
66
headercolor: "teal-background"
7-
onderwerp: Python
7+
onderwerp: Javascript
88
---
99

10-
> Korte introductie dat wordt getoond in het overzicht van alle instructies
10+
We gaan Snake bouwen voor in de browser.
1111

1212
<!--more-->
1313

14+
## Introductie
15+
16+
## Wat heb je nodig?
17+
18+
## Instructie
19+
20+
### 1. HTML
21+
22+
```html
23+
<!DOCTYPE html>
24+
<html lang="en">
25+
<head>
26+
<meta charset="UTF-8">
27+
<title>Snake</title>
28+
<style>
29+
canvas {
30+
display: block;
31+
margin: 0 auto;
32+
}
33+
</style>
34+
</head>
35+
<body>
36+
<div class="snakearea">
37+
<canvas id="playground" width="800" height="800"></canvas>
38+
</div>
39+
</body>
40+
</html>
41+
```
42+
43+
### 2. Een appel
44+
45+
Voeg toe op regel 17 in de vorige code:
46+
```html
47+
<script>
48+
</script>
49+
```
50+
En tussen de `<script>` en `</script>` tags:
51+
52+
```javascript
53+
const elemPlayground = document.getElementById("playground");
54+
const ctx = elemPlayground.getContext("2d");
55+
56+
const boxSize = 25;
57+
const foodSize = boxSize / 2 + 1;
58+
const numBoxes = elemPlayground.width / boxSize;
59+
60+
const food = { x: 0, y: 0 };
61+
62+
function drawFood() {
63+
ctx.fillStyle = "red";
64+
ctx.beginPath();
65+
ctx.arc(food.x * boxSize + foodSize, food.y * boxSize + foodSize, foodSize, 0, 2 * Math.PI);
66+
ctx.fill();
67+
}
68+
69+
drawFood();
70+
```
71+
## Uitdagingen
72+
1473
> Te doen:
1574
> 1. Pas [FrontMatter](https://gohugo.io/content-management/front-matter/) aan boven in dit bestand.
1675
> - `title` naar een passende titel bij deze instructie

‎nokia-snake.png‎

261 KB
Loading

‎snake.html‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Snake</title>
6+
<style>
7+
canvas {
8+
border: 1px solid #333333;
9+
display: block;
10+
margin: 0 auto;
11+
background-color: #555555;
12+
}
13+
.snakearea {
14+
margin: 0 auto;
15+
text-align: center;
16+
}
17+
body {
18+
background-color: black;
19+
color: white;
20+
font-family: Arial, sans-serif;
21+
}
22+
</style>
23+
</head>
24+
<body>
25+
<div class="snakearea">
26+
<h1>Snake <span id="gameState"></span></h1>
27+
<div class="score">Score: <span id="score">0</span></div>
28+
<canvas id="playground" width="800" height="800"></canvas>
29+
</div>
30+
<script>
31+
const elemPlayground = document.getElementById("playground");
32+
const elemScore = document.getElementById("score");
33+
const ctx = elemPlayground.getContext("2d");
34+
let score = 0;
35+
const boxSize = 25;
36+
const foodSize = boxSize / 2 + 1;
37+
const numBoxes = elemPlayground.width / boxSize;
38+
39+
const slang = [{ x: 0, y: 0 }];
40+
const appel = { x: 0, y: 0 };
41+
let richting = "rechts";
42+
let intervalId = 0;
43+
44+
function tekenSlang() {
45+
slang.forEach(part => {
46+
ctx.fillStyle = "green";
47+
ctx.fillRect(part.x * boxSize, part.y * boxSize, boxSize - 1, boxSize - 1);
48+
});
49+
}
50+
51+
function tekenAppel() {
52+
ctx.fillStyle = "red";
53+
ctx.beginPath();
54+
ctx.arc(appel.x * boxSize + foodSize, appel.y * boxSize + foodSize, foodSize, 0, 2 * Math.PI);
55+
ctx.fill();
56+
}
57+
58+
function nieuwePlaatsAppel() {
59+
appel.x = Math.floor(Math.random() * numBoxes);
60+
appel.y = Math.floor(Math.random() * numBoxes);
61+
}
62+
63+
function verplaatsSlang() {
64+
const head = {...slang[0]};
65+
switch (richting) {
66+
case "omhoog": head.y -= 1; break;
67+
case "omlaag": head.y += 1; break;
68+
case "links": head.x -= 1; break;
69+
case "rechts": head.x += 1; break;
70+
}
71+
slang.unshift(head);
72+
if (slang[0].x === appel.x && slang[0].y === appel.y) {
73+
score += 1;
74+
nieuwePlaatsAppel();
75+
} else {
76+
slang.pop();
77+
}
78+
}
79+
80+
function werkScoreBij() {
81+
elemScore.textContent = score;
82+
}
83+
84+
function heeftDeRandGeraakt() {
85+
const head = slang[0];
86+
return head.x < 0 || head.x >= numBoxes || head.y < 0 || head.y >= numBoxes;
87+
}
88+
89+
function heeftZichzelfGeraakt() {
90+
const head = slang[0];
91+
return slang.slice(1).some(part => part.x === head.x && part.y === head.y);
92+
}
93+
94+
function isGameOver() {
95+
return heeftDeRandGeraakt() || heeftZichzelfGeraakt();
96+
}
97+
98+
function gameLoop() {
99+
if (isGameOver()) {
100+
document.getElementById("gameState").textContent = " - Game Over!";
101+
clearInterval(intervalId);
102+
return;
103+
}
104+
ctx.clearRect(0, 0, elemPlayground.width, elemPlayground.height);
105+
verplaatsSlang();
106+
tekenAppel();
107+
tekenSlang();
108+
werkScoreBij();
109+
}
110+
111+
document.addEventListener("keydown", (event) => {
112+
switch (event.key) {
113+
case "ArrowUp": richting = richting !== "omlaag" ? "omhoog" : richting; break
114+
case "ArrowDown": richting = richting !== "omhoog" ? "omlaag" : richting; break
115+
case "ArrowLeft": richting = richting !== "rechts" ? "links" : richting; break
116+
case "ArrowRight": richting = richting !== "links" ? "rechts" : richting; break
117+
case "o": document.location.reload(); break
118+
}
119+
console.log(richting);
120+
});
121+
122+
nieuwePlaatsAppel();
123+
intervalId = setInterval(gameLoop, 100);
124+
125+
126+
</script>
127+
</body>
128+
</html>

0 commit comments

Comments
 (0)