JavaScrip写的贪吃蛇
原生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 // 没有传宽度和高度默认20 10 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<elements.length; i++){ 37 var ele = elements[i] 38 // 找到该食物方块的父节点，从父节点删除该方块 39 elements[i].parentNode.removeChild(ele) 40 // 删除数组中的值 41 elements.splice(i,1) 42 } 43 } 44 // 将构造函数暴露给window，不然new不到Food 45 window.Food = Food; 46 }())
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 -1 36 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].y 49 } 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.color 68 }) 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 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 /* 地图样式 */ 10 .map { 11 width: 800px; 12 height: 500px; 13 background: #ccc; 14 position: relative; 15 margin: auto; 16 17 } 18 19 </style> 20 </head> 21 <body> 22 <!-- 首先在页面上画出一个框框作为地图 --> 23 <div class='map'> 24 25 </div> 26 <!-- 引入食物组件 --> 27 <script src="./food.js"></script> 28 <!-- 引入小蛇组件 --> 29 <script src="./snake.js"></script> 30 <!-- 游戏初始化组件 --> 31 <script src="./game.js"></script> 32 <script> 33 // 通过document选择器把地图选中 34 var game = new Game(document.querySelector('.map')); 35 // 初始化，详见game.js 36 game.init(); 37 38 </script> 39 </body> 40 </html>
游戏game.js集成了food.js和snake.js---然后在snake.html中用game.init就好了
点击这里，我把源码上传到码云了
