Dieser Quellcode beseitigt drei Fehler im JavaScript-Programm. In einer if-Anweisung wird ein Alert-Fenster auf den Bildschirm gebracht, das „Game Over!“ zusammen mit dem Punktestand meldet. Damit die Schlange nicht durch sich selbst kriechen kann, definierst du eine Funktion namens istSchlange und eine Schleife. Du sorgst dafür, dass das Spiel endet, sobald die Schlange auf ein Feld geht, auf dem in diesem Moment bereits ein Teil der Schlange ist. Die Funktion verarbeiteEingabe wird durch if-Anweisungen erweitert, die verhindern, dass die Schlange zurück durch sich selbst gehen kann. Schließlich musst du noch die Reihenfolge der Funktionsaufrufe in der Funktion zeichneSpiel ändern, damit eine neue Frucht nicht auf die Schlange gesetzt werden kann.
<!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,
punkte: 0,
spielfeld :[
"###############",
"# #",
"# #",
"# #",
"# #### #",
"# #### #",
"# #",
"# #",
"# #",
"###############"
],
früchte: [
{x: 1, y: 1}
],
tick: function() {
window.clearTimeout(spiel.timer);
spiel.anzahlTicks++;
if(spiel.anzahlTicks % 10 == 0) {
spiel.neueZufallsfrucht ();
}
var ergebnis = schlange.gehe();
if (ergebnis == "Ende") {
alert("Game Over! Punktestand: " + spiel.punkte);
return;
}
grafik.zeichneSpiel();
spiel.timer = window.setTimeout("spiel.tick()", 500);
},
neueZufallsfrucht: function() {
var zufallY = Math.floor(Math.random() * spiel.spielfeld.length) + 0;
var zufallX = Math.floor(Math.random() * spiel.spielfeld[zufallY].length) + 0;
var zufallsort = {x: zufallX, y: zufallY};
if(spiel.istFrei(zufallsort) && !spiel.istFrucht(zufallsort)) {
spiel.früchte.push(zufallsort);
}
},
istFrei: function(ort) {
return spiel.spielfeld[ort.y][ort.x] == " ";
},
istWand: function(ort) {
return spiel.spielfeld[ort.y][ort.x] == "#";
},
istFrucht: function(ort) {
for(var fruchtNr = 0; fruchtNr < spiel.früchte.length; fruchtNr++) {
var frucht = spiel.früchte[fruchtNr];
if(ort.x == frucht.x && ort.y == frucht.y) {
spiel.früchte.splice(fruchtNr, 1);
return true;
}
}
return false;
},
istSchlange: function(ort) {
for(var teilNr = 0; teilNr < schlange.teile.length; teilNr++) {
var teil = schlange.teile[teilNr];
if(ort.x == teil.x && ort.y == teil.y) {
return true;
}
}
return false;
}
};
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.istWand(ort)
|| spiel.istSchlange(ort)) {
return "Ende";
}
if(spiel.istFrei(ort)) {
schlange.teile.unshift(ort);
schlange.teile.pop();
}
if(spiel.istFrucht(ort)) {
spiel.punkte++;
schlange.teile.unshift(ort);
}
}
};
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;
});
},
zeichne: function(ctx, quelle, farbe) {
quelle.forEach(function(teil) {
var teilXOrt = teil.x * grafik.größeQuadrat;
var teilYOrt = teil.y * grafik.größeQuadrat;
ctx.fillStyle = farbe;
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.zeichne(ctx, spiel.früchte, "red");
grafik.zeichne(ctx, schlange.teile, "green");
}
};
var spielSteuerung = {
verarbeiteEingabe: function(keyPressed) {
var taste = keyPressed.key.toLowerCase();
var zielRichtung = schlange.richtung;
if(taste == "w" && schlange.richtung != "S") zielRichtung = "N";
if(taste == "a" && schlange.richtung != "O") zielRichtung = "W";
if(taste == "s" && schlange.richtung != "N") zielRichtung = "S";
if(taste == "d" && schlange.richtung != "W") 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.