Time for action – Showing the score of both players
We are going to create a text-based scoreboard and update the scores when either player scores a goal:
- We are making improvements on our existing game so that we can use the last example as the starting point.
- Open the
index.html
in the text editor. We are going to add the scoreboard's DOM elements. - Add the
#scoreboard
HTML structure to our#game
DIV inside index.html. The#game
DIV becomes the following:<div id="game"> <div id="playground"> <div class="paddle-hand right"></div> <div class="paddle-hand left"></div> <div id="paddleA" class="paddle"></div> <div id="paddleB" class="paddle"></div> <div id="ball"></div> </div> <div id="scoreboard"> <div class="score"> A : <span id="score-a">0</span></div> ...
Get HTML5 Game Development by Example : Beginner's Guide - Second Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.