Dieser Quellcode ermöglicht dem Spieler über die Tastatur die Spielfigur zu steuern und sie springen zu lassen. Du verwendest einen EventListener, um festzustellen, wann eine Taste gedrückt worden ist. Wenn das passiert, wird die Eigenschaft kraftNachUnten auf einen negativen Wert gesetzt, wodurch die Spielfigur nach oben springt. Mit einer if-Anweisung sorgst du dafür, dass sie wieder nach unten fällt, sobald sie die maximale Sprunghöhe erreicht hat.
<!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,
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.