Definiere für die Spielfigur ein Objektliteral namens spieler mit Eigenschaften für die Größe und die Position auf dem Spielfeld. Gib dem Objektliteral eine Funktion namens zeichne, die die Spielfigur als grünes Quadrat auf dem Bildschirm darstellt.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Renne!</title>
</head>
<body>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function Boden(x, höhe) {
this.x = x;
this.breite = 700;
this.höhe = höhe;
}
var welt = {
höhe: 480,
breite: 640,
schwerkraft: 10,
höchste: 240,
speed: 5,
strecke: 0,
bodenKacheln: [
new Boden(0, 140)
],
bewegeBoden: function() {
for(index in this.bodenKacheln) {
var kachel = this.bodenKacheln[index];
kachel.x -= this.speed;
this.strecke += this.speed;
}
},
neueKacheln: function() {
if(this.bodenKacheln.length >= 3) {
return;
}
var vorigeKachel = this.bodenKacheln[this.bodenKacheln.length - 1];
var zufallsHöhe = Math.floor(Math.random() * this.höchste) + 20;
var x = (vorigeKachel.x + vorigeKachel.breite);
var nächste = new Boden(x, zufallsHöhe);
this.bodenKacheln.push(nächste);
},
entsorgeKacheln: function() {
for(index in this.bodenKacheln) {
if(this.bodenKacheln[index].x <= -this.bodenKacheln[index].breite) {
this.bodenKacheln.splice(index, 1);
}
}
},
tick: function() {
this.entsorgeKacheln();
this.neueKacheln();
this.bewegeBoden();
},
zeichne: function() {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, this.breite, this.höhe);
for(index in this.bodenKacheln) {
var kachel = this.bodenKacheln[index];
var y = welt.höhe - kachel.höhe;
ctx.fillStyle = "blue";
ctx.fillRect(kachel.x, y, kachel.breite, kachel.höhe);
}
}
};
var spieler = {
x: 160,
y: 340,
höhe: 20,
breite: 20,
zeichne: function() {
ctx.fillStyle = "green";
ctx.fillRect(spieler.x, spieler.y - spieler.höhe, this.höhe, this.breite);
}
};
function tick() {
welt.tick();
welt.zeichne();
spieler.zeichne();
window.setTimeout("tick()", 1000/60);
}
tick();
</script>
</body>
</html>
Illustrations © Duncan Beedie
All rights reserved.