//游戏 (function(){ var that=null; //游戏的构造函数 function Game(map){ this.food=new Food(); this.snake=new Snake(); this.map=map;//地图 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){ //自动的去移动 var timeId=setInterval(function(){ //此时的this是window //蛇的移动 this.snake.move(food,map); //初始化蛇 this.snake.init(map); //横坐标最大值 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("游戏结束") } console.log(headX) }.bind(that),150) } Game.prototype.bindKey=function(){ //获取用户的按键，改变小蛇的方向 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.Game=Game; }()); //初始化游戏对象 var gm=new Game(document.querySelector(".map")); gm.init()
这里加一个小插曲，关于匿名函数自调用的三种写法
第一种
第二种
第三种
注意！注意！ 注意！ 匿名函数的最后不要忘记加封号; 因为如果忘了加,系统很容易与后面的代码混淆 造成各种很奇葩的报错;
这里我推荐第三种写法，比较清晰明了
好，代码贴完了，我们来分析一下实现思路
首先 第一步
建立一个画布
设置画布的宽度为800px 高度为600px 因为小蛇 需要在画布内任意移动，需要脱离标准文档流，所以需要设置绝对定位, 因此我给画布添加了position:relative; ，再给背景添加一个颜色 ，灰色#ccc
好，画布创建好了，我们可以开始编写逻辑代码了
Food.js 代码分析
首先我们需要创建一个贪吃蛇 吃的“食物”，因此我们需要创建一个食物的对象，这里我在food.js中创建了一个自定义构造函数
定义了 “食物Food”的 x值、y值、宽度、高度、颜色
这里我利用 || 运算设置了默认值，如果 || 左边为false 则会自动取右边的值，所以当实例化对象时若未传参时 自动取 “||” 运算符右边的值
然后在"Food"的原型上定义了一个 init 初始化方法
首先创建一个div ，并将此对象保存在 div变量中
然后 在地图中 添加上这个 div 再逐步给这个 div元素 加上他的宽度、高度、背景颜色、并且设置绝对定位
那我们怎么定位呢？