旋轉畫布

這裏精靈是代碼： https://jsfiddle.net/test123456978911337/cbL95gne/3/旋轉畫布

當你點擊旋轉，精靈開始在錯了，靠在辦法「落」，當然，它也旋轉。是否可以編輯「下降」動畫，以便只有精靈旋轉，但它會像非旋轉精靈一樣下降？

感謝您的任何幫助

這裏的一些代碼，否則我不能問這個問題。

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();

來源

2017-06-15 aghtczst

我已經更新了它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>

來源

2017-06-15 08:22:02

它的工作原理...好...！謝謝 – aghtczst

@aghtczst m很高興我能幫忙:) –

回答

相關問題