We will hide the game scene by default and show it after the play button is clicked:
1. First, we have to modify the stylesheet. Open the
audiogame.css
file.2. Add the following highlighted overflow property to
#game
. It helps to clip the game into a 768x440px mask:#game { position: relative; width: 768px; height: 440px; overflow: hidden; }
3. Next, we add the following highlighted code to style the game scene:
#game-scene { background: #efefef url(../images/game_bg.jpg); top: -440px; } #game-scene.show-scene { top: 0; -webkit-transition: top .3s linear; -moz-transition: top .3s linear; transition: top .3s linear; }
4. Then, we will move on to the JavaScript part. Open the
html5games.audio.js
JavaScript file.5. Delete the
startGame
function calling in the jQuery ready function. We will call it when the play button is clicked.6. In the play button click handler, we add the following highlighted code:
$("a[href='#game']").click(function(){ audiogame...