Dieser Quellcode erhöht allmählich die Geschwindigkeit des Spiels und macht es damit schwieriger. Verwende eine if-Anweisung, um herauszufinden, wann wieder drei neue Kacheln erzeugt worden sind. Falls dann noch nicht die maximale Geschwindigkeit erreicht ist, wird mit dem Inkrement-Operator die Scroll-Geschwindigkeit um 1 erhöht. Mit Methoden des Zeichenkontext deines canvas-Elements zeigst du auf dem Bildschirm die Geschwindigkeit und die bisher zurückgelegte Strecke an.
<!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,
maxSpeed: 15,
anzahlKacheln: 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 größteErreichbareHöhe = vorigeKachel.höhe + spieler.höhe * 3.5;
if (größteErreichbareHöhe > this.höchste) {
größteErreichbareHöhe = this.höchste;
}
var zufallsHöhe = Math.floor(Math.random() * größteErreichbareHöhe) + spieler.höhe;
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);
this.anzahlKacheln ++;
if(this.anzahlKacheln % 3 == 0 && this.speed < this.maxSpeed) {
this.speed++;
}
}
}
},
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);
}
ctx.fillStyle = "white";
ctx.font = "28px Arial";
ctx.fillText("Geschwindigkeit: " + this.speed, 10, 40);
ctx.fillText("Strecke: " + this.strecke, 10, 75);
}
};
var spieler = {
x: 160,
y: 340,
höhe: 20,
breite: 20,
kraftNachUnten: welt.schwerkraft,
sprunghöhe:0,
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 += this.kraftNachUnten;
var bodenHöhe = welt.höheDesBodens(this.x);
var yOberseiteBoden = welt.höhe - bodenHöhe;
if(this.y > yOberseiteBoden) {
this.y = yOberseiteBoden;
}
if(this.kraftNachUnten < 0) {
this.sprunghöhe += (this.kraftNachUnten * -1);
if(this.sprunghöhe >= spieler.höhe * 6) {
this.kraftNachUnten = welt.schwerkraft;
this.sprunghöhe = 0;
}
}
},
tasteGedrückt: function(keyInfo) {
var bodenHöhe = welt.höheDesBodens(this.x );
var aufDemBoden = bodenHöhe == (welt.höhe - this.y);
if(aufDemBoden) {
this.kraftNachUnten = -8;
}
},
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);
}
};
window.addEventListener("keypress",
function(keyInfo) { spieler.tasteGedrückt(keyInfo); }, false);
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.