HTML5 Game Development by Example : Beginner's Guide - Second Edition

Time for action – auto moving the left paddle

Perform the following set of actions for automoving our paddle:

1. Let's continue with our pingpong.js JavaScript file. We create a function that follows the ball's y position.

   function autoMovePaddleA() {
     var speed = 4;
     var direction = 1;
   
     var paddleY = pingpong.paddleA.y + pingpong.paddleA.height/2;
     if (paddleY > pingpong.ball.y) {
       direction = -1;
     }
   
     pingpong.paddleA.y += speed * direction;
   }

2. Then, inside the game loop function, we call our autoMovePaddleA function.

   autoMovePaddleA();

What just happened?

We created a logic that moves the left paddle based on the ball's y position. You may try the game with its current progress at http://makzan.net/html5-games/pingpong-wip-step6/.

Since we have already implemented ...