Kommentar: Es ist ein Ping-Pong-Spiel mit 2 Spielern, die einen Tastaturwettbewerb verwenden. In diesem Kapitel werden wir: 1. Erstellen Sie das Entwicklungstool 2. Erstellen Sie unser erstes Spiel - Ping Pong 3.. Lernen Sie, die Jquery JavaScript -Bibliothek für die grundlegende Positionierung zu verwenden.
In diesem Kapitel werden wir:
Entwicklungswerkzeuge vorbereiten
Bauen Sie unser erstes Spiel auf - Ping -Pong
Lernen Sie, die Jquery JavaScript -Bibliothek für die grundlegende Positionierung zu verwenden
Holen Sie sich die Tastatureingabe
Erstellen des Ping -Pong -Spiels mit Treffern
Die folgenden Screenshots des Spiels sind die Ergebnisse unserer Studie in diesem Kapitel. Es ist ein Ping -Pong -Spiel mit 2 Spielern, die auf einer Tastatur spielen.
Beginnen wir jetzt mit dem Erstellen unseres Spiels.
Bereiten Sie sich auf die Entwicklungsumgebung vor
HTML5 -Spielentwicklung und Website -Entwicklung sind ähnlich. Wir brauchen einen Webbrowser und ein ausgezeichnetes Textbearbeitungstool.
Viele Textbearbeitungswerkzeuge sind ausgezeichnet. Verwenden Sie einfach das, was Sie mögen. Wenn Sie keine haben, empfehle ich Ihnen, Notepad ++, ein kleines und schnelles Bearbeitungstool, zu verwenden. In Bezug auf Browser benötigen wir einen Browser, der HTML5-, CSS3 -Funktionen unterstützt und mit Debugging -Tools versorgt werden kann.
Es stehen mehrere Browser zur Auswahl: Apple Safari (), Google Chrome (), Mozilla Firefox () und Opera (), die alle die benötigten Funktionen unterstützen.
Bereiten Sie HTML -Dokumente vor
Jede Website, Seite, Seite und HTML5 -Spiel beginnt mit dem Standard -HTML -Dokument. Und dieses HTML -Dokument beginnt mit dem grundlegenden HTML -Code. Wir werden auch unsere HTML5 -Spielentwicklung mit Index.html starten.
Aktionszeit
Wir werden unser HTML5 -Ping -Pong -Spiel von Grund auf neu erstellen. Es hört sich so an, als müssten wir alles selbst vorbereiten, und zumindest konnten wir uns bei der JavaScript -Bibliothek helfen. JQuery ist eine solche JavaScript -Bibliothek, die wir in all unseren Beispielen verwenden werden. Dies wird dazu beitragen, unsere JavaScript -Logik zu vereinfachen:
1. Erstellen Sie einen neuen Ordner namens PingPong
2. Erstellen Sie einen anderen Ordner namens JS im Ordner
3. Laden Sie JQuery herunter.
4. Wählen Sie Produktion aus und klicken Sie auf DownloadJQuery.
5. Speichern Sie jQuery-1.7.1.min.js im Ordner, den wir erstellt 2
6. Erstellen Sie eine neue Datei mit dem Namen index.html und speichern Sie sie in dem von 1 erstellten Ordner.
7. Öffnen Sie die Datei index.html mit einem Texteditor und fügen Sie eine leere HTML -Vorlage ein:
<! DocType html>
<html lang = "en">
<kopf>
<meta charset = "utf-8">
<title> ping pong </title>
</head>
<body>
<Header>
<h1> Ping -Pong </h1>
</header>
<fouter>
Dies ist ein Beispiel für das Erstellen eines Ping -Pong -Spiels.
</footer>
</body>
</html>
8. Siehe JQuery -Datei vor dem Body End -Tag
<script src = js/jQuery-1.7.1.min.js> </script>
9. Schließlich möchten wir sicherstellen, dass JQuery erfolgreich geladen wird. Normalerweise platzieren wir den folgenden Code, um nach der Jquery -Datei vor dem Body End -Tag zu überprüfen:
<Script>
$ (function () {
Alarm (Willkommen im Ping -Pong -Kampf.);
});
</script>
10. Speichern index.html und öffnen Sie es mit Ihrem Browser. Wir sollten das folgende Eingabeaufforderungfenster sehen. Dies bedeutet, dass unsere jQuery korrekt eingestellt ist:
was ist passiert?
Wir haben gerade eine grundlegende HTML5 -Seite mit JQuery erstellt und dafür gesorgt, dass JQuery richtig geladen ist.
NEU HTML5 DOCTYPE
Sowohl docType- als auch Meta -Tags sind in HTML5 vereinfacht.
In HTML4.01 erklären wir, dass docType den folgenden Code erfordert:
<! DocType html public "-// w3c // dtd html 4.01 // en" "http://www.w3.org/tr/html4/strict.dtd">
Es ist lang, oder? In HTML5 ist die DOCTYP -Erklärung jedoch viel einfacher:
<! DocType html>
Wir haben die HTML -Version noch nicht einmal deklariert, was bedeutet, dass HTML5 mit früheren HTML -Versionen kompatibel sein wird und zukünftige HTML -Versionen auch HTML5 -Versionen unterstützen werden.
Meta -Tags wurden ebenfalls vereinfacht. Wir verwenden jetzt den folgenden Code, um den HTML -Zeichensatz zu definieren:
<meta charset = utf-8>