HTML5 贪吃蛇游戏实现思路及源代码

2016-02-19 10:19 52 1 收藏

今天图老师小编要跟大家分享HTML5 贪吃蛇游戏实现思路及源代码,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

【 tulaoshi.com - Web开发 】

 
游戏操作说明

通过方向键控制贪吃蛇上下左右移动。贪吃蛇吃到食物之后会变长一个长度。

游戏具体实现

游戏难点是怎么模拟贪吃蛇的移动。如果只是一个方块的话显然很简单。但是当蛇的长度变长之后要怎么样控制

每个方块的移动呢?

如果观察蛇的移动,可以发现,从蛇的头部到尾部,每个方块在下一时刻的位置就是它的前一个方块在当前时刻

的位置。因此我们需要做的只是控制贪吃蛇的头部的运动。其他部分的位置都可以依次类推。

另外一个值得注意的问题是

贪吃蛇吃下食物之后,新增加的方块应该放在哪个位置。

答案就是在下一时刻,新增加的方块应该出现在当前时刻的尾部位置。

因此,在吃下食物之后应该在更新蛇的每个位置之前,增加一个方块,并且将其位置设定在当前时刻的尾部位置。

然后在当前时刻更新出了新增方块之外的所有方块的位置

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);
}

来源:https://www.tulaoshi.com/n/20160219/1594185.html

延伸阅读
标签: Web开发
WebRTC可能是明年最受关注的HTML5标准了,Mozilla为此开发了一套帮助你控制硬件的API,例如,摄像头,麦克风,或者是加速表。你可以不依赖其它的插件来调用你需要的本机硬件设备。 在今天的这篇文章中,我们将介绍来自Wolfram Hempel开发的Photobooth.js,使用这个类库可以帮助你快速的调用摄像头功能,你可以很容易的添加摄像头功能到网站...
标签: Web开发
今天我突发其想,想到可以用Html5来仿照苹果操作系统做一个能在Web平台运行的ios。 当然,要开发出一个操作系统,等我再归山修练一百年再说吧。今天就先娱乐一下,先搞一个开机界面。 完工后的图片:   担心图片是被我PS后的同学可以直接进入下面的地址测试: http://www.cnblogs.com/yorhom/articles/3163078.html 由于lufylegend封...
标签: Web开发
这里我们是结合Asp.net MVC做为服务端,您也可以是其它的服务端语言。让我们看面这个片断的HTML: 复制代码代码如下: @using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" , id="form1"})) { div class="row" label for="file" Upload Image:/label input type="file" name="fileToUploa...
标签: Web开发
  代码如下: html head meta charset=utf-8 title跳跳球/title script //box var box_x=0; var box_y=0; var box_width=300; var box_height=300; //注意:定位球采用球的中心 var ball_x=10; var ball_y=10; var ball_radius=10; var ball_vx=5; var ball_vy=3; var box_bound_left=box_x+ball_radius; var box_boun...
标签: Web开发
复制代码代码如下: document.createElement('header'); document.createElement('nav'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('footer'); 复制代码代码如下: !DOCTYPE HTML html h...

经验教程

584

收藏

64
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部