Dieser Quellcode macht das Spiel spannender, indem alle 10 Ticks eine neue Frucht auf das Spielfeld gesetzt wird. Du definierst eine neue Funktion namens neueZufallsFrucht im Objektliteral spiel. Du verwendest die Funktionen Math.floor und Math.random, um für jede neue Frucht eine Zufallsposition auf dem Spielfeld zu finden. Mit einer if-Anweisung sorgst du dafür, dass eine neue Frucht nur auf ein leeres Feld gesetzt wird.
<!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++;
if(spiel.anzahlTicks % 10 == 0) {
spiel.neueZufallsfrucht ();
}
var ergebnis = schlange.gehe();
if (ergebnis == "Ende") {
alert("Game Over!");
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;
}
};
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";
}
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, 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.