LabEx
LoginBeitreten

Erstelle ein Scratch Card-Webspiel

JavaScriptBeginner
Jetzt üben

Einführung

In diesem Projekt werden wir Sie durch den Prozess des Erstellens eines einfachen webbasierten Scratch Card-Spiels leiten. Dieses Spiel ermöglicht es Benutzern, eine graue Überlagerung abzuschratzen, um ein zugrunde liegendes Bild zu enthüllen, das entweder eine "Gewinner"- oder eine "Nochmal versuchen"-Nachricht sein wird. Wir werden HTML für die Struktur, CSS für die Gestaltung und JavaScript für die Interaktivität verwenden.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt lernen Sie:

  • Wie man ein grundlegendes Web-Projekt mit HTML, CSS und JavaScript einrichtet
  • Wie man die HTML5-Canvas manipuliert, um interaktive Effekte zu erzeugen
  • Wie man JavaScript verwendet, um Benutzerinteraktionen wie Mausklicks und -bewegungen zu behandeln
  • Wie man mit Bildern in der Webentwicklung umgeht, einschließlich des dynamischen Ladens und Anzeigens
  • Wie man eine einfache Spiel Logik implementiert, die das Ergebnis für den Benutzer zufällig bestimmt

🏆 Errungenschaften

Nach Abschluss dieses Projekts werden Sie in der Lage sein:

  • Ein solides Verständnis der HTML5-Canvas und ihrer Möglichkeiten für webbasierte Spiele und interaktive Anwendungen zu demonstrieren
  • Ihre Fähigkeiten bei der Verwendung von JavaScript zur Erstellung dynamischen Inhalts und Reaktion auf Benutzer-Eingaben zu zeigen
  • Verschiedene Webanwendungen zu integrieren, um eine vollständige und funktionierende Webanwendung zu erstellen
  • Eine einfache, aber ansprechende Benutzeroberfläche für ein webbasiertes Spiel zu entwerfen
  • Grundlegende Spieldesignkonzepte wie zufällige Ergebnisse und Benutzerinteraktion anzuwenden

Erstelle die HTML-Struktur

In diesem Schritt legen wir die grundlegende Struktur der Webseite in index.html fest, einschließlich der DOCTYPE-Deklaration, des html-Elements sowie der head- und body-Abschnitte. Wir definieren das Zeichensatz als UTF-8 für die universelle Zeichenerkennung und setzen die Viewport für das responsive Design, um sicherzustellen, dass unsere Scratch Card-Anwendung auf Geräten unterschiedlicher Größen gut aussieht.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Scratch Card</title>
  </head>
  <body>
    <div id="main">
      <div class="msg">
        Glücksgefühl? Probieren Sie es!
        <a href="#" onclick="window.location.reload()">Nochmal versuchen</a>
      </div>
      <div>
        <canvas></canvas>
      </div>
    </div>
    <script src="main.js"></script>
  </body>
</html>

Innerhalb des body erstellen wir ein div-Element mit der id "main", das als Container für unsere Anwendung dient. Innerhalb dieses Containers enthalten wir ein div mit der Klasse "msg", um eine spielerische Nachricht anzuzeigen, die den Benutzer auffordert, sein Glück zu versuchen. Diese Nachricht enthält auch einen Link, der beim Klicken die Seite neu lädt, sodass Benutzer die Scratch Card erneut versuchen können, ohne den Browser manuell neu zu laden.

Schließlich enthalten wir ein canvas-Element, in dem der Scratch Card-Effekt implementiert werden wird, und verbinden eine externe JavaScript-Datei namens "main.js", in der die Logik unserer Anwendung gespeichert ist.

Diese HTML-Struktur liefert die notwendige Grundlage für unsere Scratch Card-Anwendung und definiert die Bereiche, in denen Text und die kratzbare Fläche angezeigt werden.

✨ Lösung prüfen und üben

Stile das Canvas

In der JavaScript-Datei main.js beginnen wir, das Canvas-Element auszuwählen und einige Anfangsstyles anzuwenden.

const canvas = document.querySelector("canvas");
canvas.style.backgroundColor = "transparent";
canvas.style.position = "absolute";

