O'Reilly logo

HTML5 Game Development HOTSHOT by Makzan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Controlling a player with the keyboard

In this task, we will allow the player to control the character to switch between the left and right lanes.

Engage thrusters

The following steps add the keyboard input logic to control the running avatar:

  1. We will set the visual and initial placement of the player by using CSS styles. Append the following styles to the game.css file:
    #player {
      position: absolute;
      width: 100px;
      height: 100px;
      background-image: url(../images/running.png);
      bottom: 100px;
    }
  2. Now, we use the translate function to set the lane position of the player:
    #player.lane1 {-webkit-transform: translate3d(100px, 0, 0); }
    #player.lane2 {-webkit-transform: translate3d(200px, 0, 0); }
  3. Let's move to the logic part. In the player.js file, we append the ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required