In diesem Quellcode verwendest du prozedurale Generierung, um neue Kacheln zu erzeugen. Du verwendest die Funktionen Math.floor und Math.random, um zufällige ganze Zahlen für die Höhe der neuen Kacheln zu erzeugen. Indem du den Operator new zusammen mit der Konstruktorfunktion Boden verwendest, erzeugst du neue Kacheln. Die Funktion entsorgeKacheln bewirkt, dass Kacheln, die nicht mehr sichtbar sind, aus dem Array entfernt werden. So wird der Arbeitsspeicher des Computers geschont.
<!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);
}
}
};
function tick() {
welt.tick();
welt.zeichne();
window.setTimeout("tick()", 1000/60);
}
tick();
</script>
</body>
</html>
Diese Website verwendet Cookies, um Ihnen unseren Dienst bestmöglich bereitzustellen. Einige von ihnen sind essenziell, während andere uns helfen, diese Website und Ihre Erfahrung zu verbessern.Wenn Sie unter 16 Jahre alt sind und Ihre Zustimmung zu freiwilligen Diensten geben möchten, müssen Sie Ihre Erziehungsberechtigten um Erlaubnis bitten.Wir verwenden Cookies und andere Technologien auf unserer Website. Einige von ihnen sind essenziell, während andere uns helfen, diese Website und Ihre Erfahrung zu verbessern.Personenbezogene Daten können verarbeitet werden (z. B. IP-Adressen), z. B. für personalisierte Anzeigen und Inhalte oder Anzeigen- und Inhaltsmessung.Weitere Informationen über die Verwendung Ihrer Daten finden Sie in unserer Datenschutzerklärung.Sie können Ihre Auswahl jederzeit unter Einstellungen widerrufen oder anpassen.
Wenn Sie unter 16 Jahre alt sind und Ihre Zustimmung zu freiwilligen Diensten geben möchten, müssen Sie Ihre Erziehungsberechtigten um Erlaubnis bitten.Wir verwenden Cookies und andere Technologien auf unserer Website. Einige von ihnen sind essenziell, während andere uns helfen, diese Website und Ihre Erfahrung zu verbessern.Personenbezogene Daten können verarbeitet werden (z. B. IP-Adressen), z. B. für personalisierte Anzeigen und Inhalte oder Anzeigen- und Inhaltsmessung.Weitere Informationen über die Verwendung Ihrer Daten finden Sie in unserer Datenschutzerklärung.Hier finden Sie eine Übersicht über alle verwendeten Cookies. Sie können Ihre Einwilligung zu ganzen Kategorien geben oder sich weitere Informationen anzeigen lassen und so nur bestimmte Cookies auswählen.