Download Resources Web Applications Games Recycle Bin

Double Dice Roll

diceroll.html

<!DOCTYPE html>
<html>
  <head>
      <title>Dice Roll</title>
      <link rel="stylesheet" type="text/css" href="diceroll.css">
  </head>
  <body>
      <table>
        <tr>
          <td colspan="3">Player 1:</td>
        </tr>
        <tr>
          <td><img src="https://digisoln.com/resources/dice/unknown.bmp" id="p1_first_dice"></td>
          <td><img src="https://digisoln.com/resources/dice/unknown.bmp" id="p1_second_dice"></td>
          <td><span id="p1_result">??</span></td>
        </tr>
        <tr>
          <td colspan="3">CPU:</td>
        </tr>
        <tr>
          <td><img src="https://digisoln.com/resources/dice/unknown.bmp" id="cpu_first_dice"></td>
          <td><img src="https://digisoln.com/resources/dice/unknown.bmp" id="cpu_second_dice"></td>
          <td><span id="cpu_result">??</span></td>
        </tr>
        <tr><td colspan="3">Dashboard:</td></tr>
        <tr>
          <td><input type="button" value="Roll" onclick="roll()"></td>
          <td><input type="button" id="challenge" value="Challenge" onclick="challenge()" style="display: none;"></td>
          <td>Points: <span id="points">10</span></td>
        </tr>
      </table>
      
      <script src="diceroll.js"></script>
  </body>
</html>

diceroll.css

body{
  background-color: lemonchiffon;
}

table {
  border-collapse: collapse;
}

td {
  border: 3px solid #778899;
  text-align: left;
  padding: 5px;
}

diceroll.js

var p1_first_dice, p1_second_dice, p1_result, cpu_first_dice, cpu_second_dice, cpu_result;
var points = 10;

function newDiceValue(){
    return Math.floor((Math.random() * 6) + 1);
}

function getImageURL(diceValue){
    switch(diceValue){
        case 1: return "https://digisoln.com/resources/dice/dice1.bmp"; 
        case 2: return "https://digisoln.com/resources/dice/dice2.bmp"; 
        case 3: return "https://digisoln.com/resources/dice/dice3.bmp"; 
        case 4: return "https://digisoln.com/resources/dice/dice4.bmp"; 
        case 5: return "https://digisoln.com/resources/dice/dice5.bmp"; 
        case 6: return "https://digisoln.com/resources/dice/dice6.bmp"; 
    }
}

function calculateResult(dice1, dice2){
    result = 0;
    if(Math.max(dice1, dice2) == dice1){
        result = parseInt(dice1.toString() + dice2.toString());
    } else {
        result = parseInt(dice2.toString() + dice1.toString());
    }
    return result;
}

function updatePoints(){
    document.getElementById("points").innerHTML = points;
}

function challenge(){
    cpu_first_dice = newDiceValue();
    cpu_second_dice = newDiceValue();
    cpu_result = calculateResult(cpu_first_dice, cpu_second_dice);
    document.getElementById("cpu_first_dice").src = getImageURL(cpu_first_dice);
    document.getElementById("cpu_second_dice").src = getImageURL(cpu_second_dice);
    document.getElementById("cpu_result").innerHTML = cpu_result;
    document.getElementById("challenge").style.display = "none";
    if (cpu_result > p1_result) { points = points - 5; }
    if (cpu_result < p1_result) { points = points + 5; }
    updatePoints();
}

function roll(){
    p1_first_dice = newDiceValue();
    p1_second_dice = newDiceValue();
    p1_result = calculateResult(p1_first_dice, p1_second_dice);
    document.getElementById("p1_first_dice").src = getImageURL(p1_first_dice);
    document.getElementById("p1_second_dice").src = getImageURL(p1_second_dice);
    document.getElementById("p1_result").innerHTML = p1_result;
    document.getElementById("challenge").style.display = "inline";
    points -= 1;
    updatePoints();
}

Improve headings, add rules (HTML) and refine aesthetics (CSS)


You could also improve / modify game mechanics (JS), such as:
  1. underneath html table dashboard have a "max score" which is the highest score i have reached (as i keep losing points it would be nice to know what my top target reached was)
  2. points for rolling doubles
  3. double up option (use a checkbox perhaps) when challenging where stakes are twice the regular (points won and lost)
  4. a better mechanism to handle draws between cpu and player - roll off? card draw? heads or tails?
  5. handle end game with location.reload() perhaps (when score less than 1)
  6. can you extend / refine / mod / adapt this game or game concept to any of the other examples we have studied in class? do you have an idea but don't know how to start? ask your teacher

Algorithm for Double Dice Roll Game
FUNCTION rollTwoDice()
  SET dice1 = RANDOM_INT(1,6)
  SET dice2 = RANDOM_INT(1,6)
  IF dice1 > dice2 THEN
    SET jointNumber = JOIN(dice1, dice2)
  ELSE
    SET jointNumber = JOIN(dice2, dice1)
  END IF
  RETURN jointNumber
END FUNCTION

SET points = 10

WHILE points > 0:
  SET mynumber = CALL rollTwoDice()
  SET points = points - 1
  INPUT challenge
  IF challenge == True THEN
    SET cpunumber = CALL rollTwoDice()
    IF mynumber > cpunumber THEN
      SET points = points + 5
    ELSE
      IF cpunumber < mynumber THEN
        SET points = points - 5
      END IF
    END IF
  END IF
END WHILE