javascript面向对象怎么实现贪吃蛇游戏-亚博电竞手机版

javascript面向对象怎么实现贪吃蛇游戏

本篇内容介绍了“javascript面向对象怎么实现贪吃蛇游戏”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

1 工具对象(tools.js)

因为要随机生成食物，所以先将生成min-max范围内随机整数的方法提取出来。randomnum属性就是生成的随机数。

functiontools(min,max){min=math.ceil(min);max=math.floor(max);this.randomnum=math.floor(math.random()*(max-min 1)) min;//含最大值，含最小值}

2 食物对象(food.js)

//为避免命名冲突，使用自调用函数(function(){varfooddivs=[];//1定义食物对象functionfood(options){options=options||{};//封装属性的对象this.backgroundcolor=options.backgroundcolor||'green';this.width=options.width||20;this.height=options.height||20;this.x=options.x||0;this.y=options.y||0;}//2渲染到map上food.prototype.render=function(map){removefood();vardiv=document.createelement('div');this.x=newtools(0,map.offsetwidth/this.width-1).randomnum;this.y=newtools(0,map.offsetheight/this.height-1).randomnum;div.style.width=this.width 'px';div.style.height=this.height 'px';div.style.backgroundcolor=this.backgroundcolor;div.style.left=this.x*this.width 'px';div.style.top=this.y*this.height 'px';div.style.position='absolute';map.appendchild(div);fooddivs.push(div);}functionremovefood(){for(vari=fooddivs.length-1;i>=0;i--){fooddivs[i].parentnode.removechild(fooddivs[i]);//先从页面删除fooddivs.splice(i,1);//删除指定位置元素//再从数组实际删除}}window.food=food;//暴露food，外部才能访问})();

3 蛇对象(snake.js)

(function(){varsnakedivs=[];//1蛇构造函数functionsnake(options){options=options||{};this.body=[{x:3,y:2,bgc:'red'},{x:2,y:2,bgc:'blue'},{x:1,y:2,bgc:'blue'}];this.width=options.width||20;this.height=options.height||20;this.direction=options.direction||'right';}//2渲染到map上snake.prototype.render=function(map){removesnake();for(vari=0;i0;i--){this.body[i].x=this.body[i-1].x;this.body[i].y=this.body[i-1].y;}//蛇头移动varhead=this.body[0];switch(this.direction){case'left':head.x-=1;break;case'up':head.y-=1;break;case'right':head.x =1;break;case'down':head.y =1;break;}if(head.x===food.x&&head.y===food.y){//蛇头与食物重合varlast=this.body[this.body.length-1];this.body.push({x:last.x,y:last.y,bgc:last.bgc});food.render(map);//这里就包括移除前面的食物这一操作}}functionremovesnake(){for(vari=snakedivs.length-1;i>=0;i--){snakedivs[i].parentnode.removechild(snakedivs[i]);//先从页面删除snakedivs.splice(i,1);//删除指定位置元素//再从数组实际删除}}window.snake=snake;})();

4 游戏对象(game.js)

主要是控制游戏的开始，以及按键对应的行为在游戏中的含义，将蛇和食物这两个对象组织在一起。

(function(){varthat;functiongame(){this.food=newfood();this.snake=newsnake();that=this;}game.prototype.start=function(map){this.snake.render(map);this.food.render(map);varhead=this.snake.body[0];varspan=document.getelementbyid('tag');vartimerid=setinterval(function(){that.snake.move(that.food,map);that.snake.render(map);if((head.x>map.offsetwidth/that.snake.width-2)||head.x<=0){clearinterval(timerid);span.style.display='block';//提示gameover}if((head.y>map.offsetheight/that.snake.height-2)||head.y<=0){clearinterval(timerid);span.style.display='block';//提示gameover}},150);console.log(map.offsetwidth/this.snake.width-1);bindkey();}functionbindkey(){document.addeventlistener('keydown',function(e){switch(e.keycode){//left37up38right39down40case37:that.snake.direction='left';break;case38:that.snake.direction='up';break;case39:that.snake.direction='right';break;case40:that.snake.direction='down';break;}});}window.game=game;})()vargame=newgame();varmap=document.getelementbyid('map');game.start(map);

5 index.html

显示的html页面

gameover