1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta charset="utf-8"> 6 <style> 7 ul{ 8 margin:0 auto; 9 600px; 10 } 11 li{ 12 border-radius:10px; 13 box-sizing:border-box; 14 list-style:none; 15 float:left; 16 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("游戏结束"+" "+"最终得分"+score); 174 return 0 ; 175 } 176 for(var i=1;i<snake.length;i++){ 177 if(snake[0]==snake[i]){ 178 alert("游戏结束"+" "+"最终得分"+score); 179 return 0; 180 } 181 } 182 return 1; 183 184 } 185 186 187 </script> 188 </html>