Développement de jeux HTML5 Exemple de jeu de ping-pong (3) Compétences du didacticiel _html5

Introduction à jQuery
[Je ne détaillerai pas cette partie, il y en a beaucoup sur Internet. Si vous ne comprenez rien, contactez-moi s'il vous plaît]
Utilisez jQuery pour faire fonctionner les éléments du jeu
Nous avons initialisé la raquette avec jQuery. Faisons maintenant une expérience sur la façon d'utiliser jQuery pour placer des éléments de jeu.
Déplacez-le - utilisez jQuery pour modifier la position des éléments
Utilisons l'arrière-plan de la grille pour vérifier la position des éléments dans notre jeu  :
1 Continuons à utiliser l'exemple PingPong. .
2. Téléchargez l'image d'arrière-plan de la grille dont nous avons besoin ici.
3. Créez un dossier nommé images dans le répertoire des exercices.
4. Placez les images téléchargées dans le dossier jimages. Cette image nous aidera plus tard à vérifier le déplacement des pixels.
5. Ensuite, ouvrez index.html dans l'éditeur
6. Modifiez l'attribut d'arrière-plan du DIV du terrain de jeu comme suit pour qu'il contienne une image de grille de pixels.

Copier le code

Le code est le suivant :

#playground{
arrière-plan : # e0ffe0 url(images/pixel_grid.jpg);
largeur : 400px;
hauteur : 200px;
position : relative
débordement : caché
}

7. Maintenant, ouvrez index.html dans le navigateur, ce que nous devrions voir est la capture d'écran suivante : une grille se superpose sur l'arrière-plan du jeu, et nous pouvons maintenant voir les positions de tous les éléments

Que s'est-il passé ?
Pour faciliter le débogage, nous avons placé une image appelée pixel_grid.jpg en arrière-plan. Cette image comporte de nombreuses petites grilles, chaque grille de 10 x 10 formant un grand bloc de 100 x 100 pixels. Avec cette image, nous disposons d’une règle qui nous permet de mesurer la position des éléments sur l’écran.