如何从指定的结果中显示单词

Question

我在屏幕上显示单词有困难。我想要结果1,2,3,4,5,6,7,8,9,10然后是失败，11,12,13,14,15,16,17,18这是真的，但我不是专家家庭。谁来帮帮我？对不起，如果你很难理解，因为我使用谷歌翻译。这是我的密码

​

let images = ["dice-01.svg",
"dice-02.svg",
"dice-03.svg",
"dice-04.svg",
"dice-05.svg",
"dice-06.svg"];
let dice = document.querySelectorAll("img");

function roll(){
    dice.forEach(function(die){
        die.classList.add("shake");
    });
    setTimeout(function(){
        dice.forEach(function(die){
            die.classList.remove("shake");
        });
        let dieOneValue = Math.floor(Math.random()*6);
        let dieTwoValue = Math.floor(Math.random()*6);
        let dieTthreeValue = Math.floor(Math.random()*6);
        console.log(dieOneValue,dieTwoValue);
        document.querySelector("#die-1").setAttribute("src", images[dieOneValue]);
        document.querySelector("#die-2").setAttribute("src", images[dieTwoValue]);
        document.querySelector("#die-3").setAttribute("src", images[dieTthreeValue]);
        document.querySelector("#total").innerHTML = "Your roll is " + ( (dieOneValue +1) + (dieTwoValue + 1)  + (dieTthreeValue + 1) );
    },
    1000
    );
}
roll();

<div id="die-1"></div>
<div id="die-2"></div>
<div id="die-3"></div>
<div id="total"></div>

​

​

​

Answer 1

我建议创建一个数组rollResults，以包含滚动每个模具的结果。

然后，我们可以获得总分，使用Array.reduce()将滚动结果相加在一起。

然后，我们将输出单个模具辊和总数以及该辊是否成功(例如，如果它> 10)：

​

let images = [
    'https://upload.wikimedia.org/wikipedia/commons/0/09/Dice-1.svg',
    'https://upload.wikimedia.org/wikipedia/commons/3/34/Dice-2.svg',
    'https://upload.wikimedia.org/wikipedia/commons/c/ca/Dice-3.svg',
    "https://upload.wikimedia.org/wikipedia/commons/1/16/Dice-4.svg",
    "https://upload.wikimedia.org/wikipedia/commons/d/dc/Dice-5.svg",
    "https://upload.wikimedia.org/wikipedia/commons/1/14/Dice-6.svg"
];

let dice = document.querySelectorAll("img");

function getDieResult() {
    return Math.floor(Math.random() * 6) + 1;
}

function roll(){
    dice.forEach(function(die){
        die.classList.add("shake");
    });
    setTimeout(function(){
        dice.forEach(function(die){
            die.classList.remove("shake");
        });
        let rollResults = Array.from({ length: dice.length }, (v,k) => getDieResult());
        let total = rollResults.reduce((total, roll) => total + roll);
        rollResults.forEach((result, idx) => {
            document.querySelector(`#die-${idx+1}`).setAttribute("src", images[result - 1]);
        })
        const success = (total > 10) ? "True": "False"
        document.querySelector("#total").innerHTML = "<br>Your roll is " + rollResults.join(", ")  + "<br> Total = " + total;
        document.querySelector("#total").innerHTML += "<br>Success = " + success;
    },
    250
    );
}
roll();

<img id='die-1' width='50px'>
<img id='die-2' width='50px'>
<img id='die-3' width='50px'>

<div id='total'></div>
<br>
<button onclick='roll()'>Roll the dice!</button>

​

Answer 2

根据图像，它似乎(因此假定)目标是显示每一个单独的模具辊。相反，数字正在被添加和渲染。

请将其替换：

document.querySelector("#total").innerHTML = "Your roll is " + ( (dieOneValue +1) + (dieTwoValue + 1)  + (dieTthreeValue + 1) );

在这方面：

document.querySelector("#total").innerHTML = "Your roll is " + (dieOneValue +1) + ', ' + (dieTwoValue + 1) + ', '  + (dieTthreeValue + 1);

或者，正如DBS在下面的评论中所建议的那样，我们可以这样使用模板串：

document.querySelector("#total").innerHTML = `Your roll is $(dieOneValue +1), $(dieTwoValue + 1), $(dieTthreeValue + 1)`;

上述任何一种方法都会在每个滚动结果之间引入一个, (‘逗号’)。如果不需要“逗号”，您可以使用空格。

此外:如果目标是显示“失败”(如果总数为1，2 )，则显示“...10”，如果总数为11、12、. 18，则显示“true”，然后尝试如下：

document.querySelector("#total").innerHTML = `Your roll is ${(dieOneValue + dieTwoValue + dieTthreeValue + 3) < 11 ? 'fail' : 'true'}`;

Answer 3

您可以简单地总结这些值并使用它。

const dieSum = (dieOneValue +1) + (dieTwoValue + 1)  + (dieTthreeValue + 1);
let result = (dieSum > 10); // true if <=10 or false if >=11

您可以使用此结果，以便在UI中放置您想要的任何内容。

document.querySelector("#total").innerHTML = dieSum > 10 ? "Pass" : "Fail"