贪吃蛇

这个贪吃蛇是在网上看到的一个例子,于是自己模仿着写了一个

html代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>贪吃蛇</title>
 5     <meta charset="UTF-8">
 6     <meta name="keywords" content="贪吃蛇">
 7     <meta name="Description" content="这是一个初学者用来学习的小游戏">
 8     <style type="text/css">
 9 /*     *{margin:0;} */
10     .map{
11         margin:100px auto;
12         height:600px;
13         width:900px;
14         background:#00D0FF;
15         border:10px solid #AFAEB2;
16         border-radius:8px;
17     }
18     </style>
19 </head>
20  
21 <body>
22 <div class="map">
23     <canvas id="canvas" height="600" width="900"></canvas>
24 </div>
25  
26 <script src="snake.js"> </script>
27 </body>
28 </html>

JavaScript代码:

  1  
  2     //获取绘制工具
  3     var c=document.getElementById("canvas");
  4     var ctx=c.getContext("2d");
  5  
  6     var snake =[];//定义一条蛇，画蛇的身体
  7     var snakeCount = 6;//初始化蛇的长度
  8     var foodx =0;
  9     var foody =0;
 10     var togo =0;
 11     function drawtable()//画地图的函数
 12     {
 13         for(var i=0;i<60;i++)//画竖线
 14         {
 15             ctx.strokeStyle="yellow";
 16             ctx.beginPath();
 17             ctx.moveTo(15*i,0);
 18             ctx.lineTo(15*i,600);
 19             ctx.closePath();
 20             ctx.stroke();
 21         }
 22         for(var j=0;j<40;j++)//画横线
 23         {
 24             ctx.strokeStyle="yellow";
 25             ctx.beginPath();
 26             ctx.moveTo(0,15*j);
 27             ctx.lineTo(900,15*j);
 28             ctx.closePath();
 29             ctx.stroke();
 30         }
 31         
 32         for(var k=0;k<snakeCount;k++)//画蛇的身体
 33             {
 34             ctx.fillStyle="black";
 35             if(k==snakeCount-1)
 36             {
 37                 ctx.fillStyle="red";//蛇头的颜色与身体区分开
 38             }
 39             ctx.fillRect(snake[k].x,snake[k].y,15,15);//前两个数是矩形的起始坐标，后两个数是矩形的长宽。
 40             
 41             }
 42             //绘制食物    
 43             ctx.fillStyle ="black";
 44             ctx.fillRect(foodx,foody,15,15);
 45         // ctx.fill();
 46     }
 47      
 48     function start()//定义蛇的坐标
 49     {
 50         //var snake =[];//定义一条蛇，画蛇的身体
 51         //var snakeCount = 6;//初始化蛇的长度
 52         //蛇总是从左上角出发
 53         for(var k=0;k<snakeCount;k++)
 54             {
 55                 snake[k]={x:k*15,y:0};    
 56             }
 57           drawtable();
 58           addfood();//在start中调用添加食物函数 
 59     }
 60  
 61     function addfood()
 62     {
 63     foodx = Math.floor(Math.random()*60)*15; //随机产生一个0-1之间的数
 64     foody = Math.floor(Math.random()*40)*15;
 65         
 66         for (var k=0;k<snake;k++)
 67         {
 68             if (foodx==snake[k].x&&foody==sanke[k].y)//防止产生的随机食物落在蛇身上
 69             {    
 70             addfood();
 71             }
 72         }
 73     }    
 74 
 75    function move()
 76    {
 77     switch (togo)
 78     {
 79     case 1: snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y}); break;//向左走
 80     case 2: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y-15}); break;
 81     case 3: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y}); break;
 82     case 4: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y+15}); break;
 83     case 5: snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y-15}); break;
 84     case 6: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y+15}); break;
 85     default: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y});
 86     }
 87     snake.shift();//删除数组第一个元素
 88        ctx.clearRect(0,0,900,600);//清除画布重新绘制
 89        isEat();
 90     isDead();
 91     drawtable();
 92    }             
 93    
 94    function keydown(e)
 95    {
 96    switch(e.keyCode)
 97         {
 98          case 37: togo=1; break;
 99          case 38: togo=2; break;
100          case 39: togo=3; break;
101          case 40: togo=4; break;
102          case 65: togo=5; break;
103          case 68: togo=6; break;
104         }
105    }
106    
107    function isEat()//吃到食物后长度加1
108    {
109     if(snake[snakeCount-1].x==foodx&&snake[snakeCount-1].y==foody)
110    {
111         addfood();
112         snakeCount++;
113         snake.unshift({x:-15,y:-15});
114    }
115    
116    }
117    
118    function isDead()
119    {
120     if (snake[snakeCount-1].x>885||snake[snakeCount-1].y>585||snake[snakeCount-1].x<0||snake[snakeCount-1].y<0)
121         {
122         alert("You are dead,GAME OVER!!!");
123         clearInterval(move);
124         //window.location.reload();
125         }
126    }
127    
128     document.onkeydown=function(e)
129 {
130     keydown(e);
131  
132 } 
133 window.onload = function()//调用函数
134 { 
135     start();
136     setInterval(move,100);
137 //    drawtable();
138 }