1 <!DOCTYPE html>
2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>贪吃蛇</title> 9 <link rel="stylesheet" href="snake.css"> 10 </head> 11 12 <body> 13 <div id="map"> 14 <!-- <div class="snake-body" style="left:60px;top:0"></div> 15 <div class="snake-body" style="left:80px;top:0"></div> 16 <div class="snake-head" style="left:100px;top:0"></div> --> 17 <!-- 18 【生成蛇的规律】 19 生成蛇，其实本质上就是不断的增加新蛇头。 20 若没有蛇头，则创建一个新蛇头，设置位置为 0,0 21 若有蛇头，则先把原有的蛇头变为身体，再添加新的蛇头。并且控制新蛇头的位置，在旧蛇头的基础上计算新蛇头的位置（根据方向来计算）。 22 --> 23 24 <!-- 25 【蛇移动的规律】 26 把蛇的最后一节取出来，变为蛇头。 27 旧的蛇头变为身体 28 把最后一节添加到最前面，设置新蛇头的位置 29 --> 30 </div> 31 <!-- 在这里压缩的目的是减少文件体积，合并的目的是减少请求次数。 这样可以提高程序的网页的访问速度。 --> 32 <script src="all.js"></script> 33 34 <!-- 使用食物对象 --> 35 <script> 36 // 获取页面上的地图元素 37 var map = document.querySelector('#map'); 38 // 创建了一个食物对象 39 // var food1 = new Food(map); 40 // // 食物随机一下 41 // food1.randomLoaction(); 42 43 var game = new Game(map); 44 game.start(); 45 </script> 46 </body> 47 48 </html>
CSS代码：
1 /* 地图 */ 2 3 #map { 4 position: relative; 5 margin: 0 auto; 6 width: 900px; 7 height: 600px; 8 background-color: #1f575c; 9 box-shadow: 0px 0px 50px 20px green; 10 } 11 12 13 /* 蛇头、蛇身体、食物基本样式 */ 14 15 .snake-head, 16 .snake-body, 17 .food { 18 position: absolute; 19 width: 18px; 20 height: 18px; 21 border: dotted 1px black; 22 /* border-radius: 17px; */ 23 } 24 25 26 /* 蛇的身体 */ 27 28 .snake-body { 29 background: pink; 30 } 31 32 33 /* 蛇头样式 */ 34 35 .snake-head { 36 background-color: red; 37 } 38 39 40 /* 食物 */ 41 42 .food { 43 background-color: #00ff00; 44 }
JS代码：
1 function Food(m) { 2 this.x = 0; 3 this.y = 0; 4 this.div = document.createElement("div"); 5 this.div.className = "food"; 6 this.map = m; 7 this.map.appendChild(this.div) 8 } 9 10 Food.prototype.randomLoaction = function() { 11 var maxX = 900 / 20 - 1; 12 var maxY = 600 / 20 - 1; 13 var indexX = getIntNum(0, maxX); 14 var indexY = getIntNum(0, maxY); 15 this.x = indexX * 20; 16 this.y = indexY * 20; 17 this.div.style.left = this.x + "px"; 18 this.div.style.top = this.y + "px" 19 }; 20 21 function getIntNum(min, max) { 22 var num = parseInt(Math.random() * (max - min + 1) + min); 23 return num 24 }; 25 26 function Snake(m, f) { 27 this.direction = "right"; 28 this.bodys = []; 29 this.map = m; 30 this.food = f; 31 this.createBodys() 32 } 33 34 Snake.prototype.createBodys = function() { 35 for (var i = 0; i < 3; i++) { 36 this.insertNewHead() 37 } 38 }; 39 Snake.prototype.insertNewHead = function() { 40 var newHead = document.createElement("div"); 41 newHead.className = "snake-head"; 42 var location = this.getNewHeadLoaction(); 43 newHead.style.left = location.left + "px"; 44 newHead.style.top = location.top + "px"; 45 this.map.appendChild(newHead); 46 var oldHead = this.bodys[0]; 47 if (oldHead != undefined) { 48 oldHead.className = "snake-body" 49 } 50 this.bodys.unshift(newHead) 51 }; 52 Snake.prototype.getNewHeadLoaction = function() { 53 var x = 0; 54 y = 0; 55 var oldHead = this.bodys[0]; 56 if (oldHead == undefined) { 57 return { left: x, top: y } 58 } 59 x = oldHead.offsetLeft; 60 y = oldHead.offsetTop; 61 switch (this.direction) { 62 case "left": 63 x = x - 20; 64 break; 65 case "right": 66 x = x + 20; 67 break; 68 case "bottom": 69 y = y + 20; 70 break; 71 case "top": 72 y = y - 20; 73 break 74 } 75 return { left: x, top: y } 76 }; 77 Snake.prototype.move = function() { 78 var obj = this.getNewHeadLoaction(); 79 if (obj.left < 0 || obj.left == 900 || obj.top < 0 || obj.top == 600) { 80 alert("想不开死了"); 81 return true 82 } 83 var last = this.bodys.pop(); 84 last.className = "snake-head"; 85 var oldHead = this.bodys[0]; 86 oldHead.className = "snake-body"; 87 this.bodys.unshift(last); 88 last.style.left = obj.left + "px"; 89 last.style.top = obj.top + "px"; 90 if (obj.left == this.food.x && obj.top == this.food.y) { 91 this.insertNewHead(); 92 this.food.randomLoaction() 93 } 94 return false 95 }; 96 97 function Game(m) { 98 this.food = new Food(m); 99 this.snake = new Snake(m, this.food) 100 } 101 102 Game.prototype.start = function() { 103 this.food.randomLoaction(); 104 var snake = this.snake; 105 var flag = window.setInterval(function() { 106 var isDead = snake.move(); 107 console.log(isDead); 108 if (isDead) { 109 clearInterval(flag) 110 } 111 }, 100); 112 document.onkeydown = function(e) { 113 var code = e.keyCode; 114 switch (code) { 115 case 37: 116 if (snake.direction != "right") { 117 snake.direction = "left" 118 } 119 break; 120 case 38: 121 snake.direction = "top"; 122 break; 123 case 39: 124 snake.direction = "right"; 125 break; 126 case 40: 127 snake.direction = "bottom"; 128 break 129 } 130 } 131 };