Homework SourseDevelop an Odds and Evens game edit Javascript file Run app
Develop an Odds and Evens game - edit Javascript file. Run application in Chrome browser to make sure it works.
The game ends when either the player or the computer reaches 50 or when the user enters 999 to quit. In either case, the application should display an appropriate message like: “You WIN!”, “You lose :(”, or “You quit” in the span element to the right of the Play button.
In the JavaScript file, note that five functions are supplied. The $ function. The getRandomNumber function. A resetFields function that resets the text boxes and message area. The start of a playGame function. And an onload event handler that attaches the playGame function to the click event of the Play button.
Code and test the playGame function. Within this function, use a while loop to get user entries until the player quits or either the player or computer has reached 50. Then, display the appropriate message to the right of the Play button. Within the while loop, consider using a break statement to end the loop if the player quits.
Within the playGame function, call the resetFields function whenever the fields need to be reset.
If you haven’t already done so, add data validation to make sure the entry is a valid number from 0 through 5.
HTML:
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>Odds and Evens Game</title>
<link rel=\"stylesheet\" href=\"game.css\">
<script src=\"game.js\"></script>
</head>
<body>
<main>
<h1>Let\'s Play ODDS AND EVENS!</h1>
<fieldset>
<legend>Rules</legend>
<ul>
<li>The computer is even, you are odd (no offense).</li>
<li>Each round, you and the computer \"hold up\" 1 to 5 fingers.</li>
<li>The total number of fingers are tallied.</li>
<li>Even totals go to the computer.</li>
<li>Odd totals go to you.</li>
<li>First to 50 wins.</li>
</ul>
</fieldset>
<input type=\"button\" id=\"play\" value=\"Play\">
<span id=\'message\'> </span><br>
<fieldset>
<legend>This round</legend>
<label for=\"player\">You:</label>
<input type=\"text\" id=\"player\" value=\"0\" disabled>
<label for=\"computer\">Computer:</label>
<input type=\"text\" id=\"computer\" value=\"0\" disabled>
</fieldset>
<fieldset>
<legend>Totals</legend>
<label for=\"odd\">You:</label>
<input type=\"text\" id=\"odd\" value=\"0\" disabled>
<label for=\"even\">Computer:</label>
<input type=\"text\" id=\"even\" value=\"0\" disabled>
</fieldset>
</main>
</body>
</html>
CSS:
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 460px;
border: 3px solid blue;
padding: 0 2em 1em;
}
h1 {
color: blue;
margin-bottom: .25em;
}
label {
width: 4em;
text-align: right;
padding-bottom: .5em;
}
input {
width: 4em;
margin: 0 1em .5em .5em;
}
fieldset {
margin-bottom: 1em;
}
#message {
font-weight: bold;
color: red;
}
Javascript:
\"use strict\";
var $ = function(id) { return document.getElementById(id); };
var getRandomNumber = function(max) {
var random;
if (!isNaN(max)) {
random = Math.random(); //value >= 0.0 and < 1.0
random = Math.floor(random * max); //value is an integer between 0 and max - 1
random = random + 1; //value is an integer between 1 and max
}
return random;
};
var playGame = function() {
};
var resetFields = function() {
$(\"player\").value = \"0\";
$(\"computer\").value = \"0\";
$(\"odd\").value = \"0\";
$(\"even\").value = \"0\";
$(\"message\").firstChild.nodeValue = \"\";
};
window.onload = function() {
$(\"play\").onclick = playGame;
$(\"play\").focus();
};
Let\'s Play ODDS AND EVENS! -Rules The computer is even, you are odd (no offense). Each round, you and the computer \"hold up\" 1 to 5 fingers. The total number of fingers are tallied Even totals go to the computer. .Odd totals go to you. .First to 50 wins. Play This round You: 5 Totals You: 16 Computer: After the Play button is clicked, the user will see a series of prompts, like this: Enter a number between 1 and 5, or 999 to quit OK CancelSolution
\"use strict\";
var $ = function (id) {
return document.getElementById(id);
};
var intTotalMax = 50, compTotal = 0, userTotal = 0;
var getRandomNumber = function (max) {
var random;
if (!isNaN(max)) {
random = Math.random(); //value >= 0.0 and < 1.0
random = Math.floor(random * max); //value is an integer between 0 and max - 1
random = random + 1; //value is an integer between 1 and max
}
return random;
};
var playGame = function () {
var compNum, userNum = \"\";
resetFields();
while (compTotal !== 50 && userTotal !== 50) {
compNum = getRandomNumber(5);
userNum = prompt(\"Enter a number between 1 and 5, or 999 to quit\");
if (!isNaN(userNum) && userNum != 999 && parseInt(userNum) <= 5 && parseInt(userNum) >= 1) {
userNum = parseInt(userNum);
if ((compNum + userNum) % 2 == 0) {
compTotal += (compNum + userNum);
} else {
userTotal += (compNum + userNum);
}
$(\"computer\").value = compNum;
$(\"player\").value = userNum;
$(\"odd\").value = userTotal;
$(\"even\").value = compTotal;
} else if (userNum == 999) {
alert(\"You quit!!!\");
break;
} else {
alert(\"Please enter a number between 1 and 5!!!\");
}
}
if (userTotal === 50) {
alert(\"You win!!!\");
} else {
alert(\"You Lose!!!\");
}
};
var resetFields = function () {
$(\"player\").value = \"0\";
$(\"computer\").value = \"0\";
$(\"odd\").value = \"0\";
$(\"even\").value = \"0\";
$(\"message\").firstChild.nodeValue = \"\";
};
window.onload = function () {
$(\"play\").onclick = playGame;
$(\"play\").focus();
};