Wir setzen die backgroundColor auf "transparent", um sicherzustellen, dass der Canvas-Hintergrund keinen Teil der Webseite verdeckt, auf der er platziert ist. Indem wir die position auf "absolute" setzen, haben wir mehr Flexibilität bei der Positionierung des Canvas über anderen Elementen, wenn dies erforderlich ist.

Dieser Schritt ist entscheidend für die Vorbereitung des Canvas-Elements, um sicherzustellen, dass es sich nahtlos in das Design der restlichen Webseite integriert und für die dynamischen Elemente, die wir in späteren Schritten hinzufügen werden, bereit ist.

✨ Lösung prüfen und üben

Lade das Scratch-Bild

Hier laden wir ein zufälliges Bild, das als Hintergrund für die Scratch Card verwendet werden soll.

// Fortsetzung in main.js

// Array möglicher Bilder, die gezeigt werden sollen
const images = ["winner.png", "try_again.png"];
const selectedImage = images[Math.floor(Math.random() * images.length)];

// Erstellen eines neuen Image-Objekts und Festlegen der Quelle
const img = new Image();
img.src = selectedImage;

// Nachdem das Bild geladen ist, Größe und Hintergrund des Canvas anpassen
img.onload = () => {
  const ctx = canvas.getContext("2d");
  const w = img.width;
  const h = img.height;
  canvas.width = w;
  canvas.height = h;
  canvas.style.backgroundImage = `url(${img.src})`;

Wir erstellen ein Array namens images, das die Dateinamen möglicher Bilder enthält. Anschließend wählen wir zufällig ein Bild aus diesem Array mithilfe von Math.floor(Math.random() * images.length).

Wir erstellen ein neues Image-Objekt und setzen seine Quelle (src) auf das gewählte Bild. Der onload-Ereignislistener stellt sicher, dass wir erst mit dem Rest des Skripts fortfahren, wenn das Bild vollständig geladen ist, um Probleme zu vermeiden, die bei der Manipulation eines nicht vollständig heruntergeladenen Bildes auftreten könnten.

Dieser Schritt ist entscheidend für die dynamische Natur der Scratch Card, da er jedes Mal, wenn die Anwendung geladen oder aktualisiert wird, Variabilität und Überraschung einbringt. Indem wir ein zufälliges Bild laden, simulieren wir das unsichere Ergebnis einer echten Scratch Card und verbessern die Benutzererfahrung.

✨ Lösung prüfen und üben

Bereite die Scratch-Schicht vor

Nachdem das gewählte Bild auf das Canvas geladen wurde, müssen wir die Scratch-Schicht vorbereiten. Dies wird erreicht, indem das gesamte Canvas mit einem grauen Rechteck bedeckt wird. Diese graue Schicht dient als kratzbare Fläche, mit der der Benutzer interagieren wird, um das darunter liegende Bild zu enthüllen.

// Fortsetzung in main.js

// Bedecke das Canvas mit einem grauen Rechteck, um als Scratch-Schicht zu fungieren
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, w, h);

// Bereite das Canvas für den Scratch-Effekt vor
ctx.globalCompositeOperation = "destination-out";

In diesem Schritt setzen wir den Füllstil auf grau und zeichnen ein Rechteck, das das gesamte Canvas bedeckt, um eine kratzbare Schicht über dem ausgewählten Bild zu erstellen. Die globalCompositeOperation, die auf "destination-out" gesetzt ist, stellt sicher, dass jede neue Zeichnung auf dem Canvas die darunter liegenden Schichten transparent macht, sodass das darunter liegende Bild überall dort sichtbar wird, wo der Benutzer kratzt.

✨ Lösung prüfen und üben

Erstelle die Scratch-Funktion

Um den Scratch-Effekt zu implementieren, definieren wir eine draw-Funktion, die jedes Mal aufgerufen wird, wenn der Benutzer mit dem Canvas interagiert. Diese Funktion überprüft, ob der Benutzer derzeit zeichnet (isDrawing-Flag), und berechnet dann die Position des Cursors oder der Berührung relativ zum Canvas. Anschließend zeichnet sie einen Kreis an dieser Position mit einer Composite-Operation, die die graue Schicht transparent macht und das darunter liegende Bild freigibt.

// Fortsetzung in main.js

let isDrawing = false;

// Definiere die Funktion, um das Kratzen zu simulieren
const draw = (e) => {
  if (!isDrawing) return;
  e.preventDefault();
  const clientX = e.clientX || e.touches[0].clientX;
  const clientY = e.clientY || e.touches[0].clientY;
  const rect = canvas.getBoundingClientRect();
  const x = clientX - rect.left;
  const y = clientY - rect.top;

  // Zeichne einen Kreis an der Cursor- oder Berührungsposition
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI * 2);
  ctx.fill();
};

Diese Funktion stellt zunächst sicher, dass das isDrawing-Flag wahr ist, was darauf hindeutet, dass der Benutzer eine Scratch-Aktion gestartet hat. Anschließend berechnet sie die genaue Position, an der das Kratzen stattfindet, und zeichnet einen Kreis an dieser Position, um effektiv die graue Schicht abzuschratzen und Teile des darunter liegenden Bildes zu entdecken.

✨ Lösung prüfen und üben

Füge Event-Listener für Scratch-Aktionen hinzu

Schließlich müssen wir erkennen, wann der Benutzer Aktionen auf dem Canvas ausführt, um den Scratch-Effekt auszulösen.

// Fortsetzung in main.js

  // Ereignislistener, um Maus- und Berührinteraktionen zu behandeln
  canvas.addEventListener("mousedown", (e) => {
    isDrawing = true;
    draw(e);
  });
  canvas.addEventListener("touchstart", (e) => {
    isDrawing = true;
    draw(e);
  });
  canvas.addEventListener("mousemove", draw);
  canvas.addEventListener("touchmove", draw);
  canvas.addEventListener("mouseup", () => {
    isDrawing = false;
  });
  canvas.addEventListener("touchend", () => {
    isDrawing = false;
  });
}

Wir fügen Ereignislistener für mousedown, mousemove, mouseup, touchstart, touchmove und touchend hinzu. Diese Listener setzen das isDrawing-Flag und rufen die draw-Funktion entsprechend auf, um einen interaktiven Scratch-Effekt zu erstellen.

Wenn der Benutzer die Maustaste drückt oder den Bildschirm berührt (mousedown oder touchstart), setzen wir isDrawing auf wahr und beginnen, ihre Bewegung zu verfolgen, um den Scratch-Effekt zu erzeugen. Wenn sie die Taste loslassen oder den Bildschirm nicht mehr berühren (mouseup oder touchend), setzen wir isDrawing auf falsch und stoppen die Kratzaktion. Die mousemove- und touchmove-Ereignisse rufen solange die draw-Funktion auf, solange isDrawing wahr ist, was es dem Benutzer ermöglicht, die graue Schicht abzuschratzen und das darunter liegende Bild zu entdecken, während sie die Maus oder den Finger über dem Canvas bewegen.

Um die folgenden Effekte zu sehen, klicken Sie auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE und wechseln Sie zum Tab "Web 8080".

✨ Lösung prüfen und üben

Zusammenfassung

In diesem Projekt haben wir ein einfaches Scratch Card-Spiel erstellt, in dem Benutzer eine Schicht abkratzen können, um eine versteckte Nachricht zu entdecken. Wir haben die HTML-Struktur eingerichtet, das Canvas in JavaScript initialisiert, Bilder geladen und angezeigt und den Scratch-Effekt mithilfe der Canvas-API implementiert. Dieses Projekt kann eine lustige Ergänzung zu Webseiten sein und auf verschiedene Weise erweitert werden, z. B. indem mehr Bilder hinzugefügt werden, das Design verbessert wird oder es in ein größeres Spiel integriert wird.

Verwandt JavaScript Kurse
JavaScript für Anfänger

JavaScript für Anfänger

javascriptweb-development
Entwickeln Sie eine Tic-Tac-Toe-Webanwendung

Entwickeln Sie eine Tic-Tac-Toe-Webanwendung

javascriptweb-development
Erstellen eines Whack-a-Mole-Webspiels

Erstellen eines Whack-a-Mole-Webspiels

javascriptweb-development