Dieser Quellcode fügt Kollisionserkennung hinzu, sodass das Spiel endet, wenn die Spielfigur einen Sprung verpasst und gegen die Kante einer Plattform stößt. Dazu verwendest du eine if-Anweisung und definierst eine stopp-Funktion. Bisher gibt es noch den Fehler, dass die Spielfigur durch Plattformen gehen kann. Diesen Bug beseitigst du, indem du herausfindest, wann die rechte Seite der Spielfigur mit einer Plattform zusammenstößt.
<!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,
autoScroll: true,
bodenKacheln: [
new Boden(0, 140)
],
stopp: function() {
this.autoScroll = false;
},
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);
}
}
},
höheDesBodens: function(spielerX) {
for(index in this.bodenKacheln) {
var kachel = this.bodenKacheln[index];
if(kachel.x <= spielerX && kachel.x + kachel.breite >= spielerX) {
return kachel.höhe;
}
}
return -1;
},
tick: function() {
if(!this.autoScroll) {
return;
};
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,
berechneAbstandZumBoden: function(x) {
var bodenHöhe = welt.höheDesBodens(x);
return welt.höhe - this.y - bodenHöhe;
},
wendeSchwerkraftAn: function() {
this.abstandZumBoden = this.berechneAbstandZumBoden(this.x);
var abstandZumBodenRechts = this.berechneAbstandZumBoden(this.x + this.breite);
if(this.abstandZumBoden < 0 || abstandZumBodenRechts < 0) {
welt.stopp()
}
},
verarbeiteSchwerkraft: function() {
this.y += welt.schwerkraft;
var bodenHöhe = welt.höheDesBodens(this.x);
var yOberseiteBoden = welt.höhe - bodenHöhe;
if(this.y > yOberseiteBoden) {
this.y = yOberseiteBoden;
}
},
tick: function() {
this.verarbeiteSchwerkraft();
this.wendeSchwerkraftAn();
},
zeichne: function() {
ctx.fillStyle = "green";
ctx.fillRect(spieler.x, spieler.y - spieler.höhe, this.höhe, this.breite);
}
};
function tick() {
spieler.tick();
welt.tick();
welt.zeichne();
spieler.zeichne();
window.setTimeout("tick()", 1000/60);
}
tick();
</script>
</body>
</html>
Illustrations © Duncan Beedie
All rights reserved.