贪食蛇 - 爱码网

  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>Snake</title>
  6 <style>
  7 canvas{width:100%;height:100%;border:solid 1px;}
  8 </style>
  9 </head>
 10 
 11 <body>
 12 <canvas id="snake" width="600" height="400">
 13 </canvas>
 14 <button id="startGame">Start Game</button>
 15 <script>
 16 var ctx=document.querySelector("#snake").getContext("2d"); 
 17 var startBtn=document.querySelector("#startGame");
 18 var snake=[{x:-1,y:-1}];//蛇
 19 var perLen=9;//单位长度
 20 var food={x:-1,y:-1};//食物
 21 var direction;//蛇移动的方向
 22 window.onload=function(){
 23 startBtn.addEventListener("click",initGame,false);
 24 }
 25 var initGame=function(){
 26 startBtn.disabled = true;//如果游戏已经开始了，就不要再点了。
 27 snake[0].x= Math.floor(Math.random() *59)*10;
 28 snake[0].y= Math.floor(Math.random() * 39)*10;
 29 direction=Math.ceil(Math.random()*4);
 30 //direction=2;//test
 31 for(i=0;i<3;i++){
 32 switch(direction){
 33 case 1:
 34 snake.push({ x: snake[i].x, y:snake[i].y+10 });
 35 break;
 36 case 2:
 37 snake.push({ x: snake[i].x-10, y:snake[i].y });
 38 break;
 39 case 3:
 40 snake.push({ x: snake[i].x, y:snake[i].y -10});
 41 break;
 42 case 4:
 43 snake.push({ x: snake[i].x+10, y:snake[i].y });
 44 break;
 45 }
 46 }
 47 for(i=0;i<snake.length;i++){//画个蛇
 48 ctx.fillStyle = '#FF0000';
 49 ctx.fillRect(snake[i].x,snake[i].y,perLen,perLen);
 50 }
 51 setInterval(function(){snakeMove(direction)},200);
 52 //snakeMove(direction);//test
 53 drawFood();
 54 document.onkeydown = function (e) {
 55 var key = e.keyCode || e.which || e.charCode;
 56 if ((key == 38 || key == 87)&&direction!=3) direction=1; //上或者W被按下
 57 if ((key == 39 || key == 68)&&direction!=4) direction=2; //右或者D被按下
 58 if ((key == 40 || key == 83)&&direction!=1) direction=3; //下或者S被按下
 59 if ((key == 37 || key == 65)&&direction!=2) direction=4; //左或者A被按下
 60 }
 61 }
 62 var drawFood=function(){
 63 while(food.x==snake[0].x&&food.y==snake[0].y||food.x==-1){//食物不能与蛇头重复
 64 food.x= Math.floor(Math.random() *59)*10;
 65 food.y= Math.floor(Math.random() * 39)*10;
 66 }
 67 ctx.fillStyle = '#00FF00';
 68 ctx.fillRect(food.x,food.y,perLen,perLen);//画个吃的    
 69 }
 70 var snakeMove=function(direction){
 71 if(snake[0].x==food.x&&snake[0].y==food.y){
 72 drawFood();
 73 }
 74 else if(snake[0].x==0||snake[0].x==600||snake[0].y==0||snake[0].y==400){
 75 alert("Game Over!");
 76 location.reload();
 77 }
 78 else{
 79 ctx.clearRect(snake[snake.length-1].x,snake[snake.length-1].y,perLen+1,perLen+1);
 80 snake.pop();
 81 }
 82 switch(direction){
 83 case 1:
 84 snake.unshift({x:snake[0].x,y:snake[0].y-10});//向上移动
 85 break;
 86 case 2:
 87 snake.unshift({x:snake[0].x+10,y:snake[0].y});//向右移动
 88 break;
 89 case 3:
 90 snake.unshift({x:snake[0].x,y:snake[0].y+10});//向下移动
 91 break;
 92 case 4:
 93 snake.unshift({x:snake[0].x-10,y:snake[0].y});//向左移动
 94 break;
 95 }
 96 ctx.fillStyle = '#FF0000';
 97 ctx.fillRect(snake[0].x,snake[0].y,perLen,perLen);
 98 }
 99 </script>
100 </body>
101 </html>