如何将掷出的两个骰子的值相加

Question

我正在开发一个骰子游戏，我想显示两个骰子在初始掷骰时相加的值。

我如何实现这一目标？现在它只显示两个数字在一起，我不确定我应该将它设置为什么，以便它可以显示两个 dice.I 具有 + 运算符的相加滚动值：

让 rollpts = (dice1 + dice2); document.getElementById("points").innerHTML = "1st Roll Points:"+ + + rollpts;

例如，骰子 1 掷出 3，骰子 2 掷出 6，我希望 javascript 计算 3 + 6 并将初始“1st Roll Points”显示为 9，并将计算出的值附加到我想要的位置。我可以在控制台看到每个骰子在滚动什么。

代码笔：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;
     
    })

Answer 1

数组中的数字是字符串，需要解析成数字。您可以使用 parseInt()

更改此行：let rollpts = (parseInt(dice1) + parseInt(dice2));

或者您可以将数组中的值更改为数字而不是字符串：

let diceArr1 = [1, 2, 3, 4, 5, 6];

let diceArr2 = [1, 2, 3, 4, 5, 6];

不同之处在于，当您在字符串上使用 + 运算符时，它会连接两个字符串：

console.log('strings: ' + ('6' + '3'));
console.log('numbers: ' + (6 + 3));

你的完整 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;
     
    })

Answer 2

原因是您要添加两个字符串数字：三 + 六，所以结果是 NaN。

不是从数组中取数，而是直接从随机数中取，这样就解决了问题

let dice1 = diceRandom1 + 1; 
let dice2 = diceRandom2 + 1;

Answer 3

您的 array 有 string 个值。这就是它返回错误输出的原因。所以解决方案是...

Either 将数组值转换为整数

let diceArr1 = [1, 2, 3, 4, 5, 6];

let diceArr2 = [1, 2, 3, 4, 5, 6];

或

使用parseInt同时添加两个

let rollpts = (parseInt(dice1) + parseInt(dice2));

您可以在这里找到解决方案：https://codepen.io/suri66/pen/yLavpBQ?editors=1112

Answer 4

您正在连接字符串而不是添加整数。一种解决方案可能是使用 parseInt 将整数类型转换为字符串，如下所示：let rollpts = (parseInt(dice1, 10) + parseInt(dice2, 10)); 或者简单地在数组中使用整数。

但是，更好的解决方案可能是生成 1 到 6 之间的随机整数，如下所示：Math.floor(Math.random() * 6) + 1 并完全放弃数组。

如何将掷出的两个骰子的值相加

How to add the value of two dice rolled

javascript

html

dice