这篇文章主要介绍了如何基于javascript实现贪吃蛇游戏,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
html代码:
& lt; div类=澳谌荨北?
& lt; div类=癰tn startBtn”比;& lt; !——开始按钮——比;
& lt;按钮类型=鞍磁ァ弊４? lt;/button>
& lt;/div>
& lt; div类=癰tn stopBtn”比;& lt; !——暂停按钮——比;
& lt;按钮类型=鞍磁ァ弊４? lt;/button>
& lt;/div>
& lt; div id=" snakeWrap "祝辞& lt;/div>& lt; !——主题内容——比;
& lt;/div>
css代码:
* {
保证金:0;
填充:0;
}
身体{
background - color: # 565 f65;
宽度:100%;
高度:10 vh;
溢出:隐藏;
}
.content {
宽度:500 px;
身高:500 px;
位置:绝对的;
上图:50%;
左:50%;
margin-top: -250 px;
margin-left: -250 px;
background - color: # 565 f65;
边界:10 px固体# E7E7E7;
不必:插图0 px 0 px 5 px 2 px # 000;
}
.btn {
宽度:100%;
高度:100%;
位置:绝对的;
上图:0;
左:0;
background - color: rgba (0, 0, 0, 0。3);/*游戏未开始时和暂停时的遮罩*/z - index: 2;
}
.btn按钮{
背景:无;
边界:没有;
background-size: 100% - 100%;
光标:指针;
大纲:没有;
位置:绝对的;
左:50%;
上图:50%;
}
.startBtn按钮{
宽度:170 px;
身高:80 px;
背景图片:url (img/startbtn.png);
margin-top: -40 px;
margin-left: -85 px;
}
.stopBtn {
显示:没有;
}
.stopBtn按钮{
宽度:70 px;
身高:70 px;
背景图片:url (img/stopbtn.png);
margin-top: -35 px;
margin-left: -35 px;
}
# snakeWrap {
宽度:500 px;
身高:500 px;
位置:相对;
}
.snakeHead{/*蛇头样式*/background - color:水;
这个特性:50%;
}
.snakeBody{/*蛇身样式*/background - color: navajowhite;
这个特性:50%;
}
.food{/*食物样式*/背景图片:url (img/food.png);
background-size:封面;
}
javascript代码:
//var sw=20日一个方块的宽
sh=20//一个方块的高//tr=25日行数
td=25;//列数
蛇var=null,//蛇的实例
食物=null,//食物的实例
游戏=零;//游戏的实例
函数平方(x, y,类名){
这一点。x=x *西南;//方块实际的位置
这一点。y=y * sh;//方块实际的位置
这一点。类=名称;
这一点。viewContent=document.createElement (div);//方块对应的DOM元素
this.viewContent。className=this.class;
这一点。父母=. getelementbyid (“snakeWrap”);//方块的父级
}
Square.prototype。创建=function(){//创建方块DOM,并添加到页面里
this.viewContent.style。位置=熬浴?
this.viewContent.style。宽度=sw +“px”;
this.viewContent.style。身高=sh +“px”;
this.viewContent.style。离开了= +“px”;
this.viewContent.style。=这。y +“px”;
this.parent.appendChild (this.viewContent);
}；
Square.prototype。删除=function () {
this.parent.removeChild (this.viewContent);
}//蛇
函数蛇(){
这一点。头=零;//存一下蛇头的信息
这一点。尾=零;//存一下蛇尾的信息
这一点。pos=[];//存储蛇身上的每一个方块的位置,二维数组
这一点。directionNum={//存储蛇走的方向,用一个对象来表示
左:{
x: 1,
y: 0,
旋转:180
},
右:{
x: 1,
y: 0,
旋转:0
},
:{
x: 0,
y: 1,
旋转:-90
},
:{
x: 0,
y: 1,
旋转:90
}
}
}
Snake.prototype。init=function () {//创建蛇的头
var黑鱼=new广场(2 0的黑鱼);
snakeHead.create ();
这一点。头=黑鱼;//存储蛇头信息
this.pos。(2,0)push ();//把蛇头的位置存起来//创建蛇身体
var snakeBody1=new广场(1 0 ' snakeBody ');
snakeBody1.create ();
this.pos。推([0]);//把蛇身1的位置存起来
var snakeBody2=new广场(0,0,' snakeBody ');
snakeBody2.create ();
这一点。尾=snakeBody2;//把蛇尾的信息存起来
this.pos。推动([0]);//把蛇身1的位置存起来//让蛇头蛇身形成链表关系
黑鱼。去年=零;
黑鱼。下一个=snakeBody1;
snakeBody1。去年=黑鱼;
snakeBody1。下一个=snakeBody2;
snakeBody2。去年=snakeBody1;
snakeBody2。下一个=零;//给蛇添加一条属性,用来表示蛇走的方向
这一点。方向=this.directionNum.right;//默认让蛇往右走
}//这个方法用来获取蛇头的下一个位置对应的元素,要根据元素做不同的事情
Snake.prototype。getNextPos=function () {
var nextPos=[//蛇头要走的下一个点的坐标
this.head。x/sw + this.direction.x,
this.head。y/sh + this.direction.y
];//下一个点是自己,代表撞到了自己,游戏结束
var selfCollind=false;//是否撞到自己
this.pos.forEach(功能(价值){
如果(值[0]==nextPos [0],,价值[1]==nextPos [1]) {//如果数组中的两个数据都相等,就说明下一个点在蛇身上里面能找的到,代表撞到自己了
selfCollind=true;
}
});
如果(selfCollind) {
console.log(“撞到自己了!”);
this.strategies.die.call(这个);
返回;
}//下一个点是墙,游戏结束
如果(nextPos [0] & lt;0 | | nextPos [1] & lt;0 | | nextPos[0]比;td - 1 | | nextPos[1]比;tr - 1) {
console.log(“撞墙了!”);
this.strategies.die.call(这个);
返回;
}//下一个点是食物,吃
如果(食物,,食物。pos [0]==nextPos [0],,食物。pos [1]==nextPos [1]) {//如果这个条件成立说明现在蛇头要走的下一个点是食物的那个点
console.log(“撞到食物了了!”);
this.strategies.eat.call(这个);
返回;
}//下一个点什么都不是,走
this.strategies.move.call(这个);
}；//处理碰撞后要做的事
Snake.prototype。策略={
移动:函数(格式){//这个参数用于决定要不要删除最后一个方块(蛇尾),当传了这个参数后就表示要做的事情是吃//创建新身体(在蛇头位置)
var newBody=新广场(this.head。x/sw this.head。y/sh ' snakeBody ');//更新链表关系
newBody。下一个=this.head.next;
newBody.next。去年=newBody;
newBody。去年=零;
this.head.remove ();//旧舌头从原来的位置删除
newBody.create ();//创建一个新蛇头(蛇头下一个要走到的点)
var newHead=新广场(this.head。x/sw + this.direction。x, this.head。y/sh + this.direction。y,黑鱼)//更新链表关系
newHead。下一个=newBody;
newHead。去年=零;
newBody。去年=newHead;
newHead.viewContent.style。变换=' (' + this.direction.rotate + '度)的旋转;
newHead.create ();//蛇身上每一个方块的坐标也要更新
this.pos。null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
