原生js貪吃蛇

時間 2019-11-18
原文原文鏈接
  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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。