html代码：
1 <div class="content">
2 <div class="btn startBtn"> <!-- 开始按钮 -->
3 <button type="button"></button>
4 </div>
5 <div class="btn stopBtn"> <!-- 暂停按钮 -->
6 <button type="button"></button>
7 </div>
8 <div id="snakeWrap"></div> <!-- 主题内容 -->
9 </div>
css代码：
1 * {
2 margin: 0;
3 padding: 0;
4 }
5 body {
6 background-color: #565F65;
7 width: 100%;
8 height: 10vh;
9 overflow: hidden;
10 }
11
12 .content {
13 width: 500px;
14 height: 500px;
15 position: absolute;
16 top: 50%;
17 left: 50%;
18 margin-top: -250px;
19 margin-left: -250px;
20 background-color: #565F65;
21 border: 10px solid #E7E7E7;
22 box-shadow: inset 0px 0px 5px 2px #000;
23 }
24 .btn {
25 width: 100%;
26 height: 100%;
27 position: absolute;
28 top: 0;
29 left: 0;
30 background-color: rgba(0, 0, 0, .3); /*游戏未开始时和暂停时的遮罩*/
31 z-index: 2;
32 }
33 .btn button {
34 background: none;
35 border: none;
36 background-size: 100% 100%;
37 cursor: pointer;
38 outline: none;
39 position: absolute;
40 left: 50%;
41 top: 50%;
42 }
43 .startBtn button{
44 width: 170px;
45 height: 80px;
46 background-image: url(img/startbtn.png);
47 margin-top: -40px;
48 margin-left: -85px;
49 }
50 .stopBtn {
51 display: none;
52 }
53 .stopBtn button{
54 width: 70px;
55 height: 70px;
56 background-image: url(img/stopbtn.png);
57 margin-top: -35px;
58 margin-left: -35px;
59 }
60
61 #snakeWrap {
62 width: 500px;
63 height: 500px;
64 position: relative;
65 }
66 .snakeHead { /*蛇头样式*/
67 background-color: aqua;
68 border-radius: 50%;
69 }
70 .snakeBody { /*蛇身样式*/
71 background-color: navajowhite;
72 border-radius: 50%;
73 }
74 .food { /*食物样式*/
75 background-image: url(img/food.png);
76 background-size: cover;
77 }
javascript 代码：
1 var sw = 20, //一个方块的宽
2 sh = 20, //一个方块的高
3 tr = 25, //行数
4 td = 25; //列数
5 var snake = null, //蛇的实例
6 food = null, //食物的实例
7 game = null; //游戏的实例
8 function Square(x, y, classname) {
9 this.x = x * sw; //方块实际的位置
10 this.y = y * sh; //方块实际的位置
11 this.class = classname;
12
13 this.viewContent = document.createElement('div'); //方块对应的DOM元素
14 this.viewContent.className = this.class;
15 this.parent = document.getElementById('snakeWrap'); //方块的父级
16 }
17
18 Square.prototype.create = function() { //创建方块 DOM,并添加到页面里
19 this.viewContent.style.position = 'absolute';
20 this.viewContent.style.width = sw + 'px';
21 this.viewContent.style.height = sh + 'px';
22 this.viewContent.style.left = this.x + 'px';
23 this.viewContent.style.top = this.y + 'px';
24
25 this.parent.appendChild(this.viewContent);
26 };
27
28 Square.prototype.remove = function() {
29 this.parent.removeChild(this.viewContent);
30 }
31
32 //蛇
33 function Snake() {
34 this.head = null; //存一下蛇头的信息
35 this.tail = null; //存一下蛇尾的信息
36 this.pos = []; //存储蛇身上的每一个方块的位置,二维数组
37
38 this.directionNum = { //存储蛇走的方向,用一个对象来表示
39 left : {
40 x : -1,
41 y : 0,
42 rotate : 180
43 },
44 right : {
45 x : 1,
46 y : 0,
47 rotate : 0
48 },
49 up : {
50 x : 0,
51 y : -1,
52 rotate : -90
53 },
54 down : {
55 x : 0,
56 y : 1,
57 rotate : 90
58 }
59 }
60 }
61
62 Snake.prototype.init = function() {
63 //创建蛇头
64 var snakeHead = new Square(2, 0, 'snakeHead');
65 snakeHead.create();
66 this.head = snakeHead; // 存储蛇头信息
67 this.pos.push([2, 0]); //把蛇头的位置存起来
68
69 //创建蛇身体
70 var snakeBody1 = new Square(1, 0, 'snakeBody');
71 snakeBody1.create();
72 this.pos.push([1, 0]); //把蛇身1的位置存起来
73
74 var snakeBody2 = new Square(0, 0, 'snakeBody');
75 snakeBody2.create();
76 this.tail = snakeBody2; //把蛇尾的信息存起来
77 this.pos.push([0, 0]); //把蛇身1的位置存起来
78
79 //让蛇头蛇身形成链表关系
80 snakeHead.last = null;
81 snakeHead.next = snakeBody1;
82
83 snakeBody1.last = snakeHead;
84 snakeBody1.next = snakeBody2;
85
86 snakeBody2.last = snakeBody1;
87 snakeBody2.next = null;
88
89 //给蛇添加一条属性,用来表示蛇走的方向
90 this.direction = this.directionNum.right; //默认让蛇往右走
91
92 }
93
94 //这个方法用来获取蛇头的下一个位置对应的元素, 要根据元素做不同的事情
95 Snake.prototype.getNextPos = function() {
96 var nextPos = [ //蛇头要走的下一个点的坐标
97 this.head.x/sw + this.direction.x,
98 this.head.y/sh + this.direction.y
99 ];
100
101 //下一个点是自己,代表撞到了自己,游戏结束
102 var selfCollind = false; //是否撞到自己
103 this.pos.forEach(function(value) {
104 if(value[0] == nextPos[0] && value[1] == nextPos[1]) {
105 //如果数组中的两个数据都相等,就说明下一个点在蛇身上里面能找到,代表撞到自己了
106 selfCollind = true;
107 }
108 });
109 if(selfCollind) {
110 console.log('撞到自己了!');
111
112 this.strategies.die.call(this);
113
114 return;
115 }
116
117 //下一个点是墙,游戏结束
118 if(nextPos[0] < 0 || nextPos[1] < 0 || nextPos[0] > td - 1 || nextPos[1] > tr - 1) {
119 console.log('撞墙了!');
120
121 this.strategies.die.call(this);
122
123 return;
124 }
125 //下一个点是食物,吃
126 if(food && food.pos[0] == nextPos[0] && food.pos[1] == nextPos[1]) {
127 //如果这个条件成立说明现在蛇头要走的下一个点是食物的那个点
128 console.log('撞到食物了了!');
129 this.strategies.eat.call(this);
130 return;
131 }
132 //下一个点什么都不是,走
133 this.strategies.move.call(this);
134 };
135
136 //处理碰撞后要做的事
137 Snake.prototype.strategies = {
138 move : function(format) { //这个参数用于决定要不要删除最后一个方块(蛇尾), 当传了这个参数后就表示要做的事情是吃
139 //创建新身体(在蛇头位置)
140 var newBody = new Square(this.head.x/sw, this.head.y/sh, 'snakeBody');
141 //更新链表关系
142 newBody.next = this.head.next;
143 newBody.next.last = newBody;
144 newBody.last = null;
145
146
147 this.head.remove(); //旧舌头从原来的位置删除
148 newBody.create();
149
150 //创建一个新蛇头(蛇头下一个要走到的点)
151 var newHead = new Square(this.head.x/sw + this.direction.x, this.head.y/sh + this.direction.y, 'snakeHead')
152 //更新链表关系
153 newHead.next = newBody;
154 newHead.last = null;
155 newBody.last = newHead;
156 newHead.viewContent.style.transform = 'rotate('+this.direction.rotate+'deg)';
157 newHead.create();
158
159
160 //蛇身上每一个方块的坐标也要更新
161 this.pos.splice(0,0, [this.head.x/sw + this.direction.x, this.head.y/sh + this.direction.y]);
162 this.head = newHead; //还要把this.head的信息更新一下
163
164 if(!format) { //如何format 的值为 false, 表示需要删除(除了吃之外的操作)
165 this.tail.remove();
166 this.tail = this.tail.last;
167
168 this.pos.pop();
169 }
170
171 },
172 eat : function() {
173 this.strategies.move.call(this, true);
174 createFood();
175 game.score ++;
176 },
177 die : function() {
178 game.over();
179 }
180 }
181
182 snake = new Snake();
183
184 //创建食物
185 function createFood() {
186 //食物小方块的随机坐标
187 var x = null;
188 var y = null;
189
190 var include = true; //循环跳出的条件, true表示食物的坐标在蛇身上(需要继续循环),false表示食物坐标不在蛇身上(不循环了)
191 while(include) {
192 x = Math.round(Math.random() * (td - 1)); //0-29
193 y = Math.round(Math.random() * (tr - 1));
194
195 snake.pos.forEach(function(value) {
196 if(x != value[0] && y != value[1]) {
197 //这个条件成立说明现在随机出来的这个坐标,在蛇身上并没有找到
198 include = false;
199 }
200 });
201
202 }
203 //生成食物
204 food = new Square(x, y, 'food');
205 food.pos = [x,y]; //存储一下生成食物的坐标,用于跟蛇头要走的下一个点作对比
206 var foodDom = document.querySelector('.food');
207 if(foodDom) {
208 foodDom.style.left = x*sw + 'px';
209 foodDom.style.top = y*sh + 'px';
210 }else {
211 food.create();
212 }
213 }
214
215
216
217 //创建游戏逻辑
218 function Game() {
219 this.timer = null;
220 this.score = 0;
221 this.speed = 200;
222 }
223 Game.prototype.init = function() {
224 snake.init();
225 snake.getNextPos();
226 createFood();
227
228 document.onkeydown = function(ev) { //用户按下方向键触发事件
229 if(ev.which == 37 && snake.direction != snake.directionNum.right) {
230 //用户按下左键是,蛇不能是往右走
231 snake.direction = snake.directionNum.left;
232 }else if(ev.which == 38 && snake.direction != snake.directionNum.dowm) {
233 snake.direction = snake.directionNum.up;
234 }else if(ev.which == 39 && snake.direction != snake.directionNum.left) {
235 snake.direction = snake.directionNum.right;
236 }else if(ev.which == 40 && snake.direction != snake.directionNum.up) {
237 snake.direction = snake.directionNum.down;
238 }
239 }
240
241 this.start();
242 }
243
244 Game.prototype.start = function() { //开始游戏
245 this.timer = setInterval(function() {
246 snake.getNextPos();
247
248 }, this.speed);
249 }
250 Game.prototype.pause = function() {
251 clearInterval(this.timer);
252 }
253 Game.prototype.over = function() { //开始游戏
254 clearInterval(this.timer);
255 alert('你的得分为' + this.score);
256
257 //游戏回到最初的状态
258 var snakeWrap = document.getElementById('snakeWrap');
259 snakeWrap.innerHTML = '';
260 snake = new Snake();
261 game = new Game();
262 var startBtnWrap = document.querySelector('.startBtn');
263 startBtnWrap.style.display = 'block';
264 }
265 //开启游戏
266 game = new Game();
267 var startBtn = document.querySelector('.startBtn button');
268 startBtn.onclick = function() {
269 startBtn.parentNode.style.display = 'none';
270 game.init();
271 };
272
273
274 //暂停
275 var snakeWrap = document.getElementById('snakeWrap');
276 var puseBtn = document.querySelector('.stopBtn button')
277 snakeWrap.onclick = function() {
278 game.pause();
279 puseBtn.parentNode.style.display = 'block';
280 }
281
282 puseBtn.onclick =function() {
283 game.start();
284 puseBtn.parentNode.style.display = 'none';
285 }