In diesem Quellcode wird eine Funktion istWand definiert. Sie stellt fest, ob die Schlange mit einer Wand oder der Insel kollidiert ist. Wenn das der Fall ist, gibt sie den Wert true zurück, sonst false. Diese Funktion wird in der gehe-Funktion verwendet. In der Funktion tick wird geprüft, ob eine Kollision stattgefunden hat. Ist das der der Fall wird tick nicht weiter ausgeführt und es erscheint ein Alert-Fenster mit der Meldung „Game Over!“.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Snake</title>
</head>
<body>
<canvas id="canvas" width="1024" height="1024"></canvas>
<script>
var spiel = {
anzahlTicks: 0,
timer: null,
spielfeld :[
"###############",
"# #",
"# #",
"# #",
"# #### #",
"# #### #",
"# #",
"# #",
"# #",
"###############"
],
tick: function() {
window.clearTimeout(spiel.timer);
spiel.anzahlTicks++;
var ergebnis = schlange.gehe();
if (ergebnis == "Ende") {
alert("Game Over!");
return;
}
grafik.zeichneSpiel();
spiel.timer = window.setTimeout("spiel.tick()", 500);
},
istFrei: function(ort) {
return spiel.spielfeld[ort.y][ort.x] == " ";
},
istWand: function(ort) {
return spiel.spielfeld[ort.y][ort.x] == "#";
}
};
var schlange = {
teile: [
{x: 4, y: 2},
{x: 3, y: 2},
{x: 2, y: 2}
],
richtung: "O",
nächsterOrt: function(){
var kopf = schlange.teile[0];
var zielX = kopf.x;
var zielY = kopf.y;
zielY = schlange.richtung == "N" ? zielY - 1 : zielY;
zielY = schlange.richtung == "S" ? zielY + 1 : zielY;
zielX = schlange.richtung == "W" ? zielX - 1 : zielX;
zielX = schlange.richtung == "O" ? zielX + 1 : zielX;
return {x: zielX, y: zielY};
},
gehe: function() {
var ort = schlange.nächsterOrt() ;
if(spiel.istFrei(ort)) {
schlange.teile.unshift(ort);
schlange.teile.pop();
}
if(spiel.istWand(ort)) {
return "Ende";
}
}
};
var grafik = {
canvas: document.getElementById("canvas"),
größeQuadrat: 30,
zeichneSpielfeld: function(ctx) {
var y = 0;
spiel.spielfeld.forEach(function prüfeZeile(string) {
zeile = string.split("");
var x = 0;
zeile.forEach(function prüfeZeichen(zeichen) {
if(zeichen == "#") {
ctx.fillStyle = "black";
ctx.fillRect(x, y, grafik.größeQuadrat,
grafik.größeQuadrat);
}
x += grafik.größeQuadrat;
});
y += grafik.größeQuadrat;
});
},
zeichneSchlange: function(ctx) {
schlange.teile.forEach(function zeichneTeil(teil) {
var teilXOrt = teil.x * grafik.größeQuadrat;
var teilYOrt = teil.y * grafik.größeQuadrat;
ctx.fillStyle = "green";
ctx.fillRect(teilXOrt, teilYOrt,
grafik.größeQuadrat, grafik.größeQuadrat);
});
},
zeichneSpiel: function() {
var ctx = grafik.canvas.getContext("2d");
ctx.clearRect(0, 0, grafik.canvas.width, grafik.canvas.height);
grafik.zeichneSpielfeld(ctx);
grafik.zeichneSchlange(ctx);
}
};
var spielSteuerung = {
verarbeiteEingabe: function(keyPressed) {
var taste = keyPressed.key.toLowerCase();
var zielRichtung = schlange.richtung;
if(taste == "w") zielRichtung = "N";
if(taste == "a") zielRichtung = "W";
if(taste == "s") zielRichtung = "S";
if(taste == "d") zielRichtung = "O";
schlange.richtung = zielRichtung;
spiel.tick();
},
starteSpiel: function() {
window.addEventListener("keypress",
spielSteuerung.verarbeiteEingabe, false);
spiel.tick();
}
};
spielSteuerung.starteSpiel();
</script>
</body>
</html>
Illustrations © Duncan Beedie
All rights reserved.