Estoy tratando de codificar un juego simple de Ludo/tirar dados en el que los dados Roll Dice cuando se hace clic en el botón Tirar dados, sin embargo, los dados solo ruedan para un jugador. Creo que podría deberse a que estoy usando el método getElementbyId , sin embargo, cuando lo cambio a class y uso querySelectorAll en su lugar, las dos imágenes de dados son estáticas.
// Declare Variables const images = ['dice1.png', 'dice2.png', 'dice3.png', 'dice4.png', 'dice5.png', 'dice6.png'] // Randomize function playerRoll() { ranImage = Math.floor(Math.random() * images.length); rollDice = images[ranImage]; document.getElementById('display-image').src = `./images/${rollDice}` } .dice{ cursor: pointer; } <body> <h1>Ludo Game</h1> <h2>Player 1</h2> <div class="dice-image"></div> <div class="dice"> <img id="display-image" src="/images/dice1.png" height="100px" weight="100px"> </div> <h2>Player 2</h2> <div class="dice-image"></div> <div class="dice"> <img id="display-image" src="/images/dice4.png" height="100px" weight="100px"> </div> </div> <button id="roll-button" onclick="playerRoll()">Roll Dice</button> <script src="index.js"></script> </body> </html>El atributo id debe contener un nombre único. Ambas etiquetas img tienen la misma identificación y, por lo tanto, document.getElementById('display-image') selecciona la primera que encuentra.
Suponiendo que desea tirar ambos dados con el clic de un botón, podría hacer lo siguiente.
function playerRoll() { ranImage = Math.floor(Math.random() * images.length); rollDice = images[ranImage]; document.getElementById('display-image-1').src = `./images/${rollDice}`; ranImage = Math.floor(Math.random() * images.length); rollDice = images[ranImage]; document.getElementById('display-image-2').src = `./images/${rollDice}`; } <body> <h1>Ludo Game</h1> <h2>Player 1</h2> <div class="dice-image"></div> <div class="dice"> <img id="display-image-1" src="/images/dice1.png" height="100px" weight="100px"> </div> <h2>Player 2</h2> <div class="dice-image"></div> <div class="dice"> <img id="display-image-2" src="/images/dice4.png" height="100px" weight="100px"> </div> </div> <button id="roll-button" onclick="playerRoll()">Roll Dice</button> <script> // Declare Variables const images = ['dice1.png', 'dice2.png', 'dice3.png', 'dice4.png', 'dice5.png', 'dice6.png'] // Randomize function playerRoll() { ranImage = Math.floor(Math.random() * images.length); rollDice = images[ranImage]; document.getElementById('display-image').src = `./images/${rollDice}` } </script> </body>Por supuesto, este es un ejemplo crudo. Con un poco de tiempo y esfuerzo puedes escribir algo mucho mejor.
Debe ordenar la matriz al azar y en lugar de usar class de id con querySelectorAll como:
// Declare Variables const randomDice = () => Math.random() - 0.5; const images = ['dice1.png', 'dice2.png', 'dice3.png', 'dice4.png', 'dice5.png', 'dice6.png' ] // Randomize function playerRoll() { const dices = document.querySelectorAll('.display-image'); const array = [].concat(images).sort(randomDice); dices.forEach((dice, i) => { dice.src = `./images/${array[i]}` }); } .dice { cursor: pointer; } <h1>Ludo Game</h1> <h2>Player 1</h2> <div class="dice-image"></div> <div class="dice"> <img class="display-image" src="/images/dice1.png" height="100px" weight="100px"> </div> <h2>Player 2</h2> <div class="dice-image"></div> <div class="dice"> <img class="display-image" src="/images/dice4.png" height="100px" weight="100px"> </div> <button id="roll-button" onclick="playerRoll()">Roll Dice</button>