如何使用HTML5實現(xiàn)貪吃蛇游戲

這篇文章將為大家詳細講解有關(guān)如何使用HTML5實現(xiàn)貪吃蛇游戲，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

游戲操作說明

通過方向鍵控制貪吃蛇上下左右移動。貪吃蛇吃到食物之后會變長一個長度。

游戲具體實現(xiàn)

游戲難點是怎么模擬貪吃蛇的移動。如果只是一個方塊的話顯然很簡單。但是當蛇的長度變長之后要怎么樣控制

每個方塊的移動呢？

如果觀察蛇的移動，可以發(fā)現(xiàn)，從蛇的頭部到尾部，每個方塊在下一時刻的位置就是它的前一個方塊在當前時刻

的位置。因此我們需要做的只是控制貪吃蛇的頭部的運動。其他部分的位置都可以依次類推。

另外一個值得注意的問題是

貪吃蛇吃下食物之后，新增加的方塊應(yīng)該放在哪個位置。

答案就是在下一時刻，新增加的方塊應(yīng)該出現(xiàn)在當前時刻的尾部位置。

因此，在吃下食物之后應(yīng)該在更新蛇的每個位置之前，增加一個方塊，并且將其位置設(shè)定在當前時刻的尾部位置。

然后在當前時刻更新出了新增方塊之外的所有方塊的位置

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; 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,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, unit, unit, 5, 0, 1, image_sprite, true);

snake.push(head);

window.addEventListener('keydown', play, false);

addFood();

setInterval(update, 300); //note

setInterval(drawScene, 30);

}

關(guān)于“如何使用HTML5實現(xiàn)貪吃蛇游戲”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。