html+css+JavaScript贪吃蛇
写文记录一下最近新完成的贪吃蛇游戏案例，用到了html、css和JavaScript，难度不高，适合刚入坑的同学练习，欢迎大家交流。
下面贴源码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>贪吃蛇游戏界面</title> 6 <style> 7 *{ 8 font-family: "微软雅黑"; 9 } 10 11 #map{ 12 width: 600px; 13 height: 600px; 14 background: cadetblue; 15 position: absolute; 16 left: 10px; 17 top: 60px; 18 overflow: hidden; 19 } 20 21 input{ 22 padding: 10px; 23 background: black; 24 color: #ffffff; 25 } 26 </style> 27 </head> 28 <!--捕获键盘按键--> 29 <body onkeydown="control(event);" > 30 <div class="top" > 31 <input type="button" value="开始游戏" id="start_btn" onclick="start();test(this)"/> 32 33 <span>得分：</span><span id="score"></span> 34 </div> 35 <div id="map" ></div> 36 37 38 <script type="text/javascript"> 39 var snake_left = Math.floor(Math.random() * 26) * 20; //游戏开始时，蛇的位置 40 var snake_top = Math.floor(Math.random() * 30) * 20; 41 var map = document.getElementById("map"); 42 var snakes = [];//蛇的关节 43 var stepX = 20; 44 var stepY = 0; 45 var snake_direction="right"; 46 var timer; 47 48 //开始按钮点击一次后失效 49 function test(obj){ 50 51 obj.disabled=true; 52 obj.value="游戏开始中" 53 } 54 55 //点击“开始按钮” 开始游戏 56 //document.getElementById("start_btn").onclick = function (){ 57 function start(){ 58 //游戏开始，蛇头放到数组的第一项 59 for(var i = 2; i>=0;i--){ 60 drawSnake(i); 61 } 62 63 //蛇的移动 64 snakeMove(); 65 66 //碰到墙壁死掉 67 overDiv(); 68 69 //产生食物 70 food(); 71 72 //吃掉食物 73 eat(); 74 } 75 76 //让蛇移动 77 function snakeMove(){ 78 79 //蛇尾 的位置等于 上一个 80 for(var i=snakes.length-1;i>0;i--){ 81 snakes[i].style.left = snakes[i-1].style.left; 82 snakes[i].style.top = snakes[i-1].style.top; 83 } 84 85 //snakes数组的第零项是蛇头 86 snakes[0].style.left = parseInt(snakes[0].style.left) + stepX +"px"; 87 snakes[0].style.top = parseInt(snakes[0].style.top) + stepY +"px"; 88 89 timer = setTimeout("snakeMove()",400); 90 } 91 92 //画出蛇身 93 function drawSnake(num){ 94 var snakeNode = document.createElement("div"); 95 snakeNode.style.position = "absolute"; 96 snakeNode.style.top = "0px"; 97 snakeNode.style.left = num * 20+"px"; 98 snakeNode.style.background = "coral"; 99 100 //如果设置div边框 20*20 18*18 1 101 //snakeNode.style.border = "1px solid #333"; 102 snakeNode.style.width = "20px"; 103 snakeNode.style.height = "20px"; 104 105 snakes.push(snakeNode); 106 107 map.appendChild(snakeNode); 108 109 110 } 111 112 function re_move(){ 113 clearTimeout(timer); 114 snakeMove() 115 116 } 117 118 //控制方向 119 function control(event){ 120 var n = event.keyCode; 121 switch(n){ 122 case 37:// 左 蛇在向右跑的过程中按左是不起作用的 123 if(snake_direction=="right"){ 124 break; 125 }else{ 126 stepX = -20; 127 stepY = 0; 128 snake_direction="left"; 129 } 130 re_move(); 131 break; 132 133 case 40://下 蛇在向下跑的过程中 按上是不起作用的 134 if(snake_direction=="up"){ 135 break; 136 }else{ 137 stepX = 0; 138 stepY = 20; 139 snake_direction="down"; 140 } 141 re_move(); 142 break; 143 144 case 38:// 上 蛇在向下跑的过程中按左是不起作用的 145 if(snake_direction=="down"){ 146 break; 147 }else{ 148 stepX = 0; 149 stepY = -20; 150 snake_direction="up"; 151 } 152 re_move(); 153 break; 154 155 case 39://下 蛇在向下跑的过程中 按上是不起作用的 156 if(snake_direction=="left"){ 157 break; 158 }else{ 159 stepX = 20; 160 stepY = 0; 161 snake_direction="right"; 162 } 163 re_move(); 164 break; 165 166 167 168 169 } 170 171 } 172 173 //判断是否碰到墙壁 174 function overDiv(){ 175 176 //计算得分 177 var score = document.getElementById("score"); 178 score.innerHTML = (snakes.length-3)*10; 179 180 var x = parseInt(snakes[0].style.left); //snakes[0]代表蛇头 181 var y = parseInt(snakes[0].style.top); 182 183 //判断是否碰到墙壁 184 if(x<0||x>580||y<0||y>580){ 185 alert("Game Over"); 186 window.location.reload(); 187 } 188 189 //判断是否吃到自己 190 if(snakes.length > 4){ 191 for(var i=3;i<snakes.length-1;i++){ 192 var x1 = parseInt(snakes[i].style.left); 193 var y1 = parseInt(snakes[i].style.top); 194 195 if(x==x1 && y==y1){ 196 alert("Game Over"); 197 window.location.reload(); 198 } 199 } 200 } 201 202 setTimeout("overDiv()",30); 203 } 204 205 //产生食物 206 function food(){ 207 208 var food_x = Math.floor(Math.random()*29+1)*20 + "px"; 209 var food_y = Math.floor(Math.random()*29+1)*20 + "px"; 210 //画出食物 211 var food_div = document.createElement("div"); 212 213 food_div.style.position = "absolute"; 214 food_div.style.top = food_y; 215 food_div.style.left = food_x; 216 217 food_div.style.backgroundColor = "orange"; 218 //food_div.style.border = "1px solid #333"; 219 food_div.style.width = "20px"; 220 food_div.style.height = "20px"; 221 222 //给食物加id 223 food_div.id = "i_food"; 224 map.appendChild(food_div); 225 226 } 227 228 //吃掉食物 229 function eat(){ 230 //得到蛇头坐标 231 var x1 = parseInt(snakes[0].style.left); 232 var y1 = parseInt(snakes[0].style.top); 233 234 //得到食物坐标 235 var i_food = document.getElementById("i_food"); 236 237 var x2 = parseInt(i_food.style.left); 238 var y2 = parseInt(i_food.style.top); 239 240 if(Math.abs(x1-x2)<20 && Math.abs(y1-y2)<20){ 241 242 snakes.push(i_food); 243 i_food.id = ""; 244 245 //生成食物 246 food(); 247 } 248 249 setTimeout("eat()",30); 250 } 251 </script> 252 </body> 253 </html>
