van an nguyen

Adding balls to the game framework

Let’s augment the game framework

This time, we will extract the source code used to create the balls, and include it in our game framework. We will also use time-based animation. The distance that the player and each ball should move is computed and may vary between animation frames, depending  on the time-delta since the previous frame.

Online example at JSBin.

Try to move the monster with arrow keys and use the mouse button while moving to change the monster’s speed. Look at the source code and change the parameters controlling the creation of the balls: number, speed, radius, etc. Also, try changing the monster’s default speed. See the results.

Monster + balls in the game framework. On the screen we see the monster + a bunch of balls

For this version, we copied and pasted some code from the previous example and we also modified the mainLoop to make it more readable. In a next lesson, we will split the game engine into different files and clean the code-base to make it more manageable. But for the moment, jsbin.com is a good playground to try-out and test things…

The new mainLoop :

  1. var mainLoop = function(time){
  2.   //main function, called each frame
  3.   measureFPS(time);
  5.   // number of ms since last frame draw
  6.   delta = timer(time);
  8.   // Clear the canvas
  9.   clearCanvas();
  11.   // Draw the monster
  12.   drawMyMonster(monster.x, monster.y);
  14.   // Check inputs and move the monster
  15.   updateMonsterPosition(delta);
  17.   // Update and draw balls
  18.   updateBalls(delta);
  20.   // Call the animation loop every 1/60th of second
  21.   requestAnimationFrame(mainLoop);
  22. };

As you can see, we draw the player/monster, we update its position; and we call an updateBalls function to do the same  for the balls: draw and update their position.

  1. function updateMonsterPosition(delta) {
  2.   monster.speedX = monster.speedY = 0;
  3.   // check inputStates
  4.   if (inputStates.left) {
  5.     monster.speedX = –monster.speed;
  6.   }
  7.   if (inputStates.up) {
  8.     monster.speedY = –monster.speed;
  9.   }
  10.   …
  12.   // Compute the incX and incY in pixels depending
  13.   // on the time elapsed since last redraw
  14.   monster.x += calcDistanceToMove(delta, monster.speedX);
  15.   monster.y += calcDistanceToMove(delta, monster.speedY);
  16. }
  18. function updateBalls(delta) {
  19.   // for each ball in the array
  20.   for(var i=0; i < ballArray.length; i++) {
  21.    var ball = ballArray[i];
  23.    // 1) move the ball
  24.    ball.move();
  26.    // 2) test if the ball collides with a wall
  27.    testCollisionWithWalls(ball);
  29.    // 3) draw the ball
  30.    ball.draw();
  31. }
  32. }

Now, in order to turn this into a game, we need to create some interactions between the player (the monster) and the obstacles/enemies (balls, walls)… It’s time to take a look at collision detection.

Leave a comment