Project 2: Beat That!
Create a version of the Beat That dice game, where players create the largest number they can by concatenating random dice roll digits. Read the rules for Beat That here.
Have a look a some past student's project to visualise the game - and for inspiration :)
- 1.
- 2.
- 1.
- 1.There are 2 players and players take turns.
- 2.When a player clicks Submit, the game rolls 2 dice and shows the dice rolls, for example 3 and 6.
- 3.The player picks the order of the dice they want. For example, if they wanted the number 63, they would specify that the 2nd dice goes first. You can choose how the player specifies dice order.
- 4.After both players have rolled and chosen dice order, the player with the higher combined number wins.
Player 1 rolls 2 dice with dice rolls 3 for Dice 1 and 6 for Dice 2.
Welcome Player 1.
You rolled 3 for Dice 1 and 6 for Dice 2.
Choose the order of the dice.
Player 1 can pick either Dice 1 or Dice 2 as the first numeral of the combined number.
Player 1, you chose Dice 2 first.
Your number is 63.
It is now Player 2's turn.
Player 1 picked Dice 2 as the 1st numeral and Dice 1 as the 2nd, thus generating the combined number 63. Player 2 then rolls 2 dice and tries to generate a number greater than 63.
If you get stuck, or are unsure on how to start, Bryan will walk you through how to go from breaking down the problem to completion of the Base version of Beat That!
Your game is working as intended, now it's time to make it look good! We'll edit index.html to personalise our game. If needed, review 1.2 Web Browsers on how to edit HTML.
At line 29 of index.html, try changing
background-color: pink; to background-color: lightblue; or any colour of your choice!#container {
background-color: lightblue;
margin: 40px auto;
max-width: 800px;
padding: 38px 31px;
}
Add 1 or more paragraphs after line 64 with instructions on how to play Beat That! It can look something like this:
...
<body>
<h1 id="header">Fundamentals: Beat That! 🚀</h1>
<div id="container">
<p>Hello! Welcome to Beat That! Click submit to start the game.</p>
<p>Create a two-digit number by selecting the order of your dice rolls.</p>
<p>The player with the highest number wins! Good luck!</p>
<p>Input:</p>
<input id="input-field" />
<br />
<button id="submit-button">Submit</button>
<p>Output:</p>
<div id="output-div"></div>
</div>
...
</body>
Having fun making your game look good? Feel free to explore more HTML and CSS on your own! Here are some resources:
Try implementing some, or a combination of, the following feature groups. Feel free to include any other additional features you think of.
Score
Lowest Combined
Variable Dice and Players
Knockout
Score
Keep score for each player. The score is the running sum of all numbers that player has generated so far. This means there is no permanent winner, only a temporary leader.
Leaderboard
When outputting game results in the output box, also output a leaderboard that lists the 2 players and their scores in decreasing order.
Lowest Combined Number Mode
Add a game mode such that the player with the lowest combined number is the winner.
Auto-Generate Combined Number
Update the game to auto-generate the highest (or lowest) combined number from dice rolls. For example, for dice rolls
[6, 3] in Lowest Combined Number mode, the game would auto-generate the combined number 36.Variable Number of Dice
- 1.Create a new version of Beat That that rolls two or more dice per player.
- 2.At the beginning of each round, ask the players how many dice they would like to play with. Both players will roll the same number of dice each round.
- 3.Store each player's dice rolls in an array. When each player rolls dice, use a loop to place
ndice roll values in that player's array, wherenis the number of dice the players specified at the beginning of the round. Output each player's dice roll values. - 4.Auto-generate the optimal combined number based on each player's dice rolls to determine the winner of that round.
Variable Number of Players
Allow more than 2 players at a time to play Beat That. At the beginning of the game, ask how many players would like to play. For a variable number of players, feel free to output the leaderboard in any order, because implementing the leaderboard in decreasing order requires advanced logic.
Knockout Mode
Create a mode where if there are more than 2 players, the game can match players against each other 1 at a time until there is 1 final winner. For example, if there are 4 players, the game might first match players 1 and 2. If player 1 wins, the game might then match players 1 and 3. The winner of that match would then play player 4, and the winner of that final round would be the ultimate winner.
- 1.
- 2.
- 3.Please leave your name and section number _in the title_ of the pull request.
- 4.Please fill in the questionnaire in the pull request comments when you submit.
Please only refer to the reference solution after you have attempted the project. Note that there are many ways to implement the project and the reference solution is only 1 way.
- 1.
- 2.
- 5.
Last modified 9mo ago