HTML and CSS Reference
In-Depth Information
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 muliplicaion equaion according to the input.
Prepare for lift off
We need to set up some input butons to use the game logic. These input butons are set up
in HTML. We will put the following number controls in HTML, inside the #game secion and
ater <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;
text-align: center; // center align
line-height: 50px; // vertical align
font-size: 24px;
font-family: impact;
.control:active {
background: white;
color: red;
Search WWH ::

Custom Search