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.
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: absolute;
bottom: 0;
}
.control {
display: block;
float: left;
width: 50px;
height: 50px;
background: gray;
text-decoration: none;
color: white;
text...