In my last post, I declared that I was going to make a more complex app building from the last app, by involving two people clicking buttons and keeping scores along the way. Two players click the button to generate a random number, and the one with the higher number wins a point. I said I was going to do it by 13 Feb 2022. Today is 13 Feb 2022.
End Product
The above is the end product. Nothing fanciful in the interface as I focus on learning the code.
In this game, two players take turns to click on the Randomize button. After the two players clicked it, the space below the respective Randomize button will first show Done. This is to keep both players in suspense even though the random number had been picked.
Once the Check button is clicked, the comparison between the two numbers will be made, and results will be shown below. In this case, Player 2 won!, and Player 2 earned a point.
There is a Reset button that allows the players to begin a new trial, resetting the numbers but retaining the overall score. To start a new game, one has to refresh the html file.
HTML file
Line 3 declares where the Javascript is found.
Four buttons with onclick behavior for their assigned functions are declared at:
- Line 10 (Reset - new_trial())
- Line 12 (Randomize for player 1 - showRandom1())
- Line 18 (Randomize for player 2 - showRandom2())
- Line 21 (Check - check())
The placeholders are coded at lines 11, 13, 14, 17, 19, 20, and 22. For example, the "who_wins" placeholder which shows who wins, is found on Line 22.
Javascript
Line 1 and 2 declare the player1_tally and player2_tally as zero at the start.
Line 5 declares the getRndInterger function as described in the last post.
Line 9-13 is the showRandom1 function for Player 1, which will generate the random number, and show Done when activated. The function also shows "...." at the "who_wins" placeholder when activated. The first Randomize button (btn1) activates this function.
The code is then repeated for Player 2, between lines 15-19.
Line 22-30 is the function for new_trial. When activated by btn0, randomNum1 and randomNum2 are set to "0000", and shown respectively in the placeHolder1 and placeHolder2 (Line 26-27). Line 28 joins the text "Player 1 >>>>" with the current player1_tally to show what Player 1's s score is at that point. Line 29 does it for player 2.
Then comes the last big chunk, the check function, between 32 to 45.
Basically, the hero here is the if-else statement that compares randomNum1 with randomNum2, and proceeds to increase the winning player's tally by 1. For example, if randomNum1 is greater than randomNum2, a message will show "Player 1 won!" (Line 34), and line 35 updates the randomNum1 score.
The same happens for player 2 side of the code under the else condition.
Line 41 to 44 update the placeholders accordingly.
Done!
The completed HTML and Javascript codes are provided above. New learners should just practice typing them out so I am not providing them here :)
Place them in the folder like what is shown below, and it should work.
Challenge Declared
For my next challenge, I shall try to see if I can make something useful with an app that uses data about crypto prices! Let 20 Feb 2022 be the deadline for me to complete that.
If you like to support me, please upvote this and repost this.
I also welcome comments.