HTML5-Spieleentwicklung Beispiel für ein Ping-Pong-Spiel (3)_HTML5-Tutorial-Fähigkeiten

Einführung in jQuery
[Ich werde diesen Teil nicht durchgehen, es gibt viele davon im Internet. Wenn Sie etwas nicht verstehen, kontaktieren Sie mich bitte]
Verwenden Sie jQuery, um Spielelemente zu bedienen
Wir haben den Schläger mit jQuery initialisiert. Lassen Sie uns nun ein Experiment durchführen, wie Sie mit jQuery Spielelemente platzieren.
Bewegen Sie es – verwenden Sie jQuery, um die Position von Elementen zu ändern
Lassen Sie uns den Rasterhintergrund verwenden, um die Position von Elementen in unserem Spiel zu überprüfen :
1. Lassen Sie uns weiterhin das PingPong-Beispiel verwenden .
2. Laden Sie das benötigte Raster-Hintergrundbild hier herunter.
3. Erstellen Sie einen Ordner mit dem Namen „images“ im Übungsverzeichnis.
4. Platzieren Sie die heruntergeladenen Bilder im jimages-Ordner. Dieses Bild hilft uns später, die Pixelverschiebung zu überprüfen.
5. Öffnen Sie als Nächstes index.html im Editor.
6 Ändern Sie das Hintergrundattribut des Spielplatz-DIV wie folgt.

Code kopieren

Der Code lautet wie folgt:

#playground{
Hintergrund: # e0ffe0 url(images/pixel_grid.jpg);
Höhe: 200px;
Überlauf: versteckt; >
7. Öffnen Sie nun index.html im Browser. Wir sollten den folgenden Screenshot sehen: Ein Raster wird über den Spielhintergrund gelegt und wir können jetzt die Positionen aller Elemente sehen

Was ist passiert?

Um das Debuggen zu erleichtern, haben wir ein Bild namens pixel_grid.jpg im Hintergrund platziert. Dieses Bild hat viele kleine Gitter, wobei jedes 10x10-Gitter einen großen 100x100-Pixel-Block bildet. Mit diesem Bild verfügen wir über ein Lineal, mit dem wir die Position von Elementen auf dem Bildschirm messen können.