1 < span style="color: #ff00ff;">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>Eating snaketitle>
9 < link rel="stylesheet" href="snake.css">
10 head>
11
12 < body>
13 < div id="map">
14
17
23
24
30 div>
31
32 < script src="all.js">script>
33
34
35 < script>
36 // Get map elements on the page
37 var map = document.querySelector('#map');
38 // Created a food object
39 // var food1 = new Food(map);
40 // // Randomize the food
41 // food1.randomLoaction();
42
43 var game = new Game(map);
44 game.start();
45 script>
46 body>
47
48 html>
CSS code:
1 /* Map*/
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 /* Snake head, snake body, basic food style*/
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 /* Snake's body*/
27
28 .snake-body {
29 background: pink;
30}
31
32
33 /* Snake head style*/
34
35 .snake-head {
36 background-color: red;
37}
38
39
40 /* Food*/
41
42 .food {
43 background-color: #00ff00;
44 }
JS code:
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< span style="color: #000000;">;
12 var maxY = 600/20-1< span style="color: #000000;">;
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 = < span style="color: #0000ff;">this.x + "px";
18 this.div.style.top = < span style="color: #0000ff;">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("I can't think about it anymore");
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 };
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
17
23
24
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>
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 }
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 };