5.当蛇头吃到食物的时候，食物就会消失，且蛇的身子会长一节
//2.4判断蛇头是否和食物重合 var headX = head.x * this.width; var headY = head.y * this.height; if (headX === food.x && headY === food.y) { //让蛇增加一节蛇结 //获取蛇的最后一节 var last = this.body[this.body.length - 1]; this.body.push({ x: last.x, y: last.y, color: last.color }); //随机在地图上出现食物 food.render(map); }6.游戏对象用来调用食物对象和蛇对象，以及根据键盘来控制蛇的方向，用键盘控制，游戏结束的标志就是当蛇出了边界
//通过键盘控制蛇的移动方向 function bindKey() { document.addEventListener('keydown', function (e) { // console.log(e.keyCode); //37left 38top 39right 40bottom switch (e.keyCode) { case 37: that.snake.direction = 'left'; break; case 38: that.snake.direction = 'top'; break; case 39: that.snake.direction = 'right'; break; case 40: that.snake.direction = 'bottom'; break; } }, false); }总代码如下：
<script> var map = document.querySelector('#map'); //游戏对象 (function () { var that;//记录游戏对象 function Game(map) { this.food = new Food(); this.snake = new Snake(); this.map = map; that = this; } //开始游戏 Game.prototype.start = function () { //1.把蛇和食物对象渲染到map上 this.food.render(this.map); //开始游戏的逻辑 //1让蛇移动起来 //2当蛇遇到边界时游戏就结束 runSnake(); //3通过键盘控制蛇移动方向 bindKey(); //4当蛇遇到食物时 } //通过键盘控制蛇的移动方向 function bindKey() { document.addEventListener('keydown', function (e) { // console.log(e.keyCode); //37left 38top 39right 40bottom switch (e.keyCode) { case 37: that.snake.direction = 'left'; break; case 38: that.snake.direction = 'top'; break; case 39: that.snake.direction = 'right'; break; case 40: that.snake.direction = 'bottom'; break; } }, false); } //私有函数 function runSnake() { var timerId = setInterval(function () { //让蛇走一格 //在定时器中function中this指向window对象的 //要获取游戏对象中的蛇属性 that.snake.move(that.food, that.map); that.snake.render(that.map); //当蛇遇到边界时游戏结束 //获取蛇头的坐标 var maxX = that.map.offsetWidth / that.snake.width; var maxY = that.map.offsetHeight / that.snake.height; var headX = that.snake.body[0].x; var headY = that.snake.body[0].y; if (headX < 0 || headX >= maxX) { alert('Game Over'); clearInterval(timerId); } if (headY < 0 || headY >= maxY) { alert('Game Over'); clearInterval(timerId); } }, 150); } window.Game = Game; })(); (function () { // 食物 var position = 'absolute'; //记录上一次创建的食物 var elements = []; function Food(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 || 'green'; } //渲染 Food.prototype.render = function (map) { //吃掉食物之后，删除食物 removeFood(); this.x = Tools.getRandom(0, map.offsetWidth / this.width - 1) * this.width; this.y = Tools.getRandom(0, map.offsetHeight / this.height - 1) * this.height var div = document.createElement('div'); map.appendChild(div); elements.push(div); //设置div的样式 div.style.position = position; 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; } //删除食物 function removeFood() { for (var i = elements.length - 1; i >= 0; i--) { //删除div elements[i].parentNode.removeChild(elements[i]); //删除数组中的元素 //删除数组元素 //第一个参数 elements.splice(i, 1); } } window.Food = Food; })() //随机生成食物 var Tools = { getRandom: function (min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } } //蛇对象 //自调用函数，防止命名冲突 var position = 'absolute'; //记录之前创建的蛇 var elements = []; function Snake(options) { options = options || {}; this.width = options.width || 20; this.height = options.height || 20; this.direction = options.direction || 'right'; this.body = [ { x: 3, y: 2, color: 'red' }, { x: 2, y: 2, color: 'blue' }, { x: 1, y: 2, color: 'blue' } ]; } Snake.prototype.render = function (map) { //删除之前创建的蛇 remove(); //把每一个蛇结渲染到map上面 for (var i = 0, len = this.body.length; i < len; i++) { var object = this.body[i]; var div = document.createElement('div'); map.appendChild(div); //记录当前的蛇 elements.push(div); //设置样式 div.style.position = position; div.style.width = this.width + 'px'; div.style.height = this.height + 'px'; div.style.left = object.x * this.width + 'px'; div.style.top = object.y * this.height + 'px'; div.style.backgroundColor = object.color; } } //私有的成员 function remove() { for (var i = elements.length - 1; i >= 0; i--) { //删除div elements[i].parentNode.removeChild(elements[i]); //删除数组中的元素 elements.splice(i, 1); } } //控制蛇移动 Snake.prototype.move = function (food, map) { //控制蛇的身体移动(当前蛇结到上一个蛇结的位置) for (var i = this.body.length - 1; i > 0; i--) { this.body[i].x = this.body[i - 1].x; this.body[i].y = this.body[i - 1].y; } //控制蛇头的移动 //判断蛇移动的方向 var head = this.body[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; } //2.4判断蛇头是否和食物重合 var headX = head.x * this.width; var headY = head.y * this.height; if (headX === food.x && headY === food.y) { //让蛇增加一节蛇结 //获取蛇的最后一节 var last = this.body[this.body.length - 1]; this.body.push({ x: last.x, y: last.y, color: last.color }); //随机在地图上出现食物 food.render(map); } } //调用 var game = new Game(map); game.start(); </script> 代码还有一些没有完善的地方，后期慢慢改善。。。。