javascript实现贪吃蛇经典游戏

2023-07-27 09:50:14 164

js面向对象编程之贪吃蛇，供大家参考，具体内容如下

首先：面向对象编程，我们要找到项目中具体的对象，此处为（食物（food），蛇（snake），游戏本身（game））也可不把游戏本身作为对象，逻辑体现出来即可。

接着分析每个对象的具体的属性及方法：
1）food对象：属性有：位置，大小，颜色；方法有：渲染在页面，随机不同位置生成；
2）snake对象：属性有：位置，大小，总节数（计分方便），颜色；方法有：渲染在页面，移动（移动过程中判断其它）。
3）game对象：游戏逻辑的编写；

ok开敲：

1）简单的静态页面编写（地图）

（1）html











贪吃蛇

(2)css(如果用边框来作为限制的边界，那么box-sizing属性是必不可少的（以免食物和蛇头坐标之间存在误差）)

*{
margin:0;
padding:0;
}

.map{
position:relative;
height:600px;
width:800px;
border:1pxsolid#333;
margin:0auto;
/*盒子模型去除边框*/
box-sizing:border-box;
}

2）food对象编写（细节处含注释）

//cwen加载页面所有元素
window.addEventListener('load',function(){

//cwen自调用函数，开启一个新的作用域，避免命名冲突
(function(){

//cwen定义全局变量
//实物数组
varelements=[];
//cwen实物
functionFood(options){
options=options||{};
this.x=options.x||0;
this.y=options.y||0;
this.width=options.width||20;
this.height=options.height||20;
this.color=options.color||'yellow';
}


//cwen随机数函数
functiongetRandom(min,max){
returnMath.floor(Math.random()*(max-min+1))+min;
}
//cwen渲染
Food.prototype.render=function(map){
//删除之前的食物
remove();
//todo动态创建div实物
vardiv=document.createElement('div');
map.appendChild(div);
//把div添加给数组
elements.push(div);
//todo随机设置x,y的值（实物的位置）-----在map中生成随机位置
//!值=Math.floor(Math.random()*可能值得总数+第一个可能的值)
this.x=getRandom(0,map.offsetWidth/this.width-1)*this.width;
this.y=getRandom(0,map.offsetHeight/this.height-1)*this.height;
div.style.position='absolute';
div.style.left=this.x+'px';
div.style.top=this.y+'px';
div.style.width=this.width+'px';
div.style.height=this.height+'px';
div.style.backgroundColor=this.color;
}

functionremove(){
//为了删除干净，从索引最大的开始循环删除
for(vari=elements.length-1;i>=0;i--){
//删除遍历到的div
elements[i].parentNode.removeChild(elements[i]);
//删除数组中的元素1）第几个开始，2）要删除个数
elements.splice(i,1);
}
}

//把Food开放出去
window.Food=Food;
})()

//cwen测试
//varmap=document.querySelector('.map');
//varoptions={x:20,y:20,width:30,height:30,color:'green'};
////todo不传值默认为自定义food
//varfood=newFood();
//food.render(map);
})

3）snake对象编写（）

window.addEventListener('load',function(){
(function(){
//记录蛇的每一节
varelements=[];
//cwen立即执行函数，开启新的作用于，避免命名冲突
functionSnake(options){
options=options||{};
//对象（蛇）每节的大小
this.width=options.width||20;
this.height=options.height||20;
//cwen蛇的总节数（计分）
this.mark=options.mark||0;
//对象的移动方向
this.direction=options.direction||'right';
//对象的身体（蛇节）
this.kont=[{x:3,y:2,color:'red'},{x:2,y:2,color:'black'},{x:1,y:2,color:'black'}];
}

//cwen渲染对象
Snake.prototype.render=function(map){
//移除之前的蛇
remove();
//循环输出对象的身体（蛇节）
for(vari=0,len=this.kont.length;i0;i--){
this.kont[i].x=this.kont[i-1].x;
this.kont[i].y=this.kont[i-1].y;
}

//判断并控制蛇头移动，判断蛇头移动方向
varhead=this.kont[0];
switch(this.direction){
case'right':
head.x+=1;
break;
case'left':
head.x-=1;
break;
case'top':
head.y-=1;
break;
case'bottom':
head.y+=1;
break;
}


//蛇头碰到食物时处理
//cwen判断蛇头是否和食物坐标重合
varheadX=head.x*this.width;
varheadY=head.y*this.height;
if(headX==food.x&&headY==food.y){
//1,增加蛇节(找到最后一根蛇节，然后添加给创建的蛇数组)
varlast=this.kont[this.kont.length-1];
this.kont.push({x:last.x,y:last.y,color:last.color});
//cwen求出蛇节的总个数（计分）
varmark=this.mark++;
//2，重新渲染食物
food.render(map);
}
}


//删除之前的蛇
functionremove(){
for(vari=elements.length-1;i>=0;i--){
elements[i].parentNode.removeChild(elements[i]);
elements.splice(i,1);
}
}

//把Snake构造函数暴露出去
window.Snake=Snake;
})()
//测试
//varmap=document.querySelector('.map');
//varsnake=newSnake();
//snake.render(map);
})

