In: Computer Science
If one player rolls doubles (i.e., two fours or two sixes, etc.) and is a winner for that round, he or she should get double points. If both players roll doubles then the one with the highest double gets double points. What do I need to do to my coding to make it happen?
<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Dice Game</title>
<link rel="stylesheet" type="text/css" href="dice.css">
</head>
<body>
<div class="row" align="center">
<div class="col-4">
<h3>Your Dice</h3>
<img src="diceimages/m1.png" width="100" height="100" alt="roll:
1" id="mydice1"/>
<img src="diceimages/m1.png" width="100" height="100" alt="roll:
1" id="mydice2"/>
</div>
<div class="col-4">
<h3>Opponent's Dice</h3>
<img src="diceimages/o1.png" width="100" height="100" alt="roll:
1" id="opponentdice1"/>
<img src="diceimages/o1.png" width="100" height="100" alt="roll:
1" id="opponentdice2"/>
<div id="enemy_score"></div>
</div>
<div class="col-4" align="center">
<img src="diceimages/goodluck.png" width="150" height="150"
alt="roll: 1" id="message"/><br>
<button class="roll" onClick="throwdice()">Roll
Dice</button>
<div>
<h3>
Total Points
</h3>
<div>Player points:<div
id="playerPoints"></div></div>
<div>Enemy points:<div
id="enemyPoints"></div></div>
<div>Won:<h2 id="won"></h2></div>
</div>
</div>
</div>
<script>
// var sides = ["m1.png", "m2.png", "d3.png", "d4.png", "d5.png",
"d6.png"];
var side_alt = ["roll: 1", "roll: 2", "roll: 3", "roll: 4", "roll:
5", "roll: 6"];
var totalPlayerpoints = 0,totalEnemypoints = 0
function throwdice(){
// Create Random Number between 1 and 6
var rand1 = Math.round(Math.random()*5) + 1;
var rand2 = Math.round(Math.random()*5) + 1;
var rand3 = Math.round(Math.random()*5) + 1;
var rand4 = Math.round(Math.random()*5) + 1;
// Set Images src
document.getElementById("mydice1").src = "diceimages/m" + rand1 +
".png";
document.getElementById("mydice2").src = "diceimages/m" + rand2 +
".png";
document.getElementById("opponentdice1").src = "diceimages/o" +
rand3 + ".png";
document.getElementById("opponentdice2").src = "diceimages/o" +
rand4 + ".png";
//Set Images alt
document.getElementById("mydice1").alt = side_alt[rand1];
document.getElementById("mydice2").alt = side_alt[rand2];
document.getElementById("opponentdice1").alt =
side_alt[rand3];
document.getElementById("opponentdice2").alt = side_alt[rand4];
who_won(rand1,rand2,rand3,rand4);
}
function who_won(rand1,rand2,rand3,rand4){
let player_points = rand1 + rand2;
let enemy_points = rand3 + rand4;
let result = winner(player_points,enemy_points);
document.getElementById("message").innerHTML = result;
if(totalPlayerpoints<100 &&
totalEnemypoints<100)
{
document.getElementById("playerPoints").innerHTML =
totalPlayerpoints;
document.getElementById("enemyPoints").innerHTML =
totalEnemypoints;
}
else{
if(totalPlayerpoints>totalEnemypoints)
document.getElementById("won").innerHTML = "You won";
else
document.getElementById("won").innerHTML = "You lose";
}
}
//If Statements
function winner(player, enemy) {
if (player < enemy) {
totalEnemypoints = totalEnemypoints + enemy; //updating total
points of enemy
console.log(totalEnemypoints)
document.getElementById("message").src='diceimages/youloss.png';
return
}
if (enemy < player) {
totalPlayerpoints = totalPlayerpoints + player; //updating total
points of player
console.log(totalPlayerpoints)
document.getElementById("message").src='diceimages/youwon.png';
return
}
if (player == enemy) {
document.getElementById("message").src='diceimages/tie.png';
return
}
}
</script>
</body>
</html>
Hello buddy!
I'll give you a description, what you need to do in order to implement this functionality.
But hey!, I am assuming that your HTML part is working correctly
and the only problem is to add the required functionality.
Just modify your function -----> function
who_won(rand1,rand2,rand3,rand4)
In this function you are calculating the sum of points for each
player , right?
let player_points = rand1 +
rand2;
let enemy_points = rand3 + rand4;
so, you just need to add some code after these two lines, to calculate the score according to your objective.
If one player rolls doubles (i.e., two fours or two sixes, etc.) and is a winner for that round, he or she should get double points. If both players roll doubles then the one with the highest double gets double points.
After adding the code in who_won() function -
Your function who_won(rand1,rand2,rand3,rand4) will look like this-
function who_won(rand1,rand2,rand3,rand4){
let player_points = rand1 + rand2;
let enemy_points = rand3 + rand4;
//Start of snippet of code to implement desired functionality
//if both players have double numbers, the one with higher double total,will get double points
if(rand1===rand2 && rand3===rand4){
if(rand1+rand2 > rand3+rand4){
player_points = player_points*2;
}
else{
enemy_points = enemy_points*2;
}
}
//if first player has double numbers and higher score , he will get double points
else if (rand1===rand2 && rand3!=rand4){
if(rand1+rand2 > rand3+rand4){
player_points = player_points*2;
}
}
// if enemy player has double numbers and higher score, he will get double points.
else if (rand1!=rand2 && rand3===rand4){
if(rand1+rand2 < rand3+rand4){
enemy_points = enemy_points*2;
}
}
//end of snippet of code
let result = winner(player_points,enemy_points);
document.getElementById("message").innerHTML = result;
if(totalPlayerpoints<100 && totalEnemypoints<100)
{
document.getElementById("playerPoints").innerHTML = totalPlayerpoints;
document.getElementById("enemyPoints").innerHTML = totalEnemypoints;
}
else{
if(totalPlayerpoints>totalEnemypoints)
document.getElementById("won").innerHTML = "You won";
else
document.getElementById("won").innerHTML = "You lose";
}
}
Happy coding buddy!
thumbs up ! if it helps ;)