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>
body{ background-color: lemonchiffon; } table { border-collapse: collapse; } td { border: 3px solid #778899; text-align: left; padding: 5px; }
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)
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