DiceGame Example -- Source Code
Test DiceGame Class -- testdicegame.htm
<!DOCTYPE html>
<!-- DiceGame Example
Source code file: testdicegame.htm
Test DiceGame class. -->
<html lang="en">
<body>
<script src='dicegame.js'></script>
<script>
// Test Dice class
dg = new DiceGame(6, 5);
dg.rollDice( );
document.writeln(dg.toString( ) + '<br>');
document.writeln(dg.getDieFace(3));
</script>
</body>
</html>
HTML Page -- index.htm
<!DOCTYPE html>
<!-- DiceGame Example
Source code file: index.htm
Simulate rolling five dice.
Clicking on an individual die
rolls that die. -->
<html>
<head>
<meta content="text/html; charset=utf-8"
http-equiv="Content-Type">
<title>DiceGame Example</title>
<link rel="stylesheet" type="text/css"
href="styles.css" />
<script src='dicegame.js'></script>
<script src='script.js'></script>
</head>
<body>
<h1>DiceGame Example</h1>
<img id="1">
<img id="2">
<img id="3">
<img id="4">
<img id="5"><br>
<button id="btn">Roll Dice</button>
</body>
</html>
DiceGame Class -- dicegame.js
// DiceGame Example
// Source code file: dicegame.js
// Simulate rolling five dice.
// Clicking on an individual die
// rolls that die.
class DiceGame {
constructor(numDieFaces, numDice) {
this.numDieFaces = numDieFaces;
this.numDice = numDice;
this.dice = [ ];
for(let i = 0; i < numDice; i++) {
this.dice.push(0);
}
}
rollDice( ) {
for(let i = 0; i < this.numDice; i++) {
let face = Math.floor(Math.random( ) *
this.numDieFaces) + 1;
this.dice[i] = face;
}
}
// The this.dice array is zero based,
// but the ids of the HTML image controls
// start at one.
getDieFace(index) {
return this.dice[index - 1];
}
toString( ) {
var output = '';
for(let i = 0; i < this.numDice; i++) {
output += this.dice[i] + ' ';
}
return output;
}
}
Script -- script.js
// DiceGame Example
// Source code file: script.js
// Simulate rolling five dice.
// Clicking on an individual die
// rolls that die.
function rollDice( ) {
var dg = new DiceGame(6, 5);
dg.rollDice( );
for(let i = 1; i <= 5; i++) {
let imgLocation = i.valueOf( );
let imgNum = dg.getDieFace(i);
let image = document.getElementById(imgLocation);
let pathName = "images/" + imgNum + ".jpg";
image.src = pathName;
}
}
function init( ) {
let btn = document.getElementById("btn");
btn.addEventListener("click", rollDice);
// The code between the dotted lines is not
// needed for Project 3
//---------------------------------------------------
for(let i = 1; i <= 5; i++) {
let imageId = i.valueOf( );
let image = document.getElementById(imageId);
image.addEventListener("click", event => {
var clickedImage = event.target;
var imgNum = (Math.floor(Math.random( ) * +
6) + 1).valueOf( );
clickedImage.src = "images/" + imgNum + ".jpg";
});
}
//---------------------------------------------------
}
window.addEventListener("load", init);
CSS Page -- styles.css
/* DiceGame Example
Source code file: script.js
Simulate rolling five dice.
Clicking on an individual die
rolls that die. */
/* include padding and border in element's
total width and height. */
* { box-sizing: border-box; }
body { background-color: #e0e0e0;
color: #000060;
font-family: Verdana, Arial, sans-serif; }
button { width: 220px; height: 50px;
margin: 5px; }
img { background-color: #333333;
color: red;
margin: 5px; height:100px;
width:100px; }