Rolling several dice (JavaScript)

Question

我试图了解如何同时掷几个骰子，但每个骰子的随机值不同。

问题是，我需要问玩家想掷多少骰子，但我不知道该怎么做，所以我在这里寻求帮助。

最后一件事，骰子是一个宽100像素、高100像素的精灵。

// the dice div
function createDice() {
let divDice = document.createElement('div');
divDice.className = 'dice';
document.querySelector('#player').appendChild(divDice);
}
// multiple dice throw
let enteredNumber = Number(prompt("How many dice do you want to roll?"));
for (let i=0; i<enteredNumber; i++) {
createDice();
};
// function rollDice
function rollDice(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
let face = {
min : 1,
max : 6,
}
// function to print the right face of the dice
function diceImage (x) {
document.querySelector('.dice').style.backgroundPosition = x;
}
// function to print the right face of the dice according to the random number
let dice = rollDice(face.min, face.max);
console.log(dice);
if (dice === 1) {
diceImage("600px 0");
} else if (dice === 2) {
diceImage("500px 0");
} else if (dice === 3) {
diceImage("400px 0");
} else if (dice === 4) {
diceImage("300px 0");
} else if (dice === 5) {
diceImage("200px 0");
} else if (dice === 6) {
diceImage("100px 0");
};

body {
background-color: #f39c12;
}
#app {
display: flex;
}
#player {
background-color: #f39c12;
}
#dealer {
background-color: #e67e22;
}
.board {
min-height: 100vh;
width:100%;
display:flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
}
.dice {
background-image: url('../images/dice-sprite.png');
width: 100px;
height: 100px;
margin: 1em;
}

<div id="app">
<div class="board" id="player"></div>
</div>

Answer 1

这是您可以启动的最小工作示例：

function createDice() {
let divDice = document.createElement('div');
divDice.className = 'dice';
divDice.innerHTML = rollDice()
document.querySelector('#player').appendChild(divDice);
}
function rollDice() {
return Math.round(Math.random() * 6 + 1)
}
function setupBoard() {
let enteredNumber = Number(prompt("How many dice do you want to roll?"));
for (let i=0; i<enteredNumber; i++) {
createDice()
};
}
setupBoard()

body {
background-color: #f39c12;
}
#app {
display: flex;
}
#player {
background-color: #f39c12;
}
#dealer {
background-color: #e67e22;
}
.board {
min-height: 100vh;
width:100%;
display:flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
}
.dice {
background-image: 'green';
color: black;
font-size: 2em;
width: 100px;
height: 100px;
margin: 1em;
}

<div id="app">
<div class="board" id="player"></div>
</div>

Answer 2

既然你已经得到了答案，这里有一点"高级"；带有动画的版本：

"use strict";
const input = document.getElementById("diceNum");
const player = document.querySelector('#player');
let face = {
min : 1,
max : 6,
}
// the dice div
function createDice(num) {
const dice = document.querySelector("#diceTempl > .dice").cloneNode(true);

dice.value = num;
dice.setAttribute("num", rollDice(face.min, face.max, [num]));
setTimeout(() => dice.setAttribute("num", num), 0);
document.querySelector('#player').appendChild(dice);
return dice;
}
function update(enteredNumber)
{
if (enteredNumber === undefined)
enteredNumber = input.value;
input.value = enteredNumber;
if (player.children.length > enteredNumber)
{
while(player.children.length > enteredNumber)
player.removeChild(player.lastChild);
}
const dices = []
for (let i = 0, oldDice, dice, skip; i < enteredNumber; i++)
{
dice = (oldDice = player.children[i]) || createDice(rollDice(face.min, face.max));
skip = [~~dice.getAttribute("num")]; //set to undefined to allow repeat number on the same dice
if (oldDice)
dice.setAttribute("num", dice.value = rollDice(face.min, face.max, skip));
dices[dices.length] = dice;
};
console.clear();
console.log("numbers:", dices.map(d => d.value).toString());
}
update(rollDice(1, 5));
// function rollDice
function rollDice(min, max, skip) {
let n;
do
n = Math.round(Math.random() * (max - min) + min);
while(skip !== undefined && skip.indexOf(n) != -1);
return n;
}

body {
background-color: #f39c12;
}
#app {
display: flex;
}
#player {
background-color: #f39c12;
}
#dealer {
background-color: #e67e22;
}
.board {
min-height: 100vh;
width:100%;
display:flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
}
.dice
{
width: 100px;
height: 100px;
perspective: 300px;
margin: 1em;
--bgColor: rgba(255,255,255,0.5); /* background color during animation */
--bgColorFront: rgba(255,255,255,0.95); /* background color of the visible face */
}
.dice > div {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transform: translateZ(-50px);
transition: transform 1s;
}
.dice > div > div
{
position: absolute;
width: 100%;
height: 100%;
border-radius: 13px;
background-color: var(--bgColor);
background-image: url('https://i.stack.imgur.com/ukfHJ.png');
transition: background-color 1s;
}
.dice[num="1"] > div
{
transform: translateZ(-50px) rotateY(   0deg);
}
.dice[num="2"] > div
{
transform: translateZ(-50px) rotateX(  90deg);
}
.dice[num="3"] > div
{
transform: translateZ(-50px) rotateY( -90deg);
}
.dice[num="4"] > div
{
transform: translateZ(-50px) rotateY(  90deg);
}
.dice[num="5"] > div
{
transform: translateZ(-50px) rotateX( -90deg);
}
.dice[num="6"] > div
{
transform: translateZ(-50px) rotateY(-180deg);
}
.dice[num="1"] .num1
{
background-color: var(--bgColorFront);
}
.dice[num="2"] .num2
{
background-color: var(--bgColorFront);
}
.dice[num="3"] .num3
{
background-color: var(--bgColorFront);
}
.dice[num="4"] .num4
{
background-color: var(--bgColorFront);
}
.dice[num="5"] .num5
{
background-color: var(--bgColorFront);
}
.dice[num="6"] .num6
{
background-color: var(--bgColorFront);
}
.num1
{
transform: rotateY(  0deg) translateZ(50px);
background-position: 600px 0;
}
.num2
{
transform: rotateX(-90deg) translateZ(50px);
background-position: 500px 0;
}
.num3
{
transform: rotateY( 90deg) translateZ(50px);
background-position: 400px 0;
}
.num4
{
transform: rotateY(-90deg) translateZ(50px);
background-position: 300px 0;
}
.num5
{
transform: rotateX( 90deg) translateZ(50px);
background-position: 200px 0;
}
.num6
{
transform: rotateY(180deg) translateZ(50px);
background-position: 100px 0;
}
#diceTempl
{
display: none;
}

<div id="diceTempl">
<div class="dice">
<div>
<div class="num1"></div>
<div class="num2"></div>
<div class="num3"></div>
<div class="num4"></div>
<div class="num5"></div>
<div class="num6"></div>
</div>
</div>
</div>
number of dices: <input id="diceNum" type="number" min="1" max="30">
<button onclick="update()">Roll</button>
<div id="app">
<div class="board" id="player"></div>
</div>