骰子只为一名玩家掷骰子

我试图编写一个简单的Ludo/掷骰子游戏，当点击Roll Dice按钮时，骰子会滚动，但骰子只为一名玩家滚动。我想这可能是因为我使用的是getElementbyId方法，但当将其更改为class并使用querySelectorAll时，会导致两个骰子图像都是静态的。

// 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>

id属性应该包含一个唯一的名称。两个img标记都有相同的id，因此document.getElementById('display-image'(会选择它找到的第一个。

假设你想在点击一个按钮时同时掷两个骰子，你可以做以下操作。

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>

当然，这只是一个粗略的例子。只要花一点时间和精力，你就能写出更好的东西。

您需要对数组进行随机排序，而不是使用id，而是使用class和querySelectorAll，如：

// 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>

相关内容

最新更新

热门标签：