Schreiben Sie Ihr erstes Spiel: Snake in JavaScript in 10 Minuten 🐍

🐍 Snake in reinem HTML + JS: Schritt für Schritt und mit Memes!

Hast du jemals davon geträumt, dein eigenes Spiel zu schreiben? Und was ist mit den Klassikern - Schlangen? 😎 Heute erstellen wir Schritt für Schritt ein echtes Retro-Spiel direkt im Browser. Keine Bibliotheken, keine Frameworks – nur HTML, CSS und JavaScript.

⚠️ Spoiler: Du wirst nicht nur eine Schlange starten, du wirst verstehen, wie funktioniert es.

Und wenn es dir plötzlich zu schwierig erscheint, Ruhe, nur Ruhe, wir erklären alles mit Memes und Beispielen. Los geht's! 🚀

✨ Demo-Projekt | 📂 Quellcode auf GitHub herunterladen

🤖 In der App Kodik Sie können HTML, CSS und JavaScript sowie viele andere Kurse lernen, um Ihre Reise in die Webentwicklung zu beginnen! 🌱

📦 Schritt 1: HTML — Erstellen Sie die Grundlage des Spiels

HTML ist das Skelett. Darin platzieren wir:

• canvas - unsere Leinwand, auf der wir die Schlange und das Essen malen werden;

• div mit Schaltflächen zum Starten und Beenden des Spiels;

• Punktzähler.

<canvas id="game" width="320" height="320"></canvas>

🎨 Schritt 2: CSS – der Stil, ohne den es langweilig wäre

Ein bisschen Stilzauber:

• schwarzer Hintergrund

• Leinwand mit Rahmen und abgerundeten Kanten

• Anpassung an mobile Geräte (Touch-Action)

Schaltflächen, Titel, Start- und Endbildschirme sind ebenfalls stilisiert, um das Spiel angenehm zu gestalten.

🧠 Schritt 3: JavaScript — das Gehirn der ganzen Schlange 🧬

Lassen Sie uns nun den gesamten Code des Spiels im Detail analysieren.

1. Initialisierung der Elemente:

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

canvas — Zugriff auf das Canvas-Element. ctx - damit werden wir zeichnen.

Wir deklarieren auch Variablen: Zellgröße, Schlangenrichtung, Punkte, Geschwindigkeit und Spielstatus.

const scale = 20;
const rows = canvas.height / scale;
const columns = canvas.width / scale;
let direction = { x: 1, y: 0 };
let nextDirection = { x: 1, y: 0 };
let speed = 250;
let score = 0;

2. Klasse Schlange - die Schlange selbst:

class Snake {
  constructor() {
    this.body = [
      { x: 5, y: 5 },
      { x: 4, y: 5 },
    ];
  }

  update() {
    const head = { ...this.body[0] };
    head.x += direction.x;
    head.y += direction.y;
    this.body.unshift(head);

    if (head.x === fruit.x && head.y === fruit.y) {
      score++;
      if (speed > 80) speed -= 5;
      placeFruit();
    } else {
      this.body.pop();
    }
  }

  draw() {
    this.body.forEach((segment, i) => {
      ctx.fillStyle = i === 0 ? "#58a6ff" : "#3fb950";
      ctx.beginPath();
      ctx.roundRect(
        segment.x * scale + 2,
        segment.y * scale + 2,
        scale - 4,
        scale - 4,
        6
      );
      ctx.fill();
    });
  }

  checkCollision() {
    const [head, ...body] = this.body;
    return (
      head.x < 0 ||
      head.x >= columns ||
      head.y < 0 ||
      head.y >= rows ||
      body.some((s) => s.x === head.x && s.y === head.y)
    );
  }
}

Erläuterung:

• update() — Bewegen Sie die Schlange und prüfen Sie, ob sie die Frucht gefressen hat;

• draw() — zeichnet jedes Segment;

• checkCollision() - Überprüfung von Kollisionen mit Grenzen oder sich selbst.

3. Essen (Obst):

function placeFruit() {
  fruit = {
    x: Math.floor(Math.random() * columns),
    y: Math.floor(Math.random() * rows),
  };

  if (snake.body.some((s) => s.x === fruit.x && s.y === fruit.y)) {
    placeFruit();
  }
}

Das Essen wird zufällig platziert. Wenn es auf eine Schlange fällt, wird es neu generiert.

4. Spielzyklus:

function gameLoop(time = 0) {
  if (!playing) return;
  const delta = time - lastTime;
  if (delta > speed) {
    direction = nextDirection;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    snake.update();
    if (snake.checkCollision()) {
      endGame();
      return;
    }
    drawFruit();
    snake.draw();
    lastTime = time;
  }
  requestAnimationFrame(gameLoop);
}

Jeder „Frame“:

• Wir bereinigen die Leinwand

• Bewegen Sie die Schlange

• Wir prüfen auf Tod

• Wir zeichnen Essen und eine Schlange

5. Verwaltung:

Tastatur:

window.addEventListener("keydown", (e) => {
  if (e.key === "ArrowUp" && direction.y !== 1) nextDirection = { x: 0, y: -1 };
  if (e.key === "ArrowDown" && direction.y !== -1) nextDirection = { x: 0, y: 1 };
  if (e.key === "ArrowLeft" && direction.x !== 1) nextDirection = { x: -1, y: 0 };
  if (e.key === "ArrowRight" && direction.x !== -1) nextDirection = { x: 1, y: 0 };
});

Swipes:

canvas.addEventListener("touchstart", (e) => { ... });
canvas.addEventListener("touchend", (e) => { ... });

💀 Spielende:

function endGame() {
  playing = false;
  canvas.style.display = "none";
  scoreDisplay.style.display = "none";
  gameOverScreen.style.display = "flex";
  finalScore.textContent = `You scored ${score} points`;
}

✅ Fazit: Du bist ein Schlangenmeister geworden 🐍

Du hast nicht nur den Code geschrieben - du hast verstanden, wie die Spiellogik funktioniert. Das ist ein riesiger Schritt!

Möchtest du mehr erfahren? Dann schau mal hier vorbei Kodik - es gibt viele Übungen, Erklärungen in einfacher Sprache und lustige Aufgaben.