Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use HTML5 to achieve the gluttonous Snake game. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Game operation instructions

Through the key control gluttonous snake up and down to move around. The gluttonous snake will grow one length after eating the food.

The concrete realization of the game

The difficulty of the game is how to simulate the movement of the gluttonous snake. It's obviously simple if it's just a square. But how to control when the length of the snake becomes longer

What about the movement of each square?

If you observe the movement of the snake, you can find that from the head to the tail of the snake, the position of each square at the next moment is its previous square at the current moment.

The location of. So all we need to do is control the movement of the head of the gluttonous snake. The positions of other parts can be analogous in turn.

Another problem worth noting is that

After the gluttonous snake eats the food, where should the newly added square be placed?

The answer is that at the next moment, the newly added square should appear at the end of the current moment.

Therefore, after eating the food, you should add a square before updating each position of the snake, and set its position at the tail position of the current time.

Then update the location of all squares except the new box at the current moment.

Index.html

Snake.js

Var canvas

Var ctx

Var timer

/ / measures

Var x_cnt = 15

Var y_cnt = 15

Var unit = 48

Var box_x = 0

Var box_y = 0

Var box_width = 15 * unit

Var box_height = 15 * unit

Var bound_left = box_x

Var bound_right = box_x + box_width

Var bound_up = box_y

Var bound_down = box_y + box_height

/ / images

Var image_sprite

/ / objects

Var snake

Var food

Var food_x

Var food_y

/ / functions

Function Role (sx, sy, sw, sh, direction, status, speed, image, flag)

{

This.x = sx

This.y = sy

This.w = sw

This.h = sh

This.direction = direction

This.status = status

This.speed = speed

This.image = image

This.flag = flag

}

Function transfer (keyCode)

{

Switch (keyCode)

{

Case 37:

Return 1

Case 38:

Return 3

Case 39:

Return 2

Case 40:

Return 0

}

}

Function addFood ()

{

/ / food_x=box_x+Math.floor (Math.random () * (box_width-unit))

/ / food_y=box_y+Math.floor (Math.random () * (box_height-unit))

Food_x = unit * Math.floor (Math.random () * x_cnt)

Food_y = unit * Math.floor (Math.random () * y_cnt)

Food = new Role (food_x, food_y, unit, unit, 0,0,0, image_sprite, true)

}

Function play (event)

{

Var keyCode

If (event = = null)

{

KeyCode = window.event.keyCode

Window.event.preventDefault ()

}

Else

{

KeyCode = event.keyCode

Event.preventDefault ()

}

Var cur_direction = transfer (keyCode)

Snake [0] .direction = cur_direction

}

Function update ()

{

/ / add a new part to the snake before move the snake

If (snake [0] .x = = food.x & & snake [0] .y = = food.y)

{

Var length = snake.length

Var tail_x = snake [length-1] .x

Var tail_y = snake [length-1] .y

Var tail = new Role (tail_x, tail_y, unit, unit, snake [length-1] .direction, 0,0, image_sprite, true)

Snake.push (tail)

AddFood ()

}

/ / modify attributes

/ / move the head

Switch (snake [0] .direction)

{

Case 0: / / down

Snake [0] .y + = unit

If (snake [0] .y > bound_down-unit)

Snake [0] .y = bound_down-unit

Break

Case 1: / / left

Snake [0] .x-= unit

If (snake [0] .x

< bound_left) snake[0].x = bound_left; break; case 2: //right snake[0].x += unit; if (snake[0].x >

Bound_right-unit)

Snake [0] .x = bound_right-unit

Break

Case 3: / / up

Snake [0] .y-= unit

If (snake [0] .y

< bound_up) snake[0].y = bound_up; break; } //move other part of the snake for (var i = snake.length - 1; i >

= 0; iMub -)

{

If (I > 0)

/ / snake [I] .direction= snake.direction

{

Snake [I] .x = snake [I-1] .x

Snake [I] .y = snake [I-1] .y

}

}

}

Function drawScene ()

{

Ctx.clearRect (box_x, box_y, box_width, box_height)

Ctx.strokeStyle = "rgb (0.0j0pj0pl 0")

Ctx.strokeRect (box_x, box_y, box_width, box_height)

/ / detection collisions

/ / draw images

For (var I = 0; I < snake.length; iTunes +)

{

Ctx.drawImage (image_sprite, snake [I] .x, snake [I] .y)

}

Ctx.drawImage (image_sprite, food.x, food.y)

}

Function init ()

{

Canvas = document.getElementById ("scene")

Ctx = canvas.getContext ('2d')

/ / images

Image_sprite = new Image ()

Image_sprite.src = "images/sprite.png"

Image_sprite.onLoad = function ()

{}

/ / ojects

Snake = new Array ()

Var head = new Role (0 * unit, 0 * unit, 5,0,1, image_sprite, true)

Snake.push (head)

Window.addEventListener ('keydown', play, false)

AddFood ()

SetInterval (update, 300); / / note

SetInterval (drawScene, 30)

}

This is the end of this article on "how to use HTML5 to achieve the Snake Game". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.