HTML5-Spieleentwicklung Beispiel für ein Ping-Pong-Spiel (1)-H5-Tutorial-php.cn

HTML5-Spieleentwicklung Beispiel für ein Ping-Pong-Spiel (1)

PHPz

Freigeben： 2023-02-08 15:21:25

nach vorne

2202 Leute haben es durchsucht

In diesem Kapitel werden wir:

Entwicklungstools vorbereiten
Unser erstes Spiel erstellen – Ping Pong
Lernen Sie, die JQuery-JavaScript-Bibliothek für die grundlegende Positionierung zu verwenden
Erhalten Sie Tastatureingaben
Erstellen des Ping-Pong-Spiels mit Wertung

Der folgende Spiel-Screenshot ist das Ergebnis unserer Studie in diesem Kapitel. Es ist ein Tischtennisspiel, bei dem zwei Spieler über eine Tastatur gegeneinander antreten.

HTML5-Spieleentwicklung Beispiel für ein Ping-Pong-Spiel (1)

Also, beginnen wir jetzt mit der Entwicklung unseres Spiels.

Bereiten Sie die Entwicklungsumgebung vor

HTML5-Spieleentwicklung und Website-Entwicklung sind ähnlich. Wir benötigen einen Webbrowser und ein gutes Textbearbeitungstool.

Es gibt viele hervorragende Textbearbeitungstools. Verwenden Sie einfach das, das Ihnen gefällt. Wenn Sie noch keins haben, empfehle ich Ihnen die Verwendung von Notepad, einem kleinen und schnellen Bearbeitungstool. Was den Browser betrifft, benötigen wir einen Browser, der HTML5- und CSS3-Funktionen unterstützt und uns Debugging-Tools zur Verfügung stellen kann.

Es stehen mehrere Browser zur Auswahl: Apple Safari (http://apple.com/safari/), Google Chrome (http://www.google.com/chrome/), Mozilla Firefox (http ://mozilla.com/firefox/) und Opera (http://opera.com) unterstützen alle die von uns benötigten Funktionen.

VorbereitenHTMLDokumentation

Jede Website, Seite und Html5-Spiel wird aus dem erstellt Das Standard-HTML-Dokument wird gestartet. Und dieses HTML-Dokument beginnt mit grundlegendem HTML-Code. Wir werden auch unsere HTML5-Spieleentwicklung mit index.html beginnen.

Zeit zum Handeln

Wir werden unser HTML5-Ping-Pong-Spiel von Grund auf erstellen. Es hört sich so an, als müssten wir alles selbst vorbereiten, aber zum Glück können wir zumindest JavaScript-Bibliotheken als Hilfe nutzen. Jquery ist eine solche JavaScript-Bibliothek, die wir in allen Beispielen verwenden werden. Dies wird dazu beitragen, unsere JavaScript-Logik zu vereinfachen:

1. Erstellen Sie einen neuen Ordner namens pingpong

2. Erstellen Sie einen Ordner namens js im Ordner

3 >

4. Wählen Sie Produktion und klicken Sie auf DownloadJquery.

5. Speichern Sie jquery-1.7.1.min.js in unserem neu erstellten 2-Ordner

6 .html und speichern Sie es in dem in Schritt 1 erstellten Ordner.

7. Öffnen Sie die Datei index.html mit einem Texteditor und fügen Sie eine leere HTML-Vorlage ein:

Der Code lautet wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ping Pong</title>
</head>
<body>
<header>
<h1>Ping Pong</h1>
</header>
<footer>
This is an example of creating a Ping Pong Game.
</footer>
</body>
</html>

Nach dem Login kopieren

8. Verweisen Sie auf die jQuery-Datei

vor dem Body-End-Tag. Der Code lautet wie folgt:

<script src=&rdquo;js/jquery-1.7.1.min.js></script>

Nach dem Login kopieren

9 Wir müssen sicherstellen, dass JQuery erfolgreich geladen wird. Normalerweise platzieren wir die folgende Codeprüfung nach der JQuery-Datei vor dem Body-End-Tag:

Der Code lautet wie folgt:

<script>
$(function(){
alert(&ldquo;Welcome to the Ping Pong battle.&rdquo;);
});
</script>

Nach dem Login kopieren

10. Speichern Sie index.html und navigieren Sie mit, um es zu öffnen. Wir sollten das folgende Eingabeaufforderungsfenster sehen. Das bedeutet, dass unsere jQuery korrekt eingerichtet ist:

HTML5-Spieleentwicklung Beispiel für ein Ping-Pong-Spiel (1)

Was ist passiert?

Wir haben gerade eine einfache HTML5-Seite mit JQuery erstellt und sichergestellt, dass jQuery korrekt geladen wird.

Neuer HTML5-Doctype

DOCTYPE und Meta-Tags wurden in HTML5 vereinfacht

In Html4.01 haben wir erklärt, dass der Doctype den folgenden Code erfordert:

Der Code lautet wie folgt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Nach dem Login kopieren

Er ist ziemlich lang, oder? In HTML5 ist die Doctyp-Deklaration jedoch viel einfacher:

Der Code lautet wie folgt:

<!DOCTYPE html>

Nach dem Login kopieren

Wir deklarieren nicht einmal die HTML-Version, was bedeutet, dass HTML5 wird mit früheren HTML-Versionen kompatibel sein. Zukünftige HTML-Versionen werden auch die HTML5-Version unterstützen. Das

Meta-Tag wurde ebenfalls vereinfacht. Wir verwenden jetzt den folgenden Code, um den Zeichensatz von HTML zu definieren:

Der Code lautet wie folgt: