JS怎么实现的贪吃蛇游戏
这篇文章将为大家详细讲解有关JS怎么实现的贪吃蛇游戏，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
创新互联不能给您低的价格，只能给您高的品质！我们努力坚持得到越来越多的客户认可和追随，这正是我们继续前进的大动力！创新互联专业网站制作公司,为企业提供高端网站建设,营销型网站制作,成都外贸网站建设公司,做网站,网站改版等做网站服务,建网站费用1680元起,成都数百家企业建站公司的选择。
具体如下：
思想：
1、设计蛇：属性有宽、高、方向、状态（有多少节），方法：显示，跑
2、设计食物：属性宽、高
3、显示蛇：根据状态向地图里加元素
4、蛇跑起来：下一节到前一节的位置，蛇头根据方向变，删除原来的蛇，新建蛇；当出界时，死亡，初始化；当蛇头吃到自己的时候，死亡，初始化
5、食物被吃掉，蛇加一节，去掉原来的食物，生成新的食物
6、添加定时器，绑定按键
完整示例：
Document
body {
margin: 0;
padding: 0;
}
.main {
width: 800px;
height: 400px;
margin: 50px auto;
}
.btn {
width: 100px;
height: 40px;
}
.map {
position: relative;
width: 800px;
height: 400px;
background: #ccc;
}
开始游戏
var map = document.getElementById('map');
// 使用构造方法创建蛇，
function Snake()
{
// 设置蛇的宽、高、默认走的方向
this.width = 10;
this.height = 10;
this.direction = 'right';
// 记住蛇的状态，当吃完食物的时候，就要加一个，初始为3个小点为一个蛇，
this.body = [
{x:2, y:0}, // 蛇头，第一个点
{x:1, y:0}, // 蛇脖子，第二个点
{x:0, y:0} // 蛇尾，第三个点
];
// 显示蛇
this.display = function() {
// 创建蛇
for (var i=0; i0; i--) {
this.body[i].x = this.body[i-1].x;
this.body[i].y = this.body[i-1].y;
}
// 根据方向处理蛇头
switch(this.direction)
{
case "left":
this.body[0].x -= 1;
break;
case "right":
this.body[0].x += 1;
break;
case "up":
this.body[0].y -= 1;
break;
case "down":
this.body[0].y += 1;
break;
}
// 判断是否出界,一蛇头判断,出界的话，
if (this.body[0].x < 0 || this.body[0].x > 79 || this.body[0].y < 0 || this.body[0].y > 39) {
clearInterval(timer); // 清除定时器，
alert("你瞎吗？撞死了！");
// 删除旧的
for (var i=0; i
