Dieser Quellcode verwendet eine Timer-Funktion mit dem Namen setTimeout. Alle 500 Millisekunden wird die Funktion tick aufgerufen. Du programmierst eine Funktion namens zeichneSpiel, die bei jedem Tick die Schlange neu zeichnet. Störe dich nicht daran, dass sich die Schlange noch nicht bewegt. Das kommt später.
<!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() {
spiel.anzahlTicks++;
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",
gehe: function() {
}
};
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");
grafik.zeichneSpielfeld(ctx);
grafik.zeichneSchlange(ctx);
}
};
var spielSteuerung = {
starteSpiel: function () {
spiel.tick();
}
};
spielSteuerung.starteSpiel();
</script>
</body>
</html>
Illustrations © Duncan Beedie
All rights reserved.