J'ai déjà regardé quelques épisodes de vidéos Canvas sur MOOC et j'ai toujours voulu m'entraîner à écrire quelque chose. Je pense que Snake est relativement simple. Quand j'étais à l'université, j'ai aussi écrit une version de caractères du langage C. De façon inattendue, j'ai encore rencontré de nombreux problèmes.
L'effet final est le suivant (si l'image est trop grande, cela prendra trop de temps. Le logiciel d'enregistrement gif a une limite de temps...)
Commencez par définir la zone de jeu. Il n'y a que deux éléments sur l'écran de Snake : le corps du serpent et la pomme, et les deux peuvent être composés de grilles carrées. Ajoutez des espaces entre les carrés. Pourquoi ajouter des lacunes ? Vous pouvez imaginer que lorsque vous aurez réussi à remplir toutes les grilles, s'il n'y a pas d'espace, ce sera un grand carré solide... Vous n'avez aucune idée à quoi ressemble le corps du serpent.
Dessinez une image.
Les coordonnées du coin supérieur gauche de la grille sont (0, 0), l'abscisse augmente vers la droite et l'ordonnée augmente vers le bas. Cette direction est la même que celle de Canvas.
Chaque fois que nous dessinons une grille, nous devons commencer par le coin supérieur gauche. Nous savons toujours que les coordonnées du coin supérieur gauche de Canvas sont (0, 0) en supposant que la longueur du côté de la grille est GRID_WIDTH et la largeur. de l'écart est GAP_WIDTH, nous pouvons obtenir le (i, j)ième Les coordonnées du coin supérieur gauche de la grille (i*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH, j*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH) .
Supposons que le corps du serpent soit composé de trois grilles bleues. Nous ne pouvons pas simplement dessiner trois grilles, mais aussi deux espaces violets, sinon, comme mentionné précédemment, vous ne saurez pas à quoi ressemble le corps du serpent. Comme le montre l'image ci-dessous, même si le jeu peut être joué sans laisser d'espace, l'expérience sera certainement différente.
Dessinez des espaces entre les grilles adjacentes sans dessiner d'espaces
Nous pouvons maintenant essayer de dessiner un serpent. Le corps du serpent est en fait un ensemble de grilles. Chaque grille est représentée par un tableau contenant deux informations de position. Le serpent entier peut être représenté par un tableau bidimensionnel.
<!DOCTYPE html><html lang=fr><head> <meta charset=UTF-8> <title>blog_snack</title> <style> #canvas { background-color: #000 } </style></ head><body> <canvas id=canvas></canvas> <script> const GRID_WIDTH = 10; // La longueur du côté de la grille const GAP_WIDTH = 2; // La longueur du côté de l'espace const ROW = 10; // Combien de lignes de grilles y a-t-il au total et combien de grilles y a-t-il dans chaque ligne let canvas = document.getElementById('canvas'); = GRID_WIDTH * ROW + GAP_WIDTH * (ROW + 1); toile.width = GRID_WIDTH * ROW + GAP_WIDTH * (ROW + 1); = canvas.getContext('2d'); laissez snack = [ [2, 3], [2, 4], [2, 5], [3, 5], [4, 5], [4, 4], [5, 4], [5, 5] ]; // Initialiser un