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


Posted in HTML / CSS onSeptember 03, 2013

HTML5 贪吃蛇游戏实现思路及源代码 
游戏操作说明

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

游戏具体实现

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

每个方块的移动呢?

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

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

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

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

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

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

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

index.html
HTML5 贪吃蛇游戏实现思路及源代码 
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);
}

相关阅读:html5贪吃蛇游戏使用63行代码完美实现
HTML / CSS 相关文章推荐
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
css3中transition属性详解
Sep 02 HTML / CSS
HTML5移动开发图片压缩上传功能
Nov 09 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
Jan 11 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
May 15 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
Sep 02 #HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
Sep 02 #HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 #HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 #HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
Aug 23 #HTML / CSS
html5基础教程常用技巧整理
Aug 20 #HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 #HTML / CSS
You might like
PHP 日志缩略名的创建函数代码
2010/05/26 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
php array_map()函数实例用法
2021/03/03 PHP
js 幻灯片的实现
2011/12/06 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
2016/09/05 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
python实现巡检系统(solaris)示例
2014/04/02 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
在django中自定义字段Field详解
2019/12/03 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
测试工程师职业规划书
2014/02/06 职场文书
家长寄语大全
2014/04/02 职场文书
公共场所禁烟标语
2014/06/25 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
经典祝酒词大全
2015/08/12 职场文书
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技