Please do it in Javascript add any needed library and please explain the steps y
ID: 3725872 • Letter: P
Question
Please do it in Javascript add any needed library and please explain the steps you have taken. Thank you
1. Dice-Rolling Game Create an application that allowsthe user to play a Yahtzee-like game A. One button randomizes 5 onscreen numbers to a value between 1 and 6. B. The current roll number is displayed at the top of the screen. C. Each of the onscreen numbers may be frozen between rolls. D. If all five numbers are the same after any roll, Winner' is displayed on screen E. If three rolls pass and the five numbers do not match, display Try again' F. After 'Winner' or Try again' is displayed, clicking the roll button will reset the game.Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
text-align: center;
}
table {
border-collapse: collapse;
margin: auto;
}
table td {
padding: 20px;
font-size: 30px;
font-weight: bold;
text-align: center;
margin: auto;
}
button {
font-size: 40px;
padding: 10px 30px;
margin: 10px auto;
}
#result{
font-size:40px;
margin:20px;
}
</style>
</head>
<body>
<h1 align="center">Yahtzee-like Game</h1>
<button height="30px" id="roll_btn">Roll</button>
<div height="50px" border="1px"><h3>Roll Number:
<span id="roll_num"></span></h3>
</div>
<table width="80%" height="100px" border="1px">
<td id="dice1"></td>
<td id="dice2"></td>
<td id="dice3"></td>
<td id="dice4"></td>
<td id="dice5"></td>
</table>
<div id="result"></div>
<!-- <div>
<button id="reset">Reset</button>
</div> -->
</body>
<script type="text/javascript">
//assign roll number 1 to start
roll_num = 1;
//reset game if game completed... initially is_reset is false because game needs to start
is_reset = false;
//lets roll number using function roll()
function roll() {
//if game complete reset game using is_reset variable, if reset variable true, that means game is completed...
if(is_reset){
//reset all screens
reset();
//is_reset set to false, because game needs to restart
is_reset = false;
}
else{
//taking array for store screen values
arr = [];
//rolling numbers using loop for screen 1 to screen 5
for (i = 1; i <= 5; i++) {
//generating random numbers
val = Math.floor((Math.random() * 6) + 1);
//showing radom number on screen
document.getElementById("dice" + i).innerHTML = val;
//storing random number to check equal or not
arr.push(val);
}
//checking whether all screen numbers are same or not
equal = checkEqual(arr);
//if equal showing result as Winner
if(equal){
document.getElementById("result").innerHTML="<span>Winner</span>";
//after showing winner resetting game...
is_reset = true;
}
//totally we 3 rolls, checking rollnumber whether 3 or not... if three rolls are completed but not equal means loosed the game
if(roll_num==3 && !equal){
//showing message to retry again message
document.getElementById("result").innerHTML="<span>Try again</span>";
//resetting game
is_reset = true;
}
//showing roll number on screen
document.getElementById("roll_num").innerHTML = roll_num;
//incrementing roll numbers
roll_num++;
}
}
//resetting game
function reset(){
roll_num = 1;
//resetting means all screens must be empty
for (i = 1; i <= 5; i++) {
document.getElementById("dice" + i).innerHTML = "";
}
document.getElementById("roll_num").innerHTML = "";
document.getElementById("result").innerHTML="";
}
//checking 5 screen numbers are equal or not
function checkEqual(arr){
prev = arr[0];
for(i=1; i<arr.length; i++){
if(arr[i]!=prev)
return false;
}
}
</script>
</html>