This article introduces H5 Canvas to achieve greedy snake games, share it with everyone, as follows:
The effect is as follows Implementation ideas:PS: This is just thinking. For details, you can look at code annotations
1. Draw the snake first <! Doctype html> <html Lang = EN> <Head> <meta charset = UTF-8> <Title> Document </title> <Style> #Canvas {Box-Shadow: 0 5px 40px Black;} </style> </head> <body> <canvas id = canvas width = 800 height = 500> </body> </body> <script> var canvas = document.GetelementByid ('canvas'); VAR Context = C. anvas.getContext (' 2d '); // Construct object block funch (x, y, w, h, color) {this.x = x; this.y = y; this.w = w; this.h = h; this.color = COLOR;} // The method of drawing a block rect.prototype.draw = function () {context.beginpath (); context.fillStyle = This.Color; Context.Rect (this.x, this.y, this. W, this.h); context.fill (); context.Stroke ();} // Constructing object snake function snake () {// Define a blocking array storage to form a snake block object var snakearray = []; // Draw Four square blocks, set to gray for (var I = 0; i <4; i ++) {var Rect = New RECT (i*20,0,20,20, Gray); // Add) instead of using push (plus later) to make the snake head appear at the first position of the array SnakeArray.splice (0,0, Rect);} // head = Snakearray [0]; head.color = red; // Here the things that are commonly used after two are set as attributes, so that the later call this.head = snakearray [0]; // snake head This.snakearray = Snakearray; / /Snake array // Given the initial position to the right (with keycode right arrow) this.direction = 39;} // The method of painting snake snake.prototype.draw = function () {for (var I = 0; i < this.snakearray.length; i ++) {this.snakearray [i] .draw ();} // The method of snake movement snake.prototype.move = function () {// This is the core part, the snake's movement method // 1. Draw a gray square, overlap the position with the snake head // 2. Insert this block to the position behind the snake head in the array // 3. Cut off the end of the end // 4. Move the snake head in the direction of the setting direction. One grid var Rect = New RECT (this.head.x, this.head.y, this.head.w, this.head.h, gray); this.snakeArray.splice (1,0, RECT); // Determine whether to eat food, the ISEAT determination function is written at the end // When you eat it, the food will be given the position again. If the snake becomes longer // Change if (iSeat ()) {Food = New getrandomfood ();} else {this.snakearray.pop ();} // Set the movement direction of the snake head, 37 left, 38, 39 right, 40 stitch (this. Direction) {case 37: this.head.x- = this.head.w break; case 38: this.head.y- = this.head.h break; case 39: this.head.x += this.Head .w break; case 40: this.head.y += this.head.h break; default: break;} // Gameover judgment // hit the wall if (this.head.x> canvas.width || This.head. x <0 || This.head.y> Canvas.Height || This.Head.y <0) {Clearinterval (Timer);} // Bang yourself, the cycle starts from 1, avoid the comparison of the snake head and the snake head for for. (var I = 1; I <THIS.SNAKEARAY.LENGTH; I ++) {if (this.snakearray [i] .x == This.head.x &&SNakeArray [i] .y == this.Head.yy ) {Clearinterval (Timer);}}} // Draw the initial snake Var Snake = New Snake () Snake.draw (); // Draw the initial food var Food = new getrandomfood () // timer Var Timer = SetInterval (function () {context.clearrect (0,0, canvas.width, canvas.head); food.draw (); snake.move (); snake.draw ();}, 100) // keyboard event events The IF determination is to make the snake unable to directly turn to the document.onkeydown = function (e) {var EV = E || Window.event; Switch (EV.KeyCode) {case 37: {if (snake.direction! == 39) {snake.direction = 37;} Break;} case 38: {if (snake.direction! == 40) {snake.direction = 38;} BREAK;} case 39: {if.direction! == 37) {snake.direction = 39;} Break;} case 40: {if (snake.direction! == 38) {snake.direction = 40;} bream; Function , Get the value of [min, max] range (min, max) {var range = max-min; var r = math.random (); return math.round (R*Range+min)} // Construct food Object function getrandomfood () {// determine whether the food appears on the snake. If it is heavy, then re -generate the varitativesnake = true; // Set the random location of food (IsonsNake) {// The determination conditions will be determined first after execution. Set as false. If the judgment does not coincide, the following statements will not execute the following statements issnake = false; var indexx = getnumberinrange (0, canvas.width/20-1); T/20-1 ); VAR Rect = New RECT (Indexx*20, Indexy*20, 20, 20, Green); for (var I = 0; I <Snake.snakearray.length; I ++) {if (SNAKE.SNAKEARAY [i]. x == RECT.X && SNAKE.SNAKEARAY [i] .y == Rect.y) {// If the determination is re -coealed, set it to true, so that the random number is re -to IsonsNake = true; break;}} // Return to RECT, so that the instantiated object Food has a DRAW method RETURN RECT;} // determines that eating food, that is, the snake head coordinates and food coordinates of the function is () {if (snake.head.x == Food.x && SNAKE.. head.y == Food.y) {Return True;} else {Return false;} </script> </html>The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.