用JAVASCRIPT写贪食蛇V1.0

最新推荐文章于 2024-07-07 22:26:22 发布

原创最新推荐文章于 2024-07-07 22:26:22 发布 · 421 阅读

0 ·

CC 4.0 BY-SA版权

本文分享了使用JavaScript实现蛇游戏的基本逻辑与代码实践，包括对象属性设计、方向控制、碰撞检测等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初学JAVASCRIPT，第一次尝试写来练手

有一个BUG，问题出在于对象属性的设计逻辑不严谨，不改，当做一次记忆，以后V2.0再改

没有写注释，因为很直观。

直接把全部代码复制在这里：

<html>
<head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
   //2 BUG （more ifo!more Logic!!more model!!）
var snake=function(){
   var position=[[0,0],[1,0],[2,0]];
   var eat=false;
   var alive=true;
   var direction="right";
   return{
       changeDirection:function(playeraction){
           switch (direction)
           {
               case "right":
               {
                   if(playeraction==="left")
                   {
                       playeraction="right";
                   }

               }
               break;
               case "left":
               {
                   if(playeraction==="right")
                   {
                       playeraction="left";
                   }

               }
               break;
               case "up":
               {
                   if(playeraction==="down")
                   {
                       playeraction="up";
                   }

               }
               break;
               case "down":
               {
                   if(playeraction==="up")
                   {
                       playeraction="down";
                   }

               }
               break;
               default:;
           }
           direction=playeraction;
       },
       changeEat:function(foodposition){
           if((foodposition[0]===position[position.length-1][0])&&(foodposition[1]===position[position.length-1][1]))
           {
               eat=true;
           }
           else
           {
               eat=false;
           }
       },
       changeAlive:function(){
           for(var i=0;i<position.length-1;i++)
           {
               if((position[position.length-1][0]===position[i][0])&&(position[position.length-1][1]===position[i][1]))
               {
                   alive=false;
               }
           }
       },
       changePosition:function(){
           var nextPositionX=position[position.length-1][0];
           var nextPositionY=position[position.length-1][1];
           if(alive)
           {
               if(!eat)
               {
                   position.shift();
               }

               switch(direction)
               {
                   case "up":
                   {
                   position.push([nextPositionX,nextPositionY-1]);

                   }
                   break;
                   case "down":
                   {
                   position.push([nextPositionX,nextPositionY+1]);
                   }
                   break;
                   case "left":
                   {
                       position.push([nextPositionX-1,nextPositionY]);
                   }
                   break;
                   case"right":
                   {
                       position.push([nextPositionX+1,nextPositionY]);
                   }
                   break;
                   default:;
               }
           }
           else
           {
           ;
           }
       },
       getPosition:function(){
           return position;
       },
       getEat:function(){
           return eat;
       }
   };
}();

var food=function(){
   var position=[5,5];
   var eat=false;
   return{
       changePosition:function(snakePosition){
           if(eat)
           {
               var x,y;
               var flag=true;
               while(flag)
               {
                   x=Math.round(Math.random()*30);
                   y=Math.round(Math.random()*30);
                   flag=false;
                   for(var i=0;i<snakePosition.length;i++)
                   {
                       if((x===snakePosition[i][0])&&(y===snakePosition[i][1]))
                       {
                           flag=true;
                       }
                   }
               }
               position=[x,y];
           }
       },
       changeEat:function(snakeEat){
           eat=snakeEat;
       },
       getPosition:function(){
           return position;
       }
   };
}();

function getkeynum(e)
{
    var keynum;
    keynum = window.event ? e.keyCode : e.which;
    switch (keynum)
           {
               case 38:
               {
                   snake.changeDirection("up");
               }
               break;
               case 40:
               {
                   snake.changeDirection("down");

               }
               break;
               case 37:
               {
                   snake.changeDirection("left");

               }
               break;
               case 39:
               {
                   snake.changeDirection("right");

               }
               break;
               default:
               ;//
           }
}
      function draw(snakePosition,foodPosition)
       {
           var canvas = document.getElementById('tutorial');
           if (canvas.getContext){
               var ctx = canvas.getContext('2d');
               ctx.clearRect(0,0,600,310);
ctx.fillStyle="red";
               ctx.fillRect(foodPosition[0]*10,foodPosition[1]*10,10,10);
               for(var i=0;i<snakePosition.length;i++)
                   {
                       ctx.fillStyle="black";
                       ctx.fillRect(snakePosition[i][0]*10,snakePosition[i][1]*10,10,10);
                   }
               ctx.fillText(snake.getPosition()[snake.getPosition().length-1],300,10);
               ctx.fillText(food.getPosition(),300,30);

           }
       }

var play=function(){
   snake.changeAlive();
   snake.changeEat(food.getPosition());
   food.changeEat(snake.getEat());
   food.changePosition(snake.getPosition());
   snake.changePosition();
   draw(snake.getPosition(),food.getPosition());
}
window.setInterval(play, 50);
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
</head>
<body onkeydown="getkeynum(event);" >
    <canvas id="tutorial" width="600" height="310"></canvas>
</body>
</html>