Cet article présente H5 Canvas pour réaliser des jeux de serpents gourmands, le partager avec tout le monde, comme suit:
L'effet est le suivant Idées de mise en œuvre:PS: c'est juste une pensée.
1. Dessinez d'abord le serpent <! </ head> <body> <canvas id = canvas width = 800 height = 500> </ body> </ body> <script> var canvas = document.getElementByid ('canvas'); (2d '); Color = Color;} // La méthode de dessiner un bloc rect.prototype.Draw = function () {context.beginPath (); . // dessine quatre blocs carrés, réglés sur gris pour (var i = 0; i <4; i ++) {var rect = nouveau recult (i * 20,0,20,20, gris); de l'utilisation de push (plus plus tard) pour faire apparaître la tête de serpent à la première position du tableau SnakeArray.splice (0,0, rect);} // head = snakeArray [0]; Les choses qui sont couramment utilisées après deux sont définies comme des attributs, de sorte que le dernier appelle ceci.head = snakeArray [0]; (avec la flèche droite de Keycode) this.direction = 39;} // la méthode de peinture Snake Snake.prototype.Draw = function () {for (var i = 0; i <this.snakeArray.length; i ++) { this.snakeArray [i] .Draw ();} // la méthode de mouvement de serpent Snake.prototype.move = function () {// c'est la partie centrale, la méthode de mouvement du serpent // 1. Dessiner un carré gris, chevauchez la position avec la tête de serpent // 2. Insérez ce bloc à la position derrière la tête de serpent dans le réseau // 3. Coupez l'extrémité de l'extrémité // 4. Déplacez la tête de serpent dans la direction de la direction de réglage La grille var rect = nect (this.head.x, this.head.y, this.head.w, this.head.h, gris); / Déterminez s'il faut manger de la nourriture, la fonction de détermination ISEAT est écrite à la fin // Lorsque vous la mangez, la nourriture aura à nouveau la position. getrandomfood ();} else {this.snakearray.pop ();} // définit la direction de mouvement de la tête de serpent, 37 à gauche, 38, 39 à droite, 40 point (cette. Direction) {cas 37: this.head. x- = this.head.w Break; Cas 38: this.head.y- = this.head.h Break; .y + = this.head.h Break; par défaut: Break;} // GameOver Jugement // a appuyé sur le mur if (this.head.x> canvas.width || this.head. x <0 || this.head .Y> Canvas.Height || I = 1; i <this.snakearay.length; i ++) {if (this.snakearray [i] .x == (Temporisateur);}}} // dessiner le serpent initial var snake = new Snake () Snake.Draw (); {context.classent (0,0, canvas.width, canvas.head); Food.Draw (); Rendre le serpent incapable de se tourner directement vers le document.onkeydown = fonction (e) {var ev = e || window.event; Snake.Direction = 37;} Break;} Cas 38: {if (Snake.Direction! == 40) {Snake.Direction = 38;} Break;} Case 39: {if.direction! Direction = 39;} Break;} Cas 40: {if (Snake.Direction! == 38) {Snake.Direction = 40;} Bream; var range = max-min; var r = math.random (); Il est lourd, puis réintégre les varitatifs de nœuds = / / // définit l'emplacement aléatoire de la nourriture (IsonsNake) {// Les conditions de détermination seront déterminées en premier après l'exécution. Les instructions ne seront pas exécutées les instructions suivantes ISSNAKE = FAUX; 20, 20, vert); y == rect.y) {// Si la détermination est re-corée, définissez-le sur true, de sorte que le nombre aléatoire est re -to IsonsNake = true; L'objet alimentaire a une méthode de tirage de retour recul;} // détermine que la consommation de nourriture, c'est-à-dire les coordonnées de la tête de serpent et les coordonnées alimentaires de la fonction est () {if (snake.head.x == aliments.x && serpent .. head.y == aliments.y) {return true;} else {return false;} </cript> </html>Ce qui précède est tout le contenu de cet article.