这篇文章将为大家详细讲解有关js如何实现网页版贪吃蛇游戏，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
成都创新互联服务项目包括黑河网站建设、黑河网站制作、黑河网页制作以及黑河网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，黑河网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到黑河省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
使用原生 js 实现贪吃蛇小游戏，首先这个 小游戏的目录结构如下： 有 贪吃蛇 ， 食物 ，地图 ，还有 游戏
当我们在浏览器打开 index.html 的时候，会出现 移动的小蛇 ，随机生成的食物（这里只有一个，当前食物被吃掉，才会初始化下一个），用户通过键盘上的方向键控制小蛇移动的方向
当小蛇触碰到了墙，即画布边缘的时候，游戏结束!
接下来就是代码实现啦 ~
食物模块
//食物的自调用函数
(function(){
//创建一个数组 来存放元素
var elements=[];
//食物就是一个对象 有宽 有高 有颜色 有横纵坐标 先有构造函数 然后创建对象
function Food(width,height,color,x,y){
//元素的宽和高 默认20
this.width=width||20;
this.height=height||20;
//元素的颜色 默认绿色
this.color=color||"green";
//元素的横纵坐标 默认为0
this.x=x||0;
this.y=y||0;
}
//为元素添加初始化的方法 最好放原型里 公用 在页面上显示 所以需要map
Food.prototype.init=function(map) {
//先删除食物
//外部无法访问的函数
remove();
// 创建元素
var div=document.createElement("div");
// 把元素追加到map中
map.appendChild(div);
// 设置元素的样式 宽 高 颜色
div.style.width=this.width+"px";
div.style.height=this.height+"px";
div.style.backgroundColor=this.color;
//先脱离文档流
div.style.position="absolute";
//横纵坐标随机产生的
this.x=parseInt(Math.random()*(map.offsetWidth/this.width))*this.width;
this.y=parseInt(Math.random()*(map.offsetHeight/this.height))*this.height;
//元素的横纵坐标
div.style.left=this.x+"px";
div.style.top=this.y+"px";
//把div元素追加到elements数组中
elements.push(div);
};
//私有的函数 删除食物的
function remove(){
//elements数组中有这个食物
for(var i=0;i小蛇模块
//小蛇的自调用函数
(function(){
//定义一个数组 存放小蛇
var elements=[];
// 小蛇的构造函数
function Snake(width,height,direction){
//每个部分的宽和高
this.width=width||20;
this.height=height||20;
//小蛇的身体部分
this.body=[
{x:3,y:2,color:"red"},//小蛇的头部
{x:2,y:2,color:"orange"},//小蛇的身体
{x:1,y:2,color:"orange"}//小蛇的身体
];
//方向
this.direction=direction||"right";
}
//通过原型添加方法，给小蛇添加初始化方法
Snake.prototype.init=function(map){
remove();
//循环遍历
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 "right":
this.body[0].x+=1;
break;
case "left":
this.body[0].x-=1;
break;
case "top":
this.body[0].y-=1;
break;
case "bottom":
this.body[0].y+=1;
break;
}
//判断有没有吃到食物
//小蛇的头的坐标和食物的坐标一致
var headX=this.body[0].x*this.width;
var headY=this.body[0].y*this.height;
//判断小蛇的头部坐标和食物的坐标是否相同
if(headX==food.x&&headY==food.y){
//获取小蛇的最后的尾巴
var last=this.body[this.body.length-1];
//加入到数组中 以对象的方式加入
this.body.push({
x:last.x,
y:last.y,
color:last.color
});
//把食物删除 初始化食物
food.init(map);
}
};
//添加私有的删除函数
function remove(){
var i=elements.length-1;
//逆序 找到这个元素的父元素 删除
for(;i>=0;i--){
var ele=elements[i];
//从地图上删除元素
ele.parentNode.removeChild(ele);
//从数组中删除
elements.splice(i,1);
}
}
//把Snake暴露给window
window.Snake=Snake;
}()); 游戏模块
//游戏的自调用函数
(function(){
var that=null;
//游戏的构造函数
function Game(map){
this.food=new Food();//食物对象
this.snake=new Snake();//小蛇对象
this.map=map;//地图
that=this;//保留当前的实例对象到that变量中 此时that 就是this
}
//游戏初始化
Game.prototype.init=function(){
//食物初始化
this.food.init(this.map);
//小蛇初始化
this.snake.init(this.map);//先让小蛇显示
//调用设置小蛇移动的方法
this.runSnake(this.food,this.map);
//调用按键的方法
this.bindKey();
};
//添加原型函数 设置小蛇可以自由移动
Game.prototype.runSnake=function(food,map){
//此时的this是实例对象
//setInterval 方法是通过window调用的 this指向改变了
var timeId=setInterval(function(){
this.snake.move(food,map);
this.snake.init(map);
//横坐标的最大值 map的属性在style标签中
var maxX=map.offsetWidth/this.snake.width;
//纵坐标的最大值
var maxY=map.offsetHeight/this.snake.height;
var headX=this.snake.body[0].x;
var headY=this.snake.body[0].y;
// 横坐标方向的检测
if(headX<0||headX>=maxX){
//撞墙了 停止定时器
clearInterval(timeId);
alert("游戏结束");
}
//纵坐标方向的检测
if(headY<0||headY>=maxY){
//撞墙了 停止定时器
clearInterval(timeId);
alert("游戏结束");
}
}.bind(that),200);//绑定到that中 即实例对象
};
//获取用户的按键 改变小蛇的方向
Game.prototype.bindKey=function(){
//这里的this 应该是触发keydown事件的对象 --document
//所以这里的this就是document
//获取用户的按键
document.addEventListener("keydown",function(e){
switch(e.keyCode){
case 37:
this.snake.direction="left";
break;
case 38:
this.snake.direction="top";
break;
case 39:
this.snake.direction="right";
break;
case 40:
this.snake.direction="bottom";
break;
}
}.bind(that),false);//绑定实例对象
};
//暴露给window
window.Game=Game;
}());主页面
贪吃蛇