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. Fork and Clone the Fundamentals Beat That! repo.



  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!


Add some polish!

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:


  <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>
    <input id="input-field" />
    <br />
    <button id="submit-button">Submit</button>
    <div id="output-div"></div>


Having fun making your game look good? Feel free to explore more HTML and CSS on your own! Here are some resources:

More Comfortable

Try implementing some, or a combination of, the following feature groups. Feel free to include any other additional features you think of.


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.


When outputting game results in the output box, also output a leaderboard that lists the 2 players and their scores in decreasing order.


  1. Push the commits in your local repo to GitHub.

  2. Create a pull request to submit your assignment.

  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.

Reference Solution

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. Auto-Generate Combined Number (includes Score, Leaderboard, and Lowest Combined Number Mode)

Last updated