van an nguyen

Move the monster with keyboard, mouse and gamepad

Move the monster with keyboard and mouse

Make the monster move using the arrow keys, and to increase its speed by pressing a mouse button

To conclude this topic about events, we will use the arrow keys to move our favorite monster up/down/left/right, and make it accelerate when we press a mouse button while it is moving. Notice that pressing two keys at the same time will make it move diagonally.

Check this online example at JSBin: we’ve changed very few lines of code from the previous evolution!

add a JavaScript object to describe the monster

  1. // The monster!
  2. var monster = {
  3.   x:10,
  4.   y:10,
  5.   speed:1
  6. };

Where monster.x and monster.y define the monster’s current position and monster.speed corresponds to the number of pixels the monster will move between animation frames.

Note: this is not the best way to animate objects in a game; we will look at a far better solution – “time based animation” – in another lesson.

We modified the game loop as follows:

  1. var mainLoop = function(time){
  2.   // Main function, called each frame
  3.   measureFPS(time);
  5.   // Clears the canvas
  6.   clearCanvas();
  8.   // Draws the monster
  9.   drawMyMonster(monster.x, monster.y);
  11.   // Checks inputs and moves the monster
  12.   updateMonsterPosition();
  14.   // Calls the animation loop every 1/60th of second
  15.   requestAnimationFrame(mainLoop);
  16. };

We moved all the parts that check the input states in the updateMonsterPosition() function:

  1. function updateMonsterPosition() {
  2.   monster.speedX = monster.speedY = 0;
  4.   // Checks inputStates
  5.   if (inputStates.left) {
  6.     ctx.fillText(“left”, 150, 20);
  7.     monster.speedX = –monster.speed;
  8.   }
  9.   if (inputStates.up) {
  10.     ctx.fillText(“up”, 150, 40);
  11.     monster.speedY = –monster.speed;
  12.   }
  13.   if (inputStates.right) {
  14.     ctx.fillText(“right”, 150, 60);
  15.     monster.speedX = monster.speed;
  16.   }
  17.   if (inputStates.down) {
  18.     ctx.fillText(“down”, 150, 80);
  19.     monster.speedY = monster.speed;
  20.   }
  21.   if (inputStates.space) {
  22.     ctx.fillText(“space bar”, 140, 100);
  23.   }
  24.   if (inputStates.mousePos) {
  25.     ctx.fillText(“x = “ + inputStates.mousePos.x + ” y = “ +
  26.                           inputStates.mousePos.y, 5, 150);
  27.   }
  28.   if (inputStates.mousedown) {
  29.     ctx.fillText(“mousedown b” + inputStates.mouseButton, 5, 180);
  30.     monster.speed = 5;
  31.   } else {
  32.   // Mouse up
  33.   monster.speed = 1;
  34.   }
  36.   monster.x += monster.speedX;
  37.   monster.y += monster.speedY;
  38. }

Explanations:

    • In this function we added two properties to the monster object: speedX and speedY which will correspond to the number of pixels we will add to the x and y position of the monster at each new frame of animation.
    • We first set these to zero (line 2), then depending on the keyboard input states, we set them to a value equal to monster.speed or -monster.speed modified by the keys that are being pressed at the time (lines 4-20).
    • Finally, we add speedX and speedY pixels to the x and/or y position of the monster (lines 36 and 37).
    • When the function is called by the game loop, if speedX and/or speedY are non-zero they will change the x and y position of the monster in successive frames, making it move smoothly.
    • If a mouse button is pressed or released we set the monster.speed value to +5 or to +1. This will make the monster move faster when a mouse button is down, and return to its normal speed when no button is down.

Notice that two arrow keys and a mouse button can be pressed down at the same time. In this situation, the monster will take a diagonal direction and accelerate. This is why it is important to keep all the input states up-to-date, and not to handle single events individually, as we did in week 4 of the HTML5 Part 1 course!

gamepad enhancements

Let’s add the gamepad utility functions from the previous lesson (we tidied them a bit too, removing the code for displaying the progress bars, buttons, etc.), added a gamepad property to the game framework, and added one new call in the game loop for updating the gamepad status:

Check the result on JSBin:

move the monster with the gamepad, jsbin screenshot

The new updated mainloop:

  1. var mainLoop = function(time){
  2.    //main function, called each frame
  3.    measureFPS(time);
  5.    // Clear the canvas
  6.    clearCanvas();
  8.    // gamepad
  9.    updateGamePadStatus();
  11.    // draw the monster
  12.    drawMyMonster(monster.x, monster.y);
  14.    // Check inputs and move the monster
  15.    updateMonsterPosition();
  17.    // Call the animation loop every 1/60th of second
  18.    requestAnimationFrame(mainLoop);
  19. };

And here is the updateGamePadStatus function (the inner function calls are to gamepad utility functions detailed in the previous lesson):

  1. function updateGamePadStatus() {
  2.   // get new snapshot of the gamepad properties
  3.   scangamepads();
  4.   // Check gamepad button states
  5.   checkButtons(gamepad);
  6.   // Check joysticks
  7.   checkAxes(gamepad);
  8. }

The checkAxes function updates the left, right, up, down properties of the inputStates object we previously used with key events. Therefore, without changing any code in the updatePlayerPosition function, the monster moves by joystick command!

Leave a comment