In dieser Anleitung lernst du Schritt für Schritt, wie du ein eigenes Spiel in JavaScript programmierst.
Du baust den "Luftballonregen" – ein Spiel, bei dem du Ballons fangen musst,
während du Fallen ausweichst.
📝 Was du brauchst:
✅ Einen Texteditor (z.B. Notepad, VS Code, oder direkt hier im Browser)
✅ Einen Webbrowser (Chrome, Firefox, Safari)
✅ Etwas Geduld und Spaß am Programmieren!
🎯 Das fertige Spiel – zum Ausprobieren!
Bevor du loslegst, kannst du hier das Endergebnis testen:
🎈 LUFTBALLONREGEN
Demo
A ← Links
D → Rechts
SPACE Start / Neustart
ESC Pause
💡 Klicke auf das Pause-Symbol ⏸ oben rechts im Spiel
📚 Schritt-für-Schritt Anleitung
Kopiere den Code aus jedem Schritt in deine Datei und teste ihn!
1
HTML-Grundgerüst erstellen
Erstelle eine neue Datei mit dem Namen spiel.html auf deinem Desktop.
Füge dieses Grundgerüst ein:
<!DOCTYPE html>
<html>
<head>
<title>Mein erstes Spiel</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #1a1a2e;
}
canvas {
border: 3px solid white;
border-radius: 10px;
}
</style>
</head>
<body>
<canvas id="spiel" width="800" height="700"></canvas>
<script>
// Hier kommt später der JavaScript-Code rein
console.log("Hallo Welt!");
</script>
</body>
</html>
✅ Teste es! Öffne die Datei im Browser. Du solltest ein leeres, dunkles Fenster sehen.
In der Browser-Konsole (F12 → Console) siehst du "Hallo Welt!".
2
Canvas und Farben vorbereiten
Jetzt bereiten wir die Spielumgebung vor. Ersetze den Inhalt von <script> mit diesem Code:
✅ Teste es! Jetzt siehst du einen blauen Hintergrund mit einem roten Quadrat.
💡 Erklärung:canvas ist die Leinwand, auf der wir zeichnen.
ctx ist der Stift, mit dem wir malen.
Farben speichern wir in einem Objekt.
3
Spieler bewegen mit Tastatur
Jetzt machen wir den roten Block beweglich! Füge diesen Code hinzu:
// ====== 4. Spieler-Variablen ======
let spieler = {
x: 375,
y: 550,
breite: 50,
hoehe: 50,
geschw: 8
};
// ====== 5. Tastatur-Speicher ======
let tasten = {};
document.addEventListener('keydown', (e) => {
tasten[e.key] = true;
});
document.addEventListener('keyup', (e) => {
tasten[e.key] = false;
});
// ====== 6. Spiel-Schleife ======
function gameLoop() {
// Hintergrund löschen
ctx.fillStyle = FARBEN.BLAU;
ctx.fillRect(0, 0, 800, 700);
// Spieler bewegen
if (tasten['a'] || tasten['A']) {
spieler.x -= spieler.geschw;
}
if (tasten['d'] || tasten['D']) {
spieler.x += spieler.geschw;
}
// Spieler am Rand stoppen
if (spieler.x < 0) spieler.x = 0;
if (spieler.x > 800 - spieler.breite) spieler.x = 800 - spieler.breite;
// Spieler zeichnen
ctx.fillStyle = FARBEN.ROT;
ctx.fillRect(spieler.x, spieler.y, spieler.breite, spieler.hoehe);
// Nächstes Bild
requestAnimationFrame(gameLoop);
}
// Spiel starten
gameLoop();
✅ Teste es! Jetzt kannst du den roten Block mit A und D bewegen!
💡 Erklärung:requestAnimationFrame sorgt dafür, dass das Spiel immer wieder neu gezeichnet wird (wie ein Zeichentrickfilm).
Die Tastatur-Events speichern, welche Tasten gerade gedrückt sind.
4
Ballons erstellen (die Punkte)
Jetzt kommen die Ballons! Füge diesen Code oberhalb von gameLoop() ein:
🎯 JETZT BIST DU DRAN!
1. Kopiere den kompletten Code in eine neue Datei.
2. Speichere sie als mein_spiel.html auf dem Desktop.
3. Öffne die Datei im Browser.
4. Drücke SPACE und spiele!
💡 Tipp: Du kannst den Code ändern und eigene Ideen einbauen!
🎨 Ideen zum Weiterbauen
🔴 Neue Farben
Ändere die Farben der Ballons oder des Spielers!
FARBEN.ROT = '#FF1493'
⚡ Power-Ups
Füge goldene Ballons hinzu, die 5 Punkte geben!
if (b.farbe === GOLD) punkte += 5
🎵 Sound
Füge Soundeffekte beim Fangen oder Verlieren hinzu!
new Audio('sound.mp3').play()
🎉 GLÜCKWUNSCH!
Du hast dein erstes JavaScript-Spiel programmiert!
Du kannst es jetzt deinen Freunden zeigen oder weiter verbessern.
Füge diesen Code in dein Spiel ein (am Anfang von <script>):
// ====== HINTERGRUNDMUSIK ======let musik = new Audio('music.mp3'); // ← HIER DATEINAME ÄNDERN!
musik.loop = true; // Musik wiederholt sich
musik.volume = 0.5; // Lautstärke 0.0 - 1.0// Musik starten (z.B. bei SPACE-Taste)if (startbildschirm) {
musik.play();
}
// Musik pausieren (z.B. bei ESC)if (pause) {
musik.pause();
}
// Musik fortsetzenif (!pause) {
musik.play();
}
// ============================================================// 🎵 HINTERGRUNDMUSIK// ============================================================// 1. Musik laden (Datei muss im gleichen Ordner liegen)let hintergrundMusik = new Audio('music.mp3'); // ← HIER DATEINAME ÄNDERN!
hintergrundMusik.loop = true; // Endlosschleife
hintergrundMusik.volume = 0.3; // Lautstärke (0.0 = leise, 1.0 = laut)// 2. Musik starten (wenn das Spiel startet)function musikStarten() {
try {
hintergrundMusik.play();
console.log('🎵 Musik läuft');
} catch(e) {
console.log('⚠️ Musik konnte nicht gestartet werden');
}
}
// 3. Musik pausierenfunction musikPausieren() {
hintergrundMusik.pause();
console.log('⏸ Musik pausiert');
}
// 4. Musik fortsetzenfunction musikFortsetzen() {
try {
hintergrundMusik.play();
console.log('▶️ Musik läuft weiter');
} catch(e) {}
}
// 5. Musik stoppen (bei Game Over)function musikStoppen() {
hintergrundMusik.pause();
hintergrundMusik.currentTime = 0; // Zurück zum Anfang
console.log('⏹ Musik gestoppt');
}
// 6. Lautstärke ändernfunction musikLautstaerke(volume) {
hintergrundMusik.volume = volume;
console.log('🔊 Lautstärke:' + volume);
}
✅ Fertig! Jetzt musst du nur noch eine Musikdatei in den gleichen Ordner legen
und den Dateinamen in 'music.mp3' anpassen.
🎮 So baust du die Musik in dein Spiel ein
Füge diese Zeilen an den richtigen Stellen ein:
// ====== 1. Bei SPACE-Taste (Start) ======if (e.key === ' ' || e.key === 'Space') {
e.preventDefault();
if (startbildschirm) {
startbildschirm = false;
musikStarten(); // 🎵 Musik starten
}
if (gameover) {
location.reload();
}
if (pause) {
pause = false;
musikFortsetzen(); // 🎵 Musik fortsetzen
}
}
// ====== 2. Bei ESC-Taste (Pause) ======if (e.key === 'Escape') {
if (!startbildschirm && !gameover) {
pause = !pause;
if (pause) {
musikPausieren(); // ⏸ Musik pausieren
} else {
musikFortsetzen(); // ▶️ Musik fortsetzen
}
}
}
// ====== 3. Bei Game Over ======if (leben <= 0) {
gameover = true;
musikStoppen(); // ⏹ Musik stoppen
}
💡 Tipp: Wenn die Musik nicht startet, liegt es oft daran, dass der Browser
Audio erst nach einem Klick erlaubt. Drücke einfach SPACE oder klicke ins Spiel!
🔊 Musik-Tester
Hier kannst du testen, ob die Musik abgespielt wird. Lege eine music.mp3 im gleichen Ordner ab!
⚠️ Keine Musik geladen. Lege music.mp3 in den Ordner!
📁 Wichtig: Die Datei music.mp3 muss im gleichen Ordner liegen wie deine spiel.html!
Kostenlose Musik: Pixabay Music