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.htmlin the text editor. We are going to add the scoreboard's DOM elements.Add the
#scoreboardHTML structure to our#gameDIV inside index.html. The#gameDIV 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> <div class="score"> B : <span id="score-b">0</span></div> </div> <...