- 1、本文档共5页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
HTML5 贪吃蛇游戏实现思路及源代码
通过方向键控制贪吃蛇上下左右移动。贪吃蛇吃到食物之后会变长一个长度。
游戏具体实现
游戏难点是怎么模拟贪吃蛇的移动。如果只是一个方块的话显然很简单。但是当蛇的长度变长之后要怎么样控制
每个方块的移动呢?
如果观察蛇的移动,可以发现,从蛇的头部到尾部,每个方块在下一时刻的位置就是它的前一个方块在当前时刻
的位置。因此我们需要做的只是控制贪吃蛇的头部的运动。其他部分的位置都可以依次类推。
另外一个值得注意的问题是
贪吃蛇吃下食物之后,新增加的方块应该放在哪个位置。
答案就是在下一时刻,新增加的方块应该出现在当前时刻的尾部位置。
因此,在吃下食物之后应该在更新蛇的每个位置之前,增加一个方块,并且将其位置设定在当前时刻的尾部位置。
然后在当前时刻更新出了新增方块之外的所有方块的位置
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 t
您可能关注的文档
- 第四篇经营决策分析.docx
- VB中format函数使用方法.doc
- 怎样打造蓬莱特色文化产业.doc
- sed 一些选项与命令详解.docx
- 怎样加强基层中央银行集中核算内控制度.doc
- SAAS及ERP系统.doc
- 计算机等级考试二级公共基础160题和答案.docx
- 常见C字符串处理函数源代码.doc
- 团队目标的作用及来源.docx
- 把监控画面送入闭路电视网络中方案.doc
- 原电池电动势的测定实验报告.pdf
- 与业主、设计、总包、监理和他承包人的配合措施.pdf
- 公司管理流程.pptx
- 2024_2025学年新教材高中地理第1章地球的运动素养综合训练新人教版选择性必修1.doc
- 2024_2025学年新教材高中地理第3章大气的运动第1节常见天气系统第1课时锋与天气分层作业新人教版选择性必修1.doc
- 2024_2025学年新教材高中地理第1章地球的运动第2节地球运动的地理意义第4课时正午太阳高度的变化四季更替和五带划分分层作业课件新人教版选择性必修1.pptx
- 2024_2025学年新教材高中地理第2章地表形态的塑造第2节构造地貌的形成第1课时地质构造与地貌课件新人教版选择性必修1.pptx
- 2024_2025学年新教材高中地理第1章地球的运动问题研究人类是否需要人造月亮课件新人教版选择性必修1.pptx
- 五片小雪花课件.pdf
- 2024_2025学年新教材高中地理第3章大气的运动第2节气压带和风带第1课时气压带和风带的形成分层作业课件新人教版选择性必修1.pptx
文档评论(0)