JavaScript 实现简易版贪吃蛇（Day_13）

Html 页面

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>贪吃蛇</title>
 6   <link rel="stylesheet" href="css/style.css">
 7 </head>
 8 <body> 
 9   <div id="map"></div>
10   <h2>使用WSAD 或者 上下左右键  控制方向  </h2>
11   <script src="js/index.js"></script>
12 </body>
13 </html>

CSS 页面

1 #map {
2   width: 800px;
3   height: 600px;
4   background-color: lightgray;
5   position: relative;
6 }

JavaScript 部分

  1 // ---------------------Tools--------------------------
  2 
  3 
  4 ;(function (window, undefined) {
  5   var Tools = {
  6     getRandom: function (min, max) {
  7       return Math.floor(Math.random() * (max - min + 1)) +  min;
  8     }
  9   }
 10   // 暴露Tools给window
 11   window.Tools = Tools;
 12 })(window, undefined)
 13 
 14 // -----------------------Food---------------------------
 15 ;(function (window, undefined) {
 16   // 局部作用域
 17   var position = 'absolute';
 18   // 记录上一次创建的食物，为删除做准备
 19   var elements = [];
 20   function Food(options) {
 21     options = options || {};
 22     this.x = options.x || 0;
 23     this.y = options.y || 0;
 24 
 25     this.width = options.width || 20;
 26     this.height = options.height || 20;
 27 
 28     this.color = options.color || 'green';
 29   }
 30 
 31   // 渲染
 32   Food.prototype.render = function (map) {
 33     // 删除之前创建的食物
 34     remove();
 35 
 36     // 随机设置x和y的值
 37     this.x = Tools.getRandom(0, map.offsetWidth/this.width - 1) * this.width;
 38     this.y = Tools.getRandom(0, map.offsetHeight/this.height - 1) * this.height;
 39 
 40     // 动态创建div  页面上显示的食物
 41     var div = document.createElement('div');
 42     map.appendChild(div);
 43 
 44     elements.push(div);
 45 
 46     // 设置div的样式
 47     div.style.position = position;
 48     div.style.left = this.x + 'px';
 49     div.style.top = this.y + 'px';
 50     div.style.width = this.width + 'px';
 51     div.style.height = this.height + 'px';
 52     div.style.backgroundColor = this.color;
 53   }
 54 
 55   function remove() {
 56     for (var i = elements.length - 1; i >= 0; i--) {
 57       // 删除div
 58       elements[i].parentNode.removeChild(elements[i]);
 59       // 删除数组中的元素
 60       // 删除数组元素
 61       // 第一个参数，从哪个元素开始删除
 62       // 第二个参数，删除几个元素
 63       elements.splice(i, 1);
 64     }
 65   }
 66 
 67   // 把Food构造函数  让外部可以访问
 68   window.Food = Food;
 69 })(window, undefined)
 70 
 71 // ---------------------------Snake----------------------
 72 ;(function (window, undefined) {
 73   var position = 'absolute';
 74   // 记录之前创建的蛇
 75   var elements = [];
 76   function Snake(options) {
 77     options = options || {};
 78     // 蛇节 的大小
 79     this.width = options.width || 20;
 80     this.height = options.height || 20;
 81     // 蛇移动的方向
 82     this.direction = options.direction || 'right';
 83     // 蛇的身体(蛇节)  第一个元素是蛇头
 84     this.body = [
 85       {x: 3, y: 2, color: 'red'},
 86       {x: 2, y: 2, color: 'blue'},
 87       {x: 1, y: 2, color: 'blue'}
 88     ];
 89   }
 90 
 91   Snake.prototype.render = function (map) {
 92     // 删除之前创建的蛇
 93     remove();
 94     // 把每一个蛇节渲染到地图上
 95     for (var i = 0, len = this.body.length; i < len; i++) {
 96       // 蛇节
 97       var object = this.body[i];
 98       // 
 99       var div = document.createElement('div');
100       map.appendChild(div);
101 
102       // 记录当前蛇
103       elements.push(div);
104 
105       // 设置样式
106       div.style.position = position;
107       div.style.width = this.width + 'px';
108       div.style.height = this.height + 'px';
109       div.style.left = object.x * this.width + 'px';
110       div.style.top = object.y * this.height + 'px';
111       div.style.backgroundColor = object.color;
112     }
113   }
114   // 私有的成员
115   function remove() {
116     for (var i = elements.length - 1; i >= 0; i--) {
117       // 删除div
118       elements[i].parentNode.removeChild(elements[i]);
119       // 删除数组中的元素
120       elements.splice(i, 1);
121     }
122   }
123 
124   // 控制蛇移动的方法
125   Snake.prototype.move = function (food, map) {
126     // 控制蛇的身体移动（当前蛇节 到 上一个蛇节的位置）
127     for (var i = this.body.length - 1; i > 0; i--) {
128       this.body[i].x = this.body[i - 1].x;
129       this.body[i].y = this.body[i - 1].y;
130     }
131     // 控制蛇头的移动
132     // 判断蛇移动的方向
133     var head = this.body[0];
134     switch(this.direction) {
135       case 'right': 
136         head.x += 1;
137         break;
138       case 'left': 
139         head.x -= 1;
140         break;
141       case 'top':
142         head.y -= 1;
143         break;
144       case 'bottom':
145         head.y += 1;
146         break;
147     }
148 
149     // 2.4 判断蛇头是否和食物的坐标重合
150     var headX = head.x * this.width;
151     var headY = head.y * this.height;
152     if (headX === food.x && headY === food.y) {
153       // 让蛇增加一节
154       // 获取蛇的最后一节
155       var last = this.body[this.body.length - 1];
156       this.body.push({
157         x: last.x,
158         y: last.y,
159         color: last.color
160       })
161 
162       // 随机在地图上重新生成食物
163       food.render(map);
164     }
165 
166   }
167 
168   // 暴露构造函数给外部
169   window.Snake = Snake;
170 })(window, undefined)
171 
172 //----------------------Game---------------------------
173 ;(function (window, undefined) {
174   var that;  // 记录游戏对象
175   function Game(map) {
176     this.food = new Food();
177     this.snake = new Snake();
178     this.map = map;
179     that = this;
180   }
181 
182   Game.prototype.start = function () {
183     // 1 把蛇和食物对象，渲染到地图上
184     this.food.render(this.map);
185     this.snake.render(this.map);
186     // 2 开始游戏的逻辑
187     // 2.1  让蛇移动起来
188     // 2.2  当蛇遇到边界游戏结束
189     runSnake();
190     // 2.3  通过键盘控制蛇移动的方向
191     bindKey();
192     // 2.4  当蛇遇到食物 --- 在snake的move方法中处理  
193    }
194 
195    // 通过键盘控制蛇移动的方向
196   function bindKey() {
197     // document.onkeydown = function () {};
198     document.addEventListener('keydown', function (e) {
199       // console.log(e.keyCode);
200       // 37 - left
201       // 38 - top
202       // 39 - right
203       // 40 - bottom
204       switch (e.keyCode) {
205         case 37: 
206           this.snake.direction = 'left';
207           break;
208         case 38:
209           this.snake.direction = 'top';
210           break;
211         case 39:
212           this.snake.direction = 'right';
213           break;
214         case 40:
215           this.snake.direction = 'bottom';
216           break;
217 
218        // 65 - left
219       // 87 - top
220       // 68 - right
221       // 83 - bottom
222     
223         case 65: 
224           this.snake.direction = 'left';
225           break;
226         case 87:
227           this.snake.direction = 'top';
228           break;
229         case 68:
230           this.snake.direction = 'right';
231           break;
232         case 83:
233           this.snake.direction = 'bottom';
234           break;
235      }
236     }.bind(that), false);
237   }
238 
239    // 私有的函数  让蛇移动
240    function runSnake() {
241      var timerId = setInterval(function () {
242        // 让蛇走一格
243        // 在定时器的function中this是指向window对象的
244        // this.snake
245        // 要获取游戏对象中的蛇属性
246        this.snake.move(this.food, this.map);
247        this.snake.render(this.map);
248 
249         // 2.2  当蛇遇到边界游戏结束
250         // 获取蛇头的坐标
251         var maxX = this.map.offsetWidth / this.snake.width;
252         var maxY = this.map.offsetHeight / this.snake.height;
253         var headX = this.snake.body[0].x;
254         var headY = this.snake.body[0].y;
255         if (headX < 0 || headX >= maxX) {
256           alert('Game Over');
257           clearInterval(timerId);
258         }
259 
260         if (headY < 0 || headY >= maxY) {
261           alert('Game Over');
262           clearInterval(timerId);
263         }
264      }.bind(that), 150);
265    }
266 
267   // 暴露构造函数给外部
268   window.Game = Game;
269 })(window, undefined)
270 
271 // -------------------调用------------------
272 ;(function (window, undefined) {
273   var map = document.getElementById('map');
274   var game = new Game(map);
275   game.start();
276 })(window, undefined)

运行效果截图

其他补充

这是一个简单的贪吃蛇，很多功能没有实现，喜欢的小伙伴可以继续往下做。

任何时候不要吝啬您的赞美，喜欢就点赞拉~，

PS:

JavaScript 实现简易版贪吃蛇（Day_13）

使用语言

概述

Html 页面

CSS 页面

JavaScript 部分

运行效果截图

其他补充

如果，您希望更容易地发现我的新博客，不妨点击一下关注。

如果你觉得本篇文章对你有所帮助，请给予我更多的鼓励，

因为，我的写作热情也离不开您的肯定支持，感谢您的阅读，我是【肥肥也】！