1 <body> 2 <div class="map"></div> 3 <div class="score"> 4 当前得分:<span class="current">0</span> 分<br> 5 消耗时间:<span class="minute">0</span> 分 <span class="second">0</span> 秒 6 </div> 7 </body>
js部分
1 <script> 2 //食物的自调用函数 3 (function () { 4 //创建一个空数组,存储食物用 5 var elements = []; 6 //食物的构造函数 7 function Food(width, height, color, x, y) { 8 this.width = width || 20; 9 this.height = height || 20; 10 this.color = color || "green"; 11 this.x = x || 0; 12 this.y = y || 0; 13 } 14 //食物的构造函数的原型方法--食物初始化 15 Food.prototype.init = function (map) { //食物需要显示在地图上,所以传入一个形参地图 16 //先调用删除元素函数 17 remove(); 18 //创建元素并添加到地图中,再添加到数组中 19 var div = document.createElement("div"); 20 map.appendChild(div); 21 elements.push(div); 22 //设置样式 23 div.style.width = this.width + "px"; 24 div.style.height = this.height + "px"; 25 div.style.backgroundColor = this.color; 26 div.style.position = "absolute"; 27 //设置横纵坐标 28 this.x = Math.floor(Math.random() * map.offsetWidth / this.width) * this.width; 29 this.y = Math.floor(Math.random() * map.offsetHeight / this.height) * this.height; 30 div.style.left = this.x + "px"; 31 div.style.top = this.y + "px"; 32 } 33 //私有的删除食物函数 34 function remove() { 35 //循环遍历删除数组 36 for (var i = 0; i < elements.length; i++) { 37 //找到该元素的父级元素,再从父级元素中删除它 38 var ele = elements[i]; 39 ele.parentNode.removeChild(ele); 40 //再从数组中删除该元素 41 elements.splice(i, 1); //从i的位置,删除一个元素 42 } 43 } 44 //把食物的构造函数暴露给window,从而外部可以使用 45 window.Food = Food; 46 }()); 47 48 //小蛇的自调用函数 49 (function () { 50 //空数组,存储小蛇身体用 51 var elements = []; 52 //小蛇的构造函数 53 function Snake(width, height, direction) { 54 this.width = width || 20; 55 this.height = height || 20; 56 this.direction = direction || "right"; 57 //小蛇的身体用一个数组来做,数组里的每个元素都是一个对象 58 this.body = [{ //这里的数字在后面乘以宽度就是Left值 59 x: 3, 60 y: 2, 61 color: "red" 62 }, 63 { 64 x: 2, 65 y: 2, 66 color: "orange" 67 }, 68 { 69 x: 1, 70 y: 2, 71 color: "orange" 72 } 73 ]; 74 75 } 76 //小蛇初始化的原型方法 77 Snake.prototype.init = function (map) { 78 //先调用删除小蛇的函数 79 remove(); 80 //循环遍历小蛇身体,创建div 81 for (var i = 0; i < this.body.length; i++) { 82 //创建元素添加到地图中并添加到elements数组中 83 var div = document.createElement("div"); 84 map.appendChild(div); 85 elements.push(div); 86 //设置样式 87 div.style.width = this.width + "px"; 88 div.style.height = this.height + "px"; 89 div.style.position = "absolute"; 90 div.style.backgroundColor = this.body[i].color; 91 div.style.left = this.body[i].x * this.width + "px"; 92 div.style.top = this.body[i].y * this.height + "px"; 93 } 94 } 95 //小蛇移动的原型方法 96 Snake.prototype.move = function (food, map) { 97 //改变小蛇身体除头部的值 98 99 var i = this.body.length - 1; //此时i==2 100 for (; i > 0; i--) { ////倒叙的方法传值,头部的位置缺不动 101 this.body[i].x = this.body[i - 1].x; 102 this.body[i].y = this.body[i - 1].y; 103 } 104 //改变小蛇头部的位置 105 switch (this.direction) { 106 case "left": 107 this.body[0].x -= 1; 108 break; 109 case "right": 110 this.body[0].x += 1; 111 break; 112 case "top": 113 this.body[0].y -= 1; 114 break; 115 case "bottom": 116 this.body[0].y += 1; 117 break; 118 } 119 //获取小蛇头部的位置与食物做比较 120 //小蛇头部的横坐标最大值 121 var headX = this.body[0].x * this.width; 122 //小蛇头部的纵坐标最大值 123 var headY = this.body[0].y * this.height; 124 //食物的横纵坐标 125 var foodX = food.x; 126 var foodY = food.y; 127 //位置形同食物初始化 128 if (headX == foodX && headY == foodY) { 129 food.init(map); 130 //位置相同时--增加小蛇的身体--把蛇尾最后一个部分复制放到数组中 131 var last = this.body[this.body.length - 1]; 132 this.body.push({ 133 x: last.x, 134 y: last.y, 135 color: last.color 136 }); 137 } 138 //获取span元素 139 var curren = document.querySelector(".current"); 140 //改变分数 141 curren.innerHTML = this.body.length - 3; 142 } 143 //删除小蛇的私有函数 144 function remove() { 145 //倒叙删除 146 var i = elements.length - 1; 147 for (; i >= 0; i--) { 148 //先找到该元素的父级元素,再从父级元素中删除它 149 var ele = elements[i]; 150 ele.parentNode.removeChild(ele); 151 //将元素从数组中删除 152 elements.splice(i, 1); 153 } 154 } 155 //把小蛇的构造函数暴露给window,外部可以使用 156 window.Snake = Snake; 157 }()); 158 //游戏对象的自调用函数 159 (function () { 160 var that = null; //用来存放游戏Game,方便后面引用 161 //游戏对象的构造函数 162 function Game(map) { 163 this.food = new Food(); 164 this.snake = new Snake(); 165 this.map = map; 166 that = this; 167 } 168 //游戏对象初始化的原型方法 169 Game.prototype.init = function (map) { 170 //食物初始化 171 this.food.init(this.map); 172 //小蛇初始化 173 this.snake.init(this.map); 174 //小蛇移动调用 175 this.runSnake(); 176 //按键移动调用 177 this.bindKey(); 178 }; 179 //小蛇移动 180 Game.prototype.runSnake = function () { 181 //获取分数元素 182 var minute = document.querySelector(".minute"); 183 var second = document.querySelector(".second"); 184 //现在的时间 185 var nowtime = new Date(); 186 var time1 = nowtime.getMinutes() * 60 + nowtime.getSeconds(); 187 console.log("旧时间" + time1); 188 var timeId = setInterval(function () { 189 //小蛇移动 190 this.snake.move(this.food, this.map); 191 this.snake.init(this.map); 192 193 //出界后停止计时器 194 var headX = this.snake.body[0].x * this.snake.width; 195 var headY = this.snake.body[0].y * this.snake.height; 196 197 var mapX = this.map.offsetWidth; 198 var mapY = this.map.offsetHeight; 199 200 //获取现在的时间 201 var newtime = new Date(); 202 var time2 = newtime.getMinutes() * 60 + newtime.getSeconds(); 203 console.log("新时间" + time2); 204 //时间的差 205 second.innerHTML = time2 - time1; 206 if (second.innerHTML == 60) { 207 minute.innerHTML++; 208 second.innerHTML -= minute.innerHTML * 60; 209 } 210 //比较蛇头部和地图边界的位置 211 if (headX < 0 || headX >= mapX) { 212 clearInterval(timeId); 213 alert("Game Over"); 214 } 215 if (headY < 0 || headY >= mapY) { 216 clearInterval(timeId); 217 alert("Game Over"); 218 } 219 }.bind(that), 150) 220 }; 221 //按键移动 222 Game.prototype.bindKey = function () { 223 window.addEventListener("keydown", function (e) { 224 switch (e.keyCode) { 225 case 37: 226 this.snake.direction = "left"; 227 break; 228 case 38: 229 this.snake.direction = "top"; 230 break; 231 case 39: 232 this.snake.direction = "right"; 233 break; 234 case 40: 235 this.snake.direction = "bottom"; 236 break; 237 } 238 }.bind(that), false); 239 }; 240 window.Game = Game; 241 }()); 242 //实例化对象 243 var gd = new Game(document.querySelector(".map")); 244 gd.init(); 245 </script>
截图