Create separately rotating rectangles

Question

Hi I am trying to make the two rectangles I have "drawn" rotate clockwise and anticlock around their centre points using "a/s" and left arrow/right arrow using javascript. I am hitting a wall trying to get one to rotate.
I understand I need to define the centre point, an angle for clockwise rotation and angle for anticlockwise. Creating the functions etc to do this is beyond me at this stage in learning so any help would be awesome.
Here is my current code

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

wolfhammer wolfhammer · Accepted Answer · 2015-12-07T23:45:58

Here's your code with the added rotation for the red bar. The rotation happens in the colourRect function. It translates to center of object, does rotation in radians, and translates back. That's all there is to a center rotation. Rotate with Q and A.

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

        } 
  }

<h1>Squash</h1>

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

Create separately rotating rectangles

1 Answers