1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #map { 8 800px; 9 height: 600px; 10 background-color: grey; 11 position: relative; 12 } 13 14 </style> 15 </head> 16 <body> 17 <div id="map"></div> 18 <script src="common.js"></script> 19 <script> 20 (function Food(x, y, width, height, color) { 21 var elements = []; 22 Food.prototype.init = function (map) { 23 //调用这个函数是为了防止多次初始化带来多个食物的效果 24 remove(); 25 var div = document.createElement("div"); 26 map.appendChild(div); 27 div.style.backgroundColor = this.color; 28 div.style.width = this.width + "px"; 29 div.style.height = this.height + "px"; 30 div.style.position = "absolute"; 31 this.x = parseInt(Math.random() * (map.offsetWidth / this.width)) * this.width; 32 this.y = parseInt(Math.random() * (map.offsetHeight / this.height)) * this.height; 33 div.style.left = this.x + "px"; 34 div.style.top = this.y + "px"; 35 elements.push(div); 36 } 37 38 //删除div 函数 思路：利用之前elements数组存储的元素 找到它的父级元素 也就是map 再用map把elements中的小方块删掉 39 function remove() { 40 for (var i = 0; i < elements.length; i++) { 41 var ele = elements[i]; 42 ele.parentNode.removeChild(ele); 43 elements.splice(i, 1); 44 } 45 } 46 47 this.x = x; 48 this.y = y; 49 this.width = width || 20; 50 this.height = height || 20; 51 this.color = color || "green"; 52 window.Food = Food; 53 }() 54 55 ); 56 (function Snake(width, height, direction) { 57 var elements = []; 58 this.width = width || 20; 59 this.height = height || 20; 60 this.body = [ 61 {x: 3, y: 2, color: "red"}, 62 {x: 2, y: 2, color: "orange"}, 63 {x: 1, y: 2, color: "orange"}, 64 ]; 65 //小蛇移动的方向 66 this.direction = direction || "right"; 67 68 Snake.prototype.init = function (map) { 69 70 remove(); 71 for (var i = 0; i < this.body.length; i++) { 72 var div = document.createElement("div"); 73 map.appendChild(div); 74 div.style.position = "absolute"; 75 div.style.width = this.width + "px"; 76 div.style.height = this.height + "px"; 77 div.style.left = this.body[i].x * this.width + "px"; 78 div.style.top = this.body[i].y * this.height + "px"; 79 div.style.backgroundColor = this.body[i].color; 80 elements.push(div); 81 } 82 83 function remove() { 84 var i = elements.length - 1; 85 for (; i >= 0; i--) { 86 var ele = elements[i]; 87 ele.parentNode.removeChild(ele); 88 elements.splice(i, 1); 89 } 90 } 91 92 } 93 Snake.prototype.move = function (map, food) { 94 var i = this.body.length - 1; 95 for (; i > 0; i--) { 96 this.body[i].x = this.body[i - 1].x; 97 this.body[i].y = this.body[i - 1].y; 98 } 99 var headX = this.body[0].x * this.width; 100 var headY = this.body[0].y * this.height; 101 if (headX == food.x && headY == food.y) { 102 103 var last = this.body[this.body.length - 1]; 104 105 this.body.push( 106 { 107 x: last.x, 108 y: last.y, 109 color: last.color 110 } 111 ); 112 113 food.init(map); 114 115 } 116 117 switch (this.direction) { 118 case "left": 119 this.body[0].x -= 1; 120 break; 121 case "right": 122 this.body[0].x += 1; 123 break; 124 case "top": 125 this.body[0].y -= 1; 126 break; 127 case "bottom": 128 this.body[0].y += 1; 129 break; 130 } 131 } 132 window.Snake = Snake; 133 }() 134 135 ); 136 (function () { 137 var that = null; 138 139 function Game(map) { 140 this.food = new Food(); 141 this.snake = new Snake(); 142 this.map = map; 143 that = this; 144 Game.prototype.init = function (map) { 145 this.food.init(this.map); 146 this.snake.init(this.map); 147 this.bindkey(); 148 var maxX = that.map.offsetWidth / that.snake.width; 149 var maxY = that.map.offsetHeight / that.snake.height; 150 var timeid = setInterval(function () { 151 if (that.snake.body[0].x >= maxX || that.snake.body[0].x >= maxX < 0) { 152 alert("结束了哦"); 153 clearInterval(timeid); 154 } 155 if (that.snake.body[0].y >= maxY || that.snake.body[0].y < 0) { 156 alert("结束了哦"); 157 clearInterval(timeid); 158 } 159 that.snake.move(that.map, that.food); 160 that.snake.init(that.map); 161 }, 150); 162 } 163 Game.prototype.bindkey = function () { 164 document.addEventListener("keydown", function (e) { 165 switch (e.keyCode) { 166 case 37: 167 if (that.snake.direction != "right") { 168 that.snake.direction = "left"; 169 } 170 break; 171 case 38: 172 if (that.snake.direction != "bottom") { 173 that.snake.direction = "top"; 174 } 175 176 break; 177 case 39: 178 if (that.snake.direction != "left") { 179 that.snake.direction = "right"; 180 } 181 break; 182 case 40: 183 if (that.snake.direction != "top") { 184 that.snake.direction = "bottom"; 185 } 186 187 break; 188 } 189 190 }, false) 191 } 192 193 } 194 195 window.Game = Game; 196 }() 197 198 ); 199 var Gm = new Game(my$("map")); 200 Gm.init(my$("map")); 201 202 203 </script> 204 </body> 205 </html>