Java Reference
In-Depth Information
This should mean that only the start button is shown prior to the game commencing. When
the player clicks on the button, the
play()
function is called and the game starts. At this
point, we want the start button to be hidden and the form to be shown, so add this at the
beginning of the
play()
function:
// hide button and show form
hide($start);
show($form);
At the end of the game, we want to hide the form and show the start button so that the
player can choose to play again. Add the following to the end of the
gameOver()
func-
tion:
hide($form);
show($start);
Finally, we'll add some CSS to style the form in styles.css. The input field is actually styled
the same way as the button, so we can simply add the input selector to the beginning of the
declaration:
input, button {
.... styles remain the same
The following styles will center the quiz playing area:
body{
width: 400px;
margin: 0 auto;
background: #fff;
height:100vh;
}
html{
background: #444;
}
Let's have a go at playing it. Open up index.htm and it should look similar to the screenshot
shown in
Figure 8.10
.
