Zurück zum Start
Tutorial 6: Jetzt kommt Bewegung ins Spiel
In den ersten Tutorials konntest du grundlegende Kenntnisse zum JavaScript programmieren erwerben. Es wird hier vorausgesetzt, dass du daher bereits ein bisschen Ahnung von der Sache hast.
Hier findest du nochmal eine Zusammenfassung was du bereits können solltest.
Etwa solltest du wissen, wie man eine JavaScript Programm in eine Html-Datei hineinschreibt.
Jetzt beginnen wir mit einem neuen Abschnitt unserere Reihe. Wie kann ich eigentlich etwas bewegen!
In unserem ersten Tutorial zeigen wir die Grundlagen, wie jegliche Bewegung, Animation und Action in Spielen gemacht werden. Man benötigt so etwas wie einen Taktgeber, einen Motor oder Antrieb . Wir nennen es im Beispiel einen Loop. Er wird immer und immer wieder durchlaufen und bildet somit unseren Antrieb.
Was das Programm macht ist wenig sensationell: es zählt einfach zu einer Zahl - wir haben sie z genannt - immer 1 dazu.
Das Kernstück des Codes bildet die Funktion LOOP. Sien ruft sich mittels requestAnimationFrame(LOOP); am Ende wiederum selbst auf. So ensteht eine Schleife, die vom Computer meistens 60 mal /Sekunde abgearbeitet wird. Eine derartige Konstruktion bildet die Grundlage unseres JavaScript-Spieles, welches am Ende entstehen soll.
var z=0;
function LOOP() {
z++;
document.getElementById("Anzeige").innerText = z;
requestAnimationFrame(LOOP);
}
LOOP();
Schaue dir unbedingt den Quelltext bzw. Frame-Quelltext des folgenden Fensters an. Du erkennst sofort, was hier gemacht wurde.
