0
181
ViewsCómo mostrar una palabra del resultado especificado
Tengo problemas para mostrar palabras en la pantalla. Quiero el resultado 1,2,3,4,5,6,7,8,9,10 entonces es Fail y 11,12,13,14,15,16,17,18 es cierto pero no soy experto familia. ¿Alguien me ayuda por favor? Lo siento si es difícil de entender porque uso el traductor de Google. Aquí está mi código
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> 
3 answers
Answer question0
Sugeriría crear una matriz rollResults para contener los resultados de tirar cada dado.
Luego podemos obtener la puntuación total, usando Array.reduce() para sumar los resultados de la tirada.
Luego mostraríamos las tiradas de dados individuales junto con el total y si la tirada fue exitosa (por ejemplo, si fue> 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>0
Según la imagen , parece (y por lo tanto se asume) que el objetivo es mostrar cada uno de los dados individuales. En cambio, los números se agregan y representan.
Por favor reemplace esto:
document.querySelector("#total").innerHTML = "Your roll is " + ( (dieOneValue +1) + (dieTwoValue + 1) + (dieTthreeValue + 1) );Con este:
document.querySelector("#total").innerHTML = "Your roll is " + (dieOneValue +1) + ', ' + (dieTwoValue + 1) + ', ' + (dieTthreeValue + 1);O, como sugiere DBS en el comentario a continuación, podemos usar cadenas de plantilla como esta:
document.querySelector("#total").innerHTML = `Your roll is $(dieOneValue +1), $(dieTwoValue + 1), $(dieTthreeValue + 1)`; Cualquiera de los métodos anteriores introduciría una , ('coma') entre cada resultado de tirada de dado. Si no desea 'coma', puede usar un espacio.
Además: en caso de que el objetivo sea mostrar 'fallo' si el total es 1, 2, ... 10 y 'verdadero' si el total es 11, 12, ... 18, intente esto:
document.querySelector("#total").innerHTML = `Your roll is ${(dieOneValue + dieTwoValue + dieTthreeValue + 3) < 11 ? 'fail' : 'true'}`;0
Simplemente puede resumir los valores y usar eso
const dieSum = (dieOneValue +1) + (dieTwoValue + 1) + (dieTthreeValue + 1); let result = (dieSum > 10); // true if <=10 or false if >=11en su lugar, puede usar este resultado para poner lo que quiera en la interfaz de usuario
document.querySelector("#total").innerHTML = dieSum > 10 ? "Pass" : "Fail"