1. 对于贪吃蛇由食物，蛇，地图，游戏对象这个部分组成
2. 地图是最简单的，看个人如何设计它的样式与属性
3. 食物对象，设计样式以及位置，对于位置要做到位置随机，且在蛇头吃掉食物后食物会消失，出现在另一随机位置，代码如下：

 (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.heightvar 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--) {//删除divelements[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;}}

4. 蛇对象的样式属性可自由设计，蛇移动起来的方法是：蛇身体移动后一个的蛇节的下一位置是前一个蛇节，蛇头的移动要看具体的移动方向代码如下：

       //控制蛇的身体移动(当前蛇结到上一个蛇结的位置)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;}

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 40bottomswitch (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 40bottomswitch (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.heightvar 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--) {//删除divelements[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--) {//删除divelements[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>

代码还有一些没有完善的地方，后期慢慢改善。。。。