How to use HTML5 to realize the Snake Game
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.
