原生JavaScript写的
贪吃蛇这个游戏好像就如同hello world一样，简单又有代表性，以前我学习c语言的时候，第一个做的趣味小游戏也是贪吃蛇---------------------------------
1 //贪吃蛇的食物模块 2 (function(){ 3 var elements = [] 4 // 创建一个食物的构造函数 5 function Food(x,y,width,height,color){ 6 // 食物方块的坐标 7 this.x = x || 0; 8 this.y = y || 0; 9 // 没有传宽度和高度默认2010 this.width = width || 20; 11 this.height = height || 20;12 13 this.color = color || 'green';14 }15 // 添加初始化方法16 Food.prototype.init = function(map){17 remove()18 // 创建食物方块，添加到地图map里19 var div = document.createElement('div')20 map.appendChild(div);21 // 设置样式和位置22 div.style.width = this.width + 'px';23 div.style.height = this.height + 'px';24 div.style.backgroundColor = this.color;25 div.style.position = "absolute";26 this.x = Math.floor(map.offsetWidth/this.width*Math.random())*this.width;27 this.y = Math.floor(map.offsetHeight/this.height*Math.random())*this.height;28 div.style.left = this.x + 'px';29 div.style.top = this.y + 'px';30 // 每次创造出一个食物方块就把它push到一个数组中31 // 删除的时候好找32 elements.push(div)33 }34 // 移除食物函数35 function remove(){36 for(var i = 0; i 1 (function(){ 2 var element = [] 3 // 蛇的构造函数 4 function Snake(width,height,direction){ 5 this.width = width || 20; 6 this.height = height || 20; 7 this.direction = direction || 'right' 8 this.body = [ 9 {x:3,y:1,color:'red'},10 {x:2,y:1,color:'orange'},11 {x:1,y:1,color:'orange'}12 ]13 }14 Snake.prototype.init = function(map){15 // 在地图上画蛇之前把之情画的蛇删除16 remove()17 // 在地图上画出蛇18 for(var i = 0; i < this.body.length; i++){19 var div = document.createElement('div');20 map.appendChild(div)21 div.style.backgroundColor = this.body[i].color;22 div.style.width = this.width + 'px';23 div.style.height = this.height + 'px';24 div.style.position = "absolute"25 div.style.left = this.body[i].x * this.width +'px'26 div.style.top = this.body[i].y* this.width +'px'27 element.push(div)28 }29 30 }31 // 蛇每移动一次就要在地图上画一次32 // 即move（）后就要init（）33 // 如果不删除之前画的蛇，就会越来越长34 var remove = function(){35 var i = element.length -136 for( ; i >=0; i--){37 var ele = element[i];38 element[i].parentNode.removeChild(ele)39 element.splice(i,1)40 }41 }42 // 蛇移动方法43 Snake.prototype.move = function(food,map){44 var i = this.body.length -1;45 // 蛇身的改变46 for( ; i>0; i--){47 this.body[i].x = this.body[i-1].x;48 this.body[i].y = this.body[i-1].y49 }50 // 根据方向改变蛇头值51 switch(this.direction){52 case 'right': this.body[0].x +=1;break;53 case 'left': this.body[0].x -=1;break;54 case 'up': this.body[0].y -=1;break;55 case 'down': this.body[0].y +=1;break;56 }57 // 每次移动后蛇头坐标58 var headX = this.body[0].x*this.width;59 var headY = this.body[0].y*this.height;60 // 吃到食物后61 if(headX == food.x && headY ==food.y){62 var lastBody = this.body[this.body.length-1];63 // 把最后一节蛇身复制，push到蛇的body中64 this.body.push({65 x:lastBody.x,66 y:lastBody.y,67 color:lastBody.color68 })69 // 再画一个食物70 food.init(map)71 }72 }73 window.Snake = Snake;74 }()) 1 (function(){ 2 // 总的接口 3 function Game(map){ 4 this.food = new Food; 5 this.snake = new Snake; 6 this.map = map 7 } 8 // 初始化 9 Game.prototype.init = function(){10 this.food.init(this.map);11 this.snake.init(this.map); 12 this.runSnake(this.map,this.food);13 this.keyDown()14 }15 // 让蛇跑起来16 Game.prototype.runSnake = function(map,food){17 var timeId = setInterval(()=>{18 this.snake.move(food,map);19 this.snake.init(map);20 var mapX = map.offsetWidth / this.snake.width -1;21 var mapY = map.offsetHeight / this.snake.height -1;22 var headX = this.snake.body[0].x;23 var headY = this.snake.body[0].y;24 console.log('蛇头'+headX+','+headY+'--------地图'+mapX+mapY)25 // 如果撞到边框，停止定时器，游戏结束26 if(headX < 0 || headX >mapX || headY < 0 || headY > mapY){27 alert('err')28 clearInterval(timeId)29 }30 },100)31 }32 // 按下按键改变方向33 Game.prototype.keyDown = function(){34 // 注册一个keydown事件35 document.addEventListener('keydown',(e)=>{36 switch(e.keyCode){37 case 65: this.snake.direction = 'left';break;38 case 68: this.snake.direction = 'right';break;39 case 87: this.snake.direction = 'up';break;40 case 83: this.snake.direction = 'down';break;41 }42 },false)43 }44 window.Game = Game;45 }()) 1 2 3 4 5 6 7Document 8 20 21 22 2324 2526 27 28 29 30 31 32 39 40
游戏game.js集成了food.js和snake.js---然后在snake.html中用game.init就好了
点击，我把源码上传到码云了