Este artículo presenta el lienzo H5 para lograr juegos de serpientes codiciosos, compartirlo con todos, de la siguiente manera:
El efecto es el siguiente Ideas de implementación:PD: Esto es solo pensar.
1. Dibuja la serpiente primero <! </head> <body> <Canvas id = Canvas width = 800 Height = 500> </body> </body> <script> var canvas = document.getElementById ('Canvas'); ('2d'); color = color;} // El método de dibujar un bloque rect.prototype.draw = function () {context.beginpath (); . W, this.h); // Dibuja cuatro bloques cuadrados, establecido en gris para (var i = 0; i <4; i ++) {var rect = new rect (i*20,0,20,20, gris); de usar empuje (más más tarde) para hacer que la cabeza de la serpiente aparezca en la primera posición de la matriz Snakearray. Las cosas que se usan comúnmente después de dos se establecen como atributos, de modo que el posterior llame a esto. (con la flecha derecha del código de teclas) this.Direction = 39;} // El método de pintar serpiente serpiente.prototype.draw = function () {for (var i = 0; i <this.snakearray.length; i ++) { this.snakearray [i] .draw ();} // El método del movimiento de serpiente Snake.prototype.move = function () {// Esta es la parte central, el método de movimiento de la serpiente // 1. Dibuja un cuadrado gris, superponga la posición con la cabeza de la serpiente // 2. Inserte este bloque a la posición detrás de la cabeza de la serpiente en la matriz // 3. Corta el extremo del extremo // 4. Mueva la cabeza de la serpiente en la dirección de la dirección de ajuste . / Determinar si comer alimentos, la función de determinación ISEAT está escrita al final // cuando lo come, la comida se le dará la posición nuevamente. getRandomfood ();} else {this.snakearray.pop ();} // Establezca la dirección de movimiento de la cabeza de serpiente, 37 izquierda, 38, 39 derecha, 40 puntadas (esta. Dirección) {Caso 37: this.head. X- = this.head.w Break 38: this.head.y- = this.head.h Break; .y += this.head.h break; .y> Canvas.Height || I = 1; (Temporizador);}}} // Dibuja la serpiente de serpiente inicial serpeta = new Snake () Snake.Draw (); {context.cLearrect (0,0, Canvas.Width, Canvas.head); Haga que la serpiente no pueda girar directamente al documento.onkeydown = function (e) {var ev = e || snake.direction = 37;} break;} caso 38: {if (Snake.Direction! == 40) {Snake.Direction = 38;} Break;} Caso 39: {if.direction! dirección = 39;} break;} caso 40: {if (Snake.Direction! == 38) {Snake.Direction = 40;} Función; var range = max-min; Es pesado, luego reincule la Varitatesnke = True; Las declaraciones no ejecutarán las siguientes afirmaciones issnake = false; 20, 20, verde); y == rect.y) {// Si la determinación se vuelve a hacer, configúrela a verdaderas, de modo que el número aleatorio sea re -to isonsnake = true;}} // volver a rect, de modo que las instanciarias El alimento del objeto tiene un método de dibujo de retorno rect;} // Determina que comer alimentos, es decir, las coordenadas de cabeza de serpiente y las coordenadas de alimentos de la función son () {if (snake.head.x == food.x && serpiente .. head.y == food.y) {return true;} else {return false;} </script> </html>Lo anterior es todo el contenido de este artículo.