Dieser Quellcode kann Tastatureingaben verarbeiten, sodass der Spieler die Schlange steuern kann. Mit der Funktion addEventListener sorgst du dafür, dass die Bewegung der Schlange über die WASD-Tasten auf der Tastatur gesteuert werden kann. Du verwendest außerdem clearTimeout, um zu verhindern, dass die Schlange schneller 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 :[
"###############",
"# #",
"# #",
"# #",
"# #### #",
"# #### #",
"# #",
"# #",
"# #",
"###############"
],
tick: function() {
window.clearTimeout(spiel.timer);
spiel.anzahlTicks++;
schlange.gehe();
grafik.zeichneSpiel();
spiel.timer = window.setTimeout("spiel.tick()", 500);
},
};
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() ;
schlange.teile.unshift(ort);
schlange.teile.pop();
}
};
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.