In diesem Quellcode definieren wir ein Array namens früchte. Es enthält ein Objekt mit x- und y-Koordinaten, das eine Frucht darstellt. In der Funktion zeichneFrüchte verwendest du die Array-Methode forEach, um Früchte als rote Quadrate auf das Spielfeld zu zeichnen. Da die Funktion zeichneFrüchte der Funktion zeichneSchlange sehr ähnelt, vereinigen wir beide Funktionen zu einer einzigen Funktion namens zeichne.
<!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 :[
"###############",
"# #",
"# #",
"# #",
"# #### #",
"# #### #",
"# #",
"# #",
"# #",
"###############"
],
früchte: [
{x: 1, y: 1}
],
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;
});
},
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, schlange.teile, "green");
grafik.zeichne(ctx, spiel.früchte, "red");
}
};
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.