1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <meta charset="utf-8">
6 <style>
7 ul{
8 margin:0 auto;
9 width:600px;
10 }
11 li{
12 border-radius:10px;
13 box-sizing:border-box;
14 list-style:none;
15 float:left;
16 width:30px;
17 height:30px;
18 border:1px solid #6495ED;
19 }
20 .snake{
21 background-color:black;
22 }
23 .food{
24 background-color:red;
25 }
26 .headSnake{
27 background-color:green
28 }
29 </style>
30 </head>
31 <body>
32 <ul></ul>
33 </body>
34 <script>
35 //50X50格子，用二位数组取
36 var deskArr = [];
37 //创建文档片段
38 var fragment = document.createDocumentFragment() ;
39 for(var i=0;i<20;i++){
40 var rowArr = [];
41 for(var j=0;j<20;j++){
42 var li = document.createElement("li");
43 fragment.appendChild(li);
44 rowArr.push(li);
45 }
46 deskArr.push(rowArr);
47 }
48 document.querySelector("ul").appendChild(fragment);
49 //蛇数组
50 var snake = [];
51 //分数
52 var score = 0;
53 //蛇头1-18
54 var headNumX = parseInt(Math.random()*(17)+1);
55 //蛇头0-19
56 var headNumY = parseInt(Math.random()*19);
57 //改变蛇头的颜色
58 snake.push(deskArr[headNumY][headNumX]);
59 snake.push(deskArr[headNumY][headNumX-1]);
60 snake[0].className = "headSnake";
61 snake[1].className = "snake";
62 //console.log(snake);
63
64 //蛇移动
65 //蛇移动的速度
66 var speed = 500;
67 //蛇移动的默认方向
68 var dir = "right";
69 //是否showFood
70 var food = 1;
71 //吃到食物的标志
72 var foodFlag = false;
73 function snakeMove(){
74 if(food==1){
75 foodShow();
76 food=0;
77 }
78 /*键盘事件
79 当向上键并且默认方向不是下时，dir="up"
80 当向下键时，dir="down"
81 当向左键时，dir="left"
82 当向右键时，dir="right"
83 */
84 document.onkeydown = function(){
85 var event= window.event||arguments[0];
86 if(event.keyCode==37&&dir!="right"){
87 dir = "left";
88 }else if(event.keyCode == 38&&dir!="down"){
89 dir = "up";
90 }else if(event.keyCode == 40&&dir!="up"){
91 dir = "down";
92 }else if(event.keyCode == 39&&dir!="left"){
93 dir = "right";
94 }
95 }
96 //方向判断
97 switch (dir)
98 {
99 case "right":
100 headNumX++;
101 break;
102 case "left":
103 headNumX--;
104 break;
105 case "up":
106 headNumY--;
107 break;
108 case "down":
109 headNumY++;
110 break;
111
112 }
113 snake[snake.length-1].className = "";
114 snake.pop();
115 snake[0].className="snake";
116 snake.unshift(deskArr[headNumY][headNumX]);
117 snake[0].className = "headSnake";
118 //判断是否吃到食物
119 if(snake[0]==deskArr[foodY][foodX]){
120 snake[0].className="snake";
121 if(dir =="up"){
122 headNumY--;
123 }else if(dir =="down"){
124 headNumY++;
125 }else if(dir =="left"){
126 headNumX--;
127 }else if(dir =="right"){
128 headNumX++;
129 }
130 snake.unshift(deskArr[headNumY][headNumX]);
131 snake[0].className="headSnake";
132 score++;
133
134 foodShow();
135
136 }
137 liveOrDie()&&(setTimeout(snakeMove,speed));
138
139 }
140 setTimeout(snakeMove,speed)
141
142 //随机生成一个食物
143 /*
144 随机生成foodX，foodY
145 0-19 0-19
146 判断该位置是否与身体重合
147 若重合，则重新取值
148 若不重合，则显示food
149 */
150 var foodX;
151 var foodY;
152 function foodShow(){
153 foodX = parseInt(Math.random()*17+1);
154 foodY = parseInt(Math.random()*17+1);
155 var flag = 0;
156 for(var i=0;i<snake.length;i++){
157 (snake[i]==deskArr[foodY][foodX])&&(flag=1);
158 }
159 !flag?
160 deskArr[foodY][foodX].className = "food"
161 :foodShow();
162 }
163 /*判断是否游戏失败
164 1.撞墙
165 头的坐标Y 小于0或者大于19
166 头的坐标X 小于0或者大于19
167 2.撞到自己的身体
168 循环，当两个对象一样时，
169 */
170 function liveOrDie(){
171 console.log(headNumX);
172 if(headNumX>19||headNumX<0||headNumY>19||headNumY<0){
173 alert("游戏结束"+"\n"+"最终得分"+score);
174 return 0 ;
175 }
176 for(var i=1;i<snake.length;i++){
177 if(snake[0]==snake[i]){
178 alert("游戏结束"+"\n"+"最终得分"+score);
179 return 0;
180 }
181 }
182 return 1;
183
184 }
185
186
187 </script>
188 </html>
