Hier ist der komplette Quellcode für Snake. Darin sind schon einige Anregungen zur Weiterentwicklung aus dem Buch umgesetzt. Der Schwierigkeitsgrad hängt von der Geschwindigkeit der Schlange und der Anzahl der Früchte auf dem Spielfeld ab.
Snake ist ein Tick-basiertes Geschicklichkeitsspiel, bei dem sich die Spielfiguren bei jedem Tick bewegen. Dieselben Programmiertechniken kannst du anwenden, um eigene Versionen von Klassikern wie Tetris und Pac-Man oder von modernen Spielen wie Candy Crush zu entwickeln.
<!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()", 200);
},
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, "coral");
grafik.zeichne(ctx, schlange.teile, "blue");
}
};
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.