贪吃蛇小游戏 - 码农教程

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>

截图

原文地址：https://www.cnblogs.com/gaofeng0715/p/11042062.html