主頁(yè) > 知識(shí)庫(kù) > HTML5 貪吃蛇游戲?qū)崿F(xiàn)思路及源代碼

HTML5 貪吃蛇游戲?qū)崿F(xiàn)思路及源代碼

熱門標(biāo)簽:怎么做百度地圖標(biāo)注 小朱地圖標(biāo)注 百度地圖標(biāo)注為什么總是封號(hào) 400開(kāi)頭的電話好申請(qǐng)不 咸陽(yáng)穩(wěn)定外呼系統(tǒng)軟件 智能芯電話機(jī)器人 四川移動(dòng)電銷外呼客戶管理系統(tǒng) 臨海地圖標(biāo)注app 地圖標(biāo)注柱狀圖
 
游戲操作說(shuō)明

通過(guò)方向鍵控制貪吃蛇上下左右移動(dòng)。貪吃蛇吃到食物之后會(huì)變長(zhǎng)一個(gè)長(zhǎng)度。

游戲具體實(shí)現(xiàn)

游戲難點(diǎn)是怎么模擬貪吃蛇的移動(dòng)。如果只是一個(gè)方塊的話顯然很簡(jiǎn)單。但是當(dāng)蛇的長(zhǎng)度變長(zhǎng)之后要怎么樣控制

每個(gè)方塊的移動(dòng)呢?

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

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

另外一個(gè)值得注意的問(wèn)題是

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

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

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

然后在當(dāng)前時(shí)刻更新出了新增方塊之外的所有方塊的位置

index.html
 
snake.js

復(fù)制代碼
代碼如下:

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貪吃蛇游戲使用63行代碼完美實(shí)現(xiàn)

標(biāo)簽:陜西 黃石 黃石 公主嶺 南平 平頂山 山南

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《HTML5 貪吃蛇游戲?qū)崿F(xiàn)思路及源代碼》,本文關(guān)鍵詞  HTML5,貪吃,蛇,游戲,實(shí)現(xiàn),;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《HTML5 貪吃蛇游戲?qū)崿F(xiàn)思路及源代碼》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于HTML5 貪吃蛇游戲?qū)崿F(xiàn)思路及源代碼的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章