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>
|