原生js贪吃蛇 

  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>

 

posted @ 2018-02-12 15:35  ITBoy-Men  阅读(142)  评论(0)    收藏  举报