贪吃蛇案列---简洁版

 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 };

贪吃蛇案列---简洁版

猜你喜欢