4）game对象编写，其中一个为无敌版（含细节注释）

window.addEventListener('load',function(){
(function(){
//改变计时器内this指向
varthat;

functionGame(map){
//varoptions={x:20,y:20,width:30,height:30,color:'green'};
this.food=newFood();
this.snake=newSnake();
this.map=map;
that=this;
}
//cwen渲染
Game.prototype.start=function(){
//1.把食物和蛇渲染到页面
this.food.render(this.map);
this.snake.render(this.map);
//2.游戏逻辑编写
//让蛇动起来
//判断地图边界
//runSnake();
//todo判断玩法（两种模式，原理一样）
goInput();
//通过键盘控制蛇头方向
//!keydown();
//蛇头碰到食物时处理
//在snake.js中判断
}

functiongoInput(){
varit=prompt('try:\n经典玩法请按1\n无敌玩法请输入(博主最帅)\n')
if(it==1){
runSnake();
keydown();
}elseif(it=='博主最帅'){
runSnake1();
keydown1();
}else{
alert('youinputcouldnotbefound!!!');
goInput();
}
}


//让蛇动起来
functionrunSnake(){
vartimeId=setInterval(function(){
//vara=mark;
that.snake.move(that.food,that.map);
that.snake.render(that.map);

//判断地图边界
varmaxX=(that.map.offsetWidth)/that.snake.width;
varmaxY=(that.map.offsetHeight)/that.snake.height;
varheadX=that.snake.kont[0].x;
varheadY=that.snake.kont[0].y;
if(headX<0||headX>=maxX){
alert('GameOver'+'得分为'+that.snake.mark);
clearInterval(timeId);
}elseif(headY<0||headY>=maxY){
alert('GameOver'+'成绩为'+that.snake.mark);
clearInterval(timeId);
}
},150)
}


//无敌版本蛇运动
functionrunSnake1(){
vartimeId1=setInterval(function(){
that.snake.move(that.food,that.map);
that.snake.render(that.map);

//判断地图边界
varmaxX=(that.map.offsetWidth-that.snake.width)/that.snake.width;
varmaxY=(that.map.offsetHeight-that.snake.height)/that.snake.height;
varheadX=that.snake.kont[0].x;
varheadY=that.snake.kont[0].y;

if(headX<0){
that.snake.kont[0].x=(that.map.offsetWidth-that.snake.width)/that.snake.width;
}elseif(headX>maxX){
that.snake.kont[0].x=0;
}elseif(headY<0){
that.snake.kont[0].y=(that.map.offsetHeight-that.snake.height)/that.snake.height;
}elseif(headY>maxY){
that.snake.kont[0].y=0;
}
},50)
}



//通过键盘控制蛇头方向
functionkeydown(){
document.addEventListener('keydown',function(e){
//通过事件对象判断按了哪个键37left,38top,39right,40bottom
//console.log(e.keyCode);
//其在走的同时按下反方向无用
if(e.keyCode==37&&that.snake.direction!='right'){
that.snake.direction='left';
}elseif(e.keyCode==38&&that.snake.direction!='bottom'){
that.snake.direction='top';
}elseif(e.keyCode==39&&that.snake.direction!='left'){
that.snake.direction='right';
}elseif(e.keyCode==40&&that.snake.direction!='top'){
that.snake.direction='bottom';
}
});
}


functionkeydown1(){
document.addEventListener('keydown',function(e){
//通过事件对象判断按了哪个键37left,38top,39right,40bottom
//console.log(e.keyCode);
//无敌版本四面八方任你行
if(e.keyCode==37){
that.snake.direction='left';
}elseif(e.keyCode==38){
that.snake.direction='top';
}elseif(e.keyCode==39){
that.snake.direction='right';
}elseif(e.keyCode==40){
that.snake.direction='bottom';
}
});
}


//把Game开放
window.Game=Game;
})()
})

5）main开启游戏

window.addEventListener('load',function(){
(function(window,undefind){
//测试
varmap=document.querySelector('.map');
vargame=newGame(map);
game.start();

})(window,undefined)
})

lastbutnotleast
*建议把所有js文件写在同一个js文件中，可以大大提高加载速度。注意在每个立即执行函数前加上‘；'，以免出错。

小编还为大家准备了精彩的专题：javascript经典小游戏汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

javascript实现贪吃蛇经典游戏

热门推荐

随机推荐