Question

这是代码： https://jsfiddle.net/test123456978911337/cbL95gne/3/

当你点击旋转时，精灵开始＃34;掉落＆＃34;错误的，倾斜的，但当然，它也旋转。可以＆＃34;下降＆＃34;动画被编辑，所以只有精灵旋转，但它会以与非旋转精灵相同的方式落下吗？

感谢您的帮助

这里有一些代码，否则我无法提出这个问题。

 ctx.save();
 ctx.translate(0, 0);
 ctx.rotate(350 * Math.PI / 180);
 ctx.drawImage(img, sprites.birds.bird2.x, sprites.birds.bird2.y, sprites.birds.bird2.width, sprites.birds.bird2.height, this.x, this.y, sprites.birds.bird2.width, sprites.birds.bird2.height);
 ctx.restore();

Answer 1

我已经更新了plz看看

     <body>
  <style>
    #button1 {
      width: 102px;
      height: 30px;
      color: #ffffff;
      background-color: #03a9f4;
      border-radius: 11px;
      border: 0px;
      outline: 0px;
      cursor: pointer;
    }

  </style>
  <div id="canvas_container" style="text-align: center;">
    <input type="button" value="rotate" id="button1">
  </div>
  <script type="text/javascript">
    var canvas, ctx, world, bird;

    var img = new Image();
    var sprites = {
      birds: {
        bird1: {
          x: 312,
          y: 230,
          width: 34,
          height: 24
        },
        bird2: {
          x: 312,
          y: 256,
          width: 34,
          height: 24
        },
        bird3: {
          x: 312,
          y: 282,
          width: 34,
          height: 24
        }
      },
                up_pipe: {
                x: 503,
                y: 0,
                width: 52,
                height: 400
            },
    };
    world = {
      iteration: 0,
      clear: function() {
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "#9c27b0";
      },
      draw_sprite : function(){
        ctx.drawImage(img, sprites.up_pipe.x, sprites.up_pipe.y, sprites.up_pipe.width, sprites.up_pipe.height, 150, 150, sprites.up_pipe.width, sprites.up_pipe.height);
      }
    };
    bird = {
      x: 50,
      y: 150,
      frame: 0,
      status: null,
      fall: 0,
      rotation: 0,
      rotate: false,
      rangle : 0, // update
      jump: 0,
      update: function() {
        if (world.iteration % 5 === 0) {
          if (this.frame >= 2) {
            this.frame = 0;
          } else {
            this.frame += 1;
          }
        }
        switch (this.status) {
          case "normal":
            if (this.y + sprites.birds.bird1.height + 100 < canvas.height) {
              this.fall += 0.1;
              this.y += this.fall;
            }
            break;

          case "jump":
            if (this.jump < 11 && this.status == "jump") {
              this.fall = 0;
              this.y -= 2;
              this.jump++;
            } else {
              this.status = "normal";
              this.jump = 0;
            }
            break;
        }
      },
      draw: function() {
        if (this.rotate === true) {
         this.ranglr += 0.1; // increments a small amount each frame
          switch (this.frame) {
            case 0:
              ctx.save();
              ctx.translate(this.x, this.y); // translate the origin to the sprites position
              ctx.rotate(this.ranglr); // set the rotation
              ctx.drawImage(img, sprites.birds.bird1.x, sprites.birds.bird1.y, sprites.birds.bird1.width, sprites.birds.bird1.height, 0, 0, sprites.birds.bird1.width, sprites.birds.bird1.height);
              ctx.restore();
              break;
            case 1:
              ctx.save();
              ctx.translate(this.x, this.y); // translate the origin to the sprites position
              ctx.rotate(this.ranglr); // set the rotation
              ctx.drawImage(img, sprites.birds.bird2.x, sprites.birds.bird2.y, sprites.birds.bird2.width, sprites.birds.bird2.height, 0, 0, sprites.birds.bird2.width, sprites.birds.bird2.height);
              ctx.restore();
              break;
            case 2:
              ctx.save();
              ctx.translate(this.x, this.y); // translate the origin to the sprites position
              ctx.rotate(this.ranglr); // set the rotation
              ctx.drawImage(img, sprites.birds.bird3.x, sprites.birds.bird3.y, sprites.birds.bird3.width, sprites.birds.bird3.height, 0, 0, sprites.birds.bird3.width, sprites.birds.bird3.height);
              ctx.restore();
              break;

          }
        } else if (this.rotate === false) {
        this.ranglr = 0; // sets angle to default 0
          switch (this.frame) {
            case 0:

              ctx.drawImage(img, sprites.birds.bird1.x, sprites.birds.bird1.y, sprites.birds.bird1.width, sprites.birds.bird1.height, this.x, this.y, sprites.birds.bird1.width, sprites.birds.bird1.height);
              break;
            case 1:

              ctx.drawImage(img, sprites.birds.bird2.x, sprites.birds.bird2.y, sprites.birds.bird2.width, sprites.birds.bird2.height, this.x, this.y, sprites.birds.bird2.width, sprites.birds.bird2.height);
              break;
            case 2:
              ctx.drawImage(img, sprites.birds.bird3.x, sprites.birds.bird3.y, sprites.birds.bird3.width, sprites.birds.bird3.height, this.x, this.y, sprites.birds.bird3.width, sprites.birds.bird3.height);
              break;

          }
        }
      }
    };
    canvas = document.createElement("canvas");
    canvas.id = "test_canvas";
    canvas.width = 400;
    canvas.height = 700;
    canvas.style.border = "1px dashed blue";
    count_since_start = 0;
    document.getElementById("canvas_container").appendChild(canvas);
    ctx = canvas.getContext("2d");
    img.src = "http://i.imgur.com/NwCWjc4.png";
    img.onload = init();

    function init() {
      world.iteration++;
      window.requestAnimationFrame(run);
      bird.status = "normal";
    }

    function run() {
      world.iteration++;
      window.requestAnimationFrame(run);
      update_game_properties();
      draw_game_properties();
    }

    function update_game_properties() {
      bird.update();
    }

    function draw_game_properties() {
      world.clear();
      world.draw_sprite();
      bird.draw();
    }

    document.getElementById("test_canvas").onmousedown = function(event) {
      switch (event.which) {
        case 1:
          bird.status = "jump";
          break;
      }
    };
    document.getElementById("button1").onclick = function() {
      if (bird.rotate) {
        bird.rotate = false;
      } else {
        bird.rotate = true;
      }
    }

  </script>
</body>

在画布中旋转精灵

1 个答案: