HTML5 Snake Game Implementation ideas and source code

Source: Internet
Author: User

Comments: The difficulty of the game is to simulate the movement of snakes. If it is just a square, it is obviously very simple. But how to control the length of a snake when it grows? The following describes how to implement it. If you are interested, refer to it and hope to help you.
Game operation instructions

The arrow keys are used to control the movement of the snake between the top, bottom, and left. After a snake eats food, the length will grow.

Specific game implementation

The difficulty of the game is to simulate the movement of snakes. If it is just a square, it is obviously very simple. But how can we control the length of a snake?

What about the movement of each square?

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

. So what we need to do is to control the movements of the snake's head. The positions of other parts can be same.

Another noteworthy issue is:

Where should the newly added square be placed after a snake eats food.

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

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

Then, the positions of all blocks except the newly added blocks are updated at the current time.

Index.html
 
Snake. js

The Code is as follows:
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; I --)
{
If (I> 0)
// Snake [I]. direction = snake [I-1]. 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, 0 ";
Ctx. strokeRect (box_x, box_y, box_width, box_height );
// Detection collisions
// Draw images
For (var I = 0; I <snake. length; I ++)
{
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 ('keylow', play, false );
AddFood ();
SetInterval (update, 300); // note
SetInterval (drawScene, 30 );
}

Related reading: html5 snake games are perfectly implemented using 63 lines of code

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.