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

Inputs and equations

In this task, we will allow the player to input numbers by clicking on the numeric pad interface, and we will show a multiplication equation according to the input.

Prepare for lift off

We need to set up some input buttons to use the game logic. These input buttons are set up in HTML. We will put the following number controls in HTML, inside the #game section and after <canvas>:

<div id="control-box">
  <a class="control" data-value="1" href="#">1</a>
  <a class="control" data-value="2" href="#">2</a>
  ...
  <a class="control" data-value="11" href="#">11</a>
  <a class="control" data-value="12" href="#">12</a>
</div>

We will use CSS to place the controls in proper place, as follows:

#control-box { width: 100%; overflow: auto; position: ...

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