Time for action – creating a mini piano musical game
Carry out the following steps:
We want to show an indication when pressing the keyboard. Open the
index.html
file and add the following highlighted HTML:<div id="game-scene" class="scene"> <!-- existing code goes here --> <div id="hit-line-1" class="hit-line hide"></div> <div id="hit-line-2" class="hit-line hide"></div> <div id="hit-line-3" class="hit-line hide"></div> </div>
Then, we may want to inform visitors that they can play the game by pressing the J, K, and L keys. Modify the footer content as follows:
<footer> <p>This is an example of making audio game in HTML5. Press J, K, L to play. </p> </footer>
Now, we will move on to the stylesheet. Open the
css/audiogame.css
file and put the following code at the end of the file:#hit-line-1 { left: 35px; top: 335px; } #hit-line-2 { left: 135px; /* 320/2-50/2 */ top: 335px; } #hit-line...