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

Question

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

我如何实现这一目标？现在它只显示两个数字在一起，我不确定应该将其设置为什么，以便显示两个骰子的附加掷骰值。我有接线员：

让rollpt=（dice1 dice2）；document.getElementById（"点"）. innerHTML="第一个滚动点："rollpt；

例如，dice1掷3，dice2掷6，我希望javascript计算36，并将初始“第一掷点数”显示为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>

脚本

    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 将整数类型化为字符串，如下所示：让 rollpts = （parseInt（dice1， 10） parseInt（dice2， 10））; 或者简单地在数组中使用整数。

但是，更好的解决方案可能是生成1到6之间的随机整数，如下所示:< code > math . floor(math . random()* 6)1 并放弃所有数组。

Answer 2

原因是你加了两个字符串数:三个六，所以结果是NaN。

不是从数组中取数字，而是直接从随机数中取，这将解决问题

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

Answer 3

数组中的数字是字符串，需要将它们解析为数字。您可以使用parseInt（）

更改这一行：let-rollpts=（parseInt（dice1）parseInt（dice2））

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

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

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

不同之处在于，当您对字符串使用< code> 运算符时，它会将两个字符串连接起来:

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