Spieleelemente für das Web nachbauen: Die unter den USA -Karte streift

Webentwickler lassen sich oft vom Design von Videospielen inspirieren. Von den Benutzeroberflächen beliebter Titel wie Overwatch bis hin zu den ansprechenden Mechaniken von Spielen wie Pokémon Go bieten Spielelemente umfangreiche Möglichkeiten für die Verbesserung von Webentwicklungsprojekten. Dieser Ansatz ermöglicht eine fokussierte Entwicklung von Fähigkeiten, indem sie sich mit bestimmten Spielfunktionen befassen, anstatt ganze Spiele zu erstellen. Dieser fokussierte Ansatz setzt Entwickler häufig neuen Technologien und Techniken aus.

Dieser Artikel zeigt, dass die Nachbildung der Karten -Karten -Karton -Mechaniker der Karten -Karton nachgebaut wird. Für diejenigen, die unbekannt sind, ist unter uns ein Multiplayer -Spiel, bei dem die Spieler bei den Aufgaben Betreiber unter den Besatzungsmitgliedern identifizieren müssen. Die Karten -Swipe -Aufgabe hat trotz ihrer Einfachheit aufgrund ihrer Schwierigkeit einen memetischen Status erreicht.

Interaktive Demo

Hier ist eine Erholung der Karten -Karton -Karton -Karton: (Die Demo würde hier eingebettet sein)

Erforschen wir die Techniken, die zum Aufbau dieser Demo verwendet werden.

Maus- und Touch -Event -Handhabung

Die Kernfunktionen beinhalten die Kartenschärfe. Die Karte folgt dem Zeiger horizontal und bleibt vertikal mit dem Leser ausgerichtet. Das Ziehen ist auf einen bestimmten Bereich beschränkt, und die Karte setzt bei der Veröffentlichung auf ihre ursprüngliche Position zurück.

Dies wird mit Maus- und Touch -Event -Handlern erreicht. Drei Funktionen - für mousedown , mousemove und mouseup (oder deren Berührungsäquivalente) - verwalten die Interaktion. Hier ist ein vereinfachter JavaScript -Code -Snippet:

 const card = document.getElementById ('karten');
const reader = document.getElementById ('reader');
Sei aktiv = false;
lass initialX;

// Event -Hörer
document.addeventListener ('MouseDown', Dragstart);
document.addeventListener ('Mousemove', Drag);
document.adDeVentListener ('Mauseup', Dragend);
document.adDeVentListener ('TouchStart', Dragstart);
document.adDeVentListener ('TouchMove', Drag);
document.adDeVentListener ('Touchend', Dragend);

// ... (Dragstart, Drag-, Dragend- und Settranslate -Funktionen wie im Original) ...

Validierung von Swipes mit performance.now()

Überprüfung der Validierung und der Entfernung. Eine unzureichende Entfernung oder eine falsche Geschwindigkeit führt zu einem ungültigen Schlag.

Die Position der Karte relativ zum Leser wird in dragEnd überprüft:

 status lassen;
// ... (prüfen Sie, ob die Karte nicht den ganzen Weg geschlagen wurde) ...

Die Swipe -Dauer wird mit performance.now() Zeitstempel in dragStart und dragEnd .

 // ... (Zeitstempel bei Drag Start und Ende mit Performance.Now ()) ...

Das data-status -Attribut des Leserelements wird basierend auf dem Validierungsergebnis aktualisiert. CSS zeigt dann die entsprechende Nachricht an und beleuchtet ein grünes oder rotes Licht.

 / * CSS für Statusnachrichten und Lichtanzeigen */

Verbesserung der Grafik und Audio

Weitere Verfeinerungen sind die Verwendung einer benutzerdefinierten Schriftart (DSEG) für einen Retro -LCD -Look und Hinzufügen einer subtilen Jitter -Animation in den Text mit CSS:

 / * CSS für Jitter -Animation *//

Und schließlich die Soundeffekte des Originalspiels einbeziehen:

 // ... (Audio -Wiedergabe für gültige/ungültige Swipes) ...

Dies verbessert die allgemeine Benutzererfahrung.

Wiederholungsspielmechanik

Diese Erholung der Karten -Karten -Swipe zeigt, wie Replikationsspielelemente die Fähigkeiten der Webentwicklung erweitern können. Durch die Konzentration auf einen bestimmten Spielmechaniker können Entwickler verschiedene Technologien und Designaspekte in einem überschaubaren Bereich untersuchen. Versuchen Sie, Ihre Lieblingsspielmechanik zu replizieren - Sie könnten überrascht sein, was Sie lernen!

Das obige ist der detaillierte Inhalt vonSpieleelemente für das Web nachbauen: Die unter den USA -Karte streift. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!