Book Image

HTML5 Game Development Hotshot

By : Seng Hin Mak, Makzan Makzan (Mak Seng Hin)
Book Image

HTML5 Game Development Hotshot

By: Seng Hin Mak, Makzan Makzan (Mak Seng Hin)

Overview of this book

Table of Contents (15 chapters)
HTML5 Game Development HOTSHOT
About the Author
About the Reviewers

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>

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

#control-box {
  width: 100%;
  overflow: auto;
  position: absolute;
  bottom: 0;

.control {
  display: block;
  float: left;
  width: 50px;
  height: 50px;
  background: gray;
  text-decoration: none;
  color: white;