</head>
<body>
<div id="game">
<div id="playfield">
<div id="paddle"></div>
<div id="ball"></div>
<div id="winner" class="message">
<p>You win!</p>
</div>
<div id="game_over" class="message">
<p>Game Over</p>
</div>
</div>
<div id="stats">
<div>Lives: <span id="lives"/></div>
<div>Score: <span id="score"/></div>
</div>
</div>
<audio src="sound/awake10_megaWall.mp3" autoplay loop/>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/serial_device.js"></script>
<script src="js/game_controller.js"></script>
<script src="js/arduinoid.js"></script>
</body>
</html>
There’s nothing special about this HTML document. At the top we associate
the document with a style sheet named
arduinoid.css
. We’ll specify all things
related to layout in this file.
Next, we define a couple of
<div>
elements. The main element has its
id
attribute set to
game
, and it contains all the other elements. Most elements
are fairly self-explanatory. The
playfield
element is where the action happens.
It hosts a
paddle
and a
ball
. These elements represent the game’s main
objects—that is, the player’s paddle and the ball.
The
winner
and
game_over
elements contain messages we’ll display in case the
player has won or lost the game. They’ll be invisible when the game starts.
In the
stats
element, you can find the game’s most important statistical infor-
mation: the number of lives left and the current score.
After that, we add a cool chiptune
3
created by Alex Smith
4
to the game using
the
audio
element. The
autoplay
attribute starts the song immediately, and the
loop
attribute makes it loop forever. It’s a great song, so that doesn’t hurt.
3.
http://opengameart.org/content/awake-megawall-10
4.
http://cynicmusic.com/
report erratum • discuss
Creating the Game • 115
www.it-ebooks.info
To Next Page
Loading...
