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)

4 游戏对象(Game.js)

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

5 index.html

显示的html页面

<!DOCTYPEhtml><html><head><metacharset="utf-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>PageTitle</title><metaname="viewport"content="width=device-width,initial-scale=1"><style>#map{background-color:lightgray;width:800px;height:500px;margin:0auto;position:relative;}#tag{width:200px;height:100px;background-color:gray;position:absolute;left:300px;top:200px;line-height:100px;text-align:center;display:none;}</style></head><body><divid='map'><spanid='tag'>GameOver</span></div><scriptsrc="js/Tools.js"></script><scriptsrc="js/Food.js"></script><scriptsrc="js/Snake.js"></script><scriptsrc="js/Game.js"></script></body></html>

6 运行界面