Question

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

我的源代码在这里： var canvas; var ctx; var gameLoop; var img = new Image（）; 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;

var 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>

如果按右箭头执行代码，则图像向右移动。但是，你怎么会让腿来回移动，所以它看起来更像人类和现实。

我如何为我的精灵制作动画，但是有类似人类的动作？

0 个答案: