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:

1. We are making improvements on our existing game so that we can use the last example as the starting point.
2. Open the index.html in the text editor. We are going to add the scoreboard's DOM elements.
3. Add the #scoreboard HTML structure to our #game DIV inside index.html. The #game DIV becomes the following:

   <p id="game">
     <p id="playground">
       <p class="paddle-hand right"></p>
       <p class="paddle-hand left"></p>
       <p id="paddleA" class="paddle"></p>
       <p id="paddleB" class="paddle"></p>
       <p id="ball"></p>
     </p>
     <p id="scoreboard">
       <p class="score"> A : <span id="score-a">0</span></p>
       <p class="score"> B : <span id="score-b">0</span></p>
     </p>
   </p>

4. Now, let's move onto the JavaScript part. Open the js/pingpong.js file.
5. We need two more variables to store the players' scores. Add their score variables inside the existing pingpong data object:

   var pingpong = {
     scoreA : 0,  // score for player A
     scoreB : 0,  // score for player B
   
     // existing pingpong data goes here.
   }

6. Find the playerAWin function. We increment player A's score there and update the scoreboard with the following code:

   // player B lost.
   pingpong.scoreA += 1;
   $("#score-a").text(pingpong.scoreA);

7. We can add a code similar to that in the previous step to update player B's score when player A is lost in the playerBWin function:

   // player A lost.
   pingpong.scoreB += 1;
   $("#score-b").text(pingpong.scoreB);

8. Let's move onto the css/pingpong.css file. Put the following styles in the file to make the score board look nicer:

   /* Score board */
   #scoreboard {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     padding: 5px;
     color: lightgrey;
   }

9. It is time to test our latest code. Open the index.html in a web browser. Try playing by controlling both paddles and lose some points. The scoreboard should be counting the scores correctly.

What just happened?

We just used another common jQuery function: text() to alter the content of the game on the fly.

The text() function gets or updates the text content of the selected element. Here is a general definition of the text() function:

.text()
.text(string)

When we use the text() function without an argument, it returns the text content of the match elements. When we use it with an argument, it sets the text content to all the matched elements with the given string.

For example, provide the following HTML structure:

<p>My name is <span id="myname" class="name">Makzan</span>.</p>
<p>My pet's name is <span id="pet" class="name">
  Co-co</span>.</p>

The following jQuery calls return Makzan:

$("#myname").text(); // returns Makzan

However, in the following jQuery call, it sets all matched elements to the given HTML content:

$(".name").text("Mr. Mystery")

Executing the jQuery command gives the following HTML result:

<p>My name is <span id="myname" class="name">Mr. Mystery</span></p>
<p>My pet's name is <span id="pet" class="name">Mr. Mystery</span></p>

Have a go hero – winning the game

Imagine that the game is an advertisement. We set the entire game playground with pointer cursor so that the user knows the game is clickable and links to some other place. Try to use jQuery's click event and handle the advertisement that's linked to the handleMouseInputs function.