I'm working on a dice game and I want to display the value of the two dice added together on the initial roll.
How do I get that achieved? Right now it's displaying just the two numbers together,and I'm not sure what I should set it to so it can display the added rolled value of the two dice.I have the + operator:
let rollpts = (dice1 + dice2); document.getElementById("points").innerHTML = "1st Roll Points:"+ + + rollpts;
For example dice1 rolls a 3 and dice2 rolls a 6, I want javascript to calculate 3 + 6 and display the initial "1st Roll Points" as 9 and append that calculated value to my desired location. I can see what each dice is rolling in the console.
Codepen: https://codepen.io/williamsrashon/pen/PoGEgQB?editors=1111
<link rel ="stylesheet" href ="craps.css">
<link rel = "stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<div class ="buttons">
<button class = "btn" id="btn"> Roll Dice </button>
<button class = "btn"> Place Bet </button>
</div>
<div class = "points">
<h1 id ="points"> 1st Roll Points: </h1>
</div>
<main>
<div class = "container">
<div class ="dice" id="dice">
<div class = "cube" id="results">
<i id = "dice1" class="die dice1 fas fa-dice-one"></i>
<i id ="dice2" class="die dice2 fas fa-dice-two"></i>
</div>
</div>
</div>
Javascript
let btn = document.getElementById("btn");
let dice = document.querySelectorAll("dice");
let results = document.querySelectorAll("results");
let diceArr1 = ['1', '2', '3', '4', '5', '6'];
let diceArr2 = ['1', '2', '3', '4', '5', '6'];
btn.addEventListener('click', function(){
let diceRandom1 = Math.floor(Math.random() * diceArr1.length);
let diceRandom2 = Math.floor(Math.random() * diceArr2.length);
let dice1 = diceArr1[diceRandom1];
let dice2 = diceArr2[diceRandom2];
console.log(dice1,dice2);
let rollpts = (dice1 + dice2);
document.getElementById("points").innerHTML = "1st Roll Points:"+ + + rollpts;
return false;
})
The numbers in the array are strings, you need to parse them into numbers. You can do it by using parseInt()
change this line: let rollpts = (parseInt(dice1) + parseInt(dice2));
Or you can change the values in the array to be numbers instead of strings:
let diceArr1 = [1, 2, 3, 4, 5, 6];
let diceArr2 = [1, 2, 3, 4, 5, 6];
The difference is when you use the + operator on strings then it concatenates the two string:
console.log('strings: ' + ('6' + '3'));
console.log('numbers: ' + (6 + 3));your full javascript code should be something like this:
let btn = document.getElementById("btn");
let dice = document.querySelectorAll("dice");
let results = document.querySelectorAll("results");
let diceArr1 = [1, 2, 3, 4, 5, 6];
let diceArr2 = [1, 2, 3, 4, 5, 6];
btn.addEventListener('click', function(){
let diceRandom1 = Math.floor(Math.random() * diceArr1.length);
let diceRandom2 = Math.floor(Math.random() * diceArr2.length);
let dice1 = diceArr1[diceRandom1];
let dice2 = diceArr2[diceRandom2];
console.log(dice1,dice2);
let rollpts = (dice1 + dice2);
document.getElementById("points").innerHTML = "1st Roll Points:"+ + + rollpts;
return false;
})
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加