Question

嗨我正在尝试使用“a / s”和左箭头/右箭头使用javascript，使我“绘制”的两个矩形顺时针旋转并围绕其中心点进行反锁定。我正试图让一个人旋转。我知道我需要定义中心点，顺时针旋转的角度和逆时针的角度。在学习的这个阶段创建功能等来做到这一点超出了我，所以任何帮助都会很棒。
这是我目前的代码

<html>
<title>Squash Game V1</title>

<h1>Squash</h1>

 <canvas id="gameCanvas" width=800 height=600></canvas>

 <script>

        var canvas;
        var canvasContext;
        var ballX = 50;
        var ballY = 50;
        var gravity = 0.2;
        var bounceFactor = 0.6;
        var ballSpeedX = 3;
        var ballSpeedY = 10;
        var ballSpeedY2 = 5;
        var ballBounce = 0
        var ballStartPos = 50
        var redPadY = 475
        var redPadX = 50
        var bluePadY = 475
        var bluePadX = 750


        const paddleHeight = 100
        const paddleWidth = 10
        const resistence = 0.998
        const ballWidth = 15;


  window.onload = function() {

        canvas = document.getElementById('gameCanvas');
        canvasContext = canvas.getContext('2d');

      var framesPerSecond = 60;
        setInterval(function() {
            moveEverything();
            drawEverything();


        }, 1000/framesPerSecond);
        }



  function ballReset() { 
          ballX = ballStartPos;
          ballY = ballStartPos;
          ballBounce = 0;   


      function incrementAngle() {
        rotateAnti -= 10;
        if(rotateAnti > 360) {
            rotateAnti = 0;
        }
    }

    function decrementAngle(){
        rotateClock += 10;
        if(rotateClock>360){
            rotateClock = 0;
        }
    }

     }

   //map var array keeps track of multiple button presses allowing both pads to be moved by single button presses
var map = []; // Or you could call it "key"
onkeydown = onkeyup = function(e){
    e = e || event; // to deal with IE
    map[e.keyCode] = e.type == 'keydown';

    {
        //moves left paddle
   var key = e.keyCode ? e.keyCode : e.which;

   if (key == 87) {
       redPadX -= 20;
   }else if (key == 83) {
       redPadX += 20;
   }
}    {
    //moves right paddle
   var key = e.keyCode ? e.keyCode : e.which;

   if (key == 38) {
       bluePadX -= 20;


   } else if (key == 40) {
       bluePadX += 20;

   }
}                           
} 

  function moveEverything() {



    // this moves ball down
        ballY += ballSpeedY;

      // this moves the ball across 
     ballX += ballSpeedX;

    // this speeds ball up as it's falling plus slows down making it fall  

      ballSpeedY += gravity;
      ballSpeedX = ballSpeedX*resistence;


      //this bounes the ball
      if (ballY > canvas.height - ballWidth) {
          ballSpeedY = -ballSpeedY
          //this reduces height of the bounce
      ballSpeedY *= bounceFactor;}

      //this should count bounces
      if (ballY > canvas.height - ballWidth){
          ballBounce = ballBounce + 1;
           }



      //ball will bounce of right wall 
      if (ballX > canvas.width - ballWidth) {
          ballSpeedX = -ballSpeedX}

      //ball will bounce off left wall 
      if (ballX < 0 + ballWidth) {
          ballSpeedX = -ballSpeedX}

      //if ball bounces twice it resets
      if (ballBounce >= 2) {
          ballReset()}


  }





  function drawEverything() {
    //this draws the pong court
        colourRect(0,0,canvas.width,canvas.height, 'black');



      //this draws left pad  
        colourRect(redPadX, redPadY, paddleWidth, paddleHeight, "red");

     //this draws right pad    
            colourRect(bluePadX, bluePadY, paddleWidth, paddleHeight, "blue"); 


      //this draws the ball
        colourCircle(ballX, ballY, 10, "white");




  function colourCircle(centreX, centreY, radius, drawColour) {
    canvasContext.fillStyle = drawColour;
    canvasContext.beginPath();
    canvasContext.arc(centreX, centreY, radius, 0,Math.PI*2, true)
    canvasContext.fill();
}

        //this function draws a rectangle
  function colourRect(leftX, topY, width, height, drawColour)  {
  canvasContext.fillStyle = drawColour;
  canvasContext.fillRect(leftX, topY, width, height);

        } 
  }                                                                   

</script>

</html>

Answer 1

这里是您的代码，其中添加了红色条的旋转。旋转发生在colourRect函数中。它转换为对象的中心，以弧度旋转，并向后平移。这就是中心旋转。使用Q和A进行轮播。

＆＃13;

var canvas;
        var canvasContext;
        var ballX = 50;
        var ballY = 50;
        var gravity = 0.2;
        var bounceFactor = 0.6;
        var ballSpeedX = 3;
        var ballSpeedY = 10;
        var ballSpeedY2 = 5;
        var ballBounce = 0
        var ballStartPos = 50
        var redPadY = 475
        var redPadX = 50;
        var redRotate = 0;
        var to_radians = Math.PI / 180;
        var bluePadY = 475
        var bluePadX = 750
        var blueRotate = 0;


        const paddleHeight = 100
        const paddleWidth = 10
        const resistence = 0.998
        const ballWidth = 15;


  window.onload = function() {

        canvas = document.getElementById('gameCanvas');
        canvasContext = canvas.getContext('2d');

      var framesPerSecond = 60;
        setInterval(function() {
            moveEverything();
            drawEverything();


        }, 1000/framesPerSecond);
        }



  function ballReset() { 
          ballX = ballStartPos;
          ballY = ballStartPos;
          ballBounce = 0;   


      function incrementAngle() {
        rotateAnti -= 10;
        if(rotateAnti > 360) {
            rotateAnti = 0;
        }
    }

    function decrementAngle(){
        rotateClock += 10;
        if(rotateClock>360){
            rotateClock = 0;
        }
    }

     }

   //map var array keeps track of multiple button presses allowing both pads to be moved by single button presses
var map = []; // Or you could call it "key"
onkeydown = onkeyup = function(e){
    e = e || event; // to deal with IE
    map[e.keyCode] = e.type == 'keydown';

    {
        //moves left paddle
   var key = e.keyCode ? e.keyCode : e.which;

   if (key == 87) {
       redPadX -= 20;
   }else if (key == 83) {
       redPadX += 20;
   } else if (key == 81) { // Q -- rotate left
       redRotate -= 10;
   } else if (key == 65) { // A -- rotate right
       redRotate += 10;
   }
      
      
}    {
    //moves right paddle
   var key = e.keyCode ? e.keyCode : e.which;

   if (key == 38) {
       bluePadX -= 20;


   } else if (key == 40) {
       bluePadX += 20;

   }
}                           
} 

  function moveEverything() {



    // this moves ball down
        ballY += ballSpeedY;

      // this moves the ball across 
     ballX += ballSpeedX;

    // this speeds ball up as it's falling plus slows down making it fall  

      ballSpeedY += gravity;
      ballSpeedX = ballSpeedX*resistence;


      //this bounes the ball
      if (ballY > canvas.height - ballWidth) {
          ballSpeedY = -ballSpeedY
          //this reduces height of the bounce
      ballSpeedY *= bounceFactor;}

      //this should count bounces
      if (ballY > canvas.height - ballWidth){
          ballBounce = ballBounce + 1;
           }



      //ball will bounce of right wall 
      if (ballX > canvas.width - ballWidth) {
          ballSpeedX = -ballSpeedX}

      //ball will bounce off left wall 
      if (ballX < 0 + ballWidth) {
          ballSpeedX = -ballSpeedX}

      //if ball bounces twice it resets
      if (ballBounce >= 2) {
          ballReset()}


  }





  function drawEverything() {
    //this draws the pong court
        colourRect(0,0,canvas.width,canvas.height, 'black');



      //this draws left pad
        colourRect(redPadX, redPadY, paddleWidth, paddleHeight, "red", redRotate);

     //this draws right pad    
            colourRect(bluePadX, bluePadY, paddleWidth, paddleHeight, "blue", blueRotate); 


      //this draws the ball
        colourCircle(ballX, ballY, 10, "white");




  function colourCircle(centreX, centreY, radius, drawColour) {
    canvasContext.fillStyle = drawColour;
    canvasContext.beginPath();
    canvasContext.arc(centreX, centreY, radius, 0,Math.PI*2, true)
    canvasContext.fill();
}

        //this function draws a rectangle
  function colourRect(leftX, topY, width, height, drawColour, rotate)  {
   

    
  canvasContext.fillStyle = drawColour;
  if (typeof rotate === "undefined") rotate = 0;
  centerX = leftX + (width / 2);
  centerY = topY + (height / 2);
  canvasContext.save();
  canvasContext.translate(centerX, centerY);
  canvasContext.rotate(rotate * to_radians);
  canvasContext.translate(-centerX, -centerY);
  canvasContext.fillRect(leftX, topY, width, height);
  canvasContext.restore();
  

        } 
  }

＆＃13;

<h1>Squash</h1>

 <canvas id="gameCanvas" width=800 height=600></canvas>

＆＃13;

创建单独旋转的矩形

1 个答案: