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>

 

27人参与, 0条评论 登录后显示评论回复

你需要登录后才能评论 登录/ 注册