0

我正在用 html5 和 javascript 制作这个精灵移动的游戏。我可以很容易地让它移动，这是任何容易的恐惧，我希望它移动具有人类特征。就像如果我按右，它的腿开始来回移动和行走，而不仅仅是整个图像移动。精灵的链接是：http: //i1057.photobucket.com/albums/t384/Kenny00K/16_zps739f55b8.jpg

我的源代码在这里： var canvas; 变量 ctx; var 游戏循环；var img=新图像（）；var whatLoop;

       //The Map Of the game
   var mapx=0;
      var mapy=0;
    var mapw=600;
        var maph=400;

  //Platform 1
     var x1=0;
      var x2=85;
     var x3=350;
     var x4=5;

   //Platform 2
   var y1=330;
   var y2=150;
      var y3=265;
   var y4=5

      //Platform 3
   var z1=100;
    var z2=200;
    var z3=265;
    var z4=5;

   //Platform 4
  var w1=335;
    var w2=275;
    var w3=265;

变量 w4=5;

  //Platform 5
  var a1=100;
   var a2=335;
  var a3=265;
   var a4=5;



    //Good Guy
      x=0;
   y=35;
     xy=5;
    var frames=4;
       var currentFrame=0;


     function game()
    {
      canvas=document.getElementById("myc");
  if(canvas.getContext)
       {
  ctx=canvas.getContext("2d");
       img.src="http://i1057.photobucket.com/…
      gameLoop=setInterval(gamec,25);
       whatLoop=setInterval(whatkey,1);
       window.addEventListener("keydown", whatkey);
      }
    }

       function gamec()
   {

         ctx.fillStyle="black";
          ctx.beginPath();
         ctx.rect(mapx,mapy,mapw,maph);
       ctx.closePath();
     ctx.fill();

    ctx.fillStyle="blue";
         ctx.beginPath();
    ctx.rect(x1,x2,x3,x4);
   ctx.closePath();
    ctx.fill();



     ctx.fillStyle="green";
      ctx.beginPath();
      ctx.rect(y1,y2,y3,y4);
    ctx.closePath();
     ctx.fill();

      ctx.fillStyle="#680000 ";
  ctx.beginPath();
            ctx.rect(z1,z2,z3,z4);
    ctx.closePath();
               ctx.fill();

           ctx.fillStyle="yellow";
                  ctx.beginPath();
               ctx.rect(w1,w2,w3,w4);
                  ctx.closePath();
                ctx.fill();

          ctx.beginPath();
         ctx.drawImage(img,x,y,100,100);
         ctx.closePath();
        ctx.fill();

     ctx.fillStyle="red";
            ctx.beginPath();
                  ctx.rect(a1,a2,a3,a4);
         ctx.closePath();
      ctx.fill();

    }


    function whatkey(evt)
     {
    if(evt.ketCode==39)
 {
         x+=xy;
       }

         }



  </script>
              </head>

    <body onLoad="game()">

   <canvas id="myc" width="800" height="900"></canvas

      </body>
           </html>

一旦你执行代码，如果你按下右箭头，图像就会向右移动。但是，您如何使腿也前后移动，使其看起来更像人类和逼真。

4

0 回答 0