我正在构建一个 SET!JavaScript 中的游戏。我创建了一个包含 81 张卡片的卡片组 (mainDeck),并将十几个卡片 (cardsOnBoard) 拼接到一组对象中,以在游戏板上创建初始卡片。当我循环通过cardsOnBoard 将它们添加到板上时,循环只添加了12 张初始卡中的10 张。我没有看到它在哪里或为什么失败。我错过了什么?
var cardsOnBoard = {
0: null,
1: null,
2: null,
3: null,
4: null,
5: null,
6: null,
7: null,
8: null,
9: null,
10: null,
11: null,
12: null,
13: null,
14: null,
15: null,
16: null,
17: null
}
function createSetDeck() {
const color = ["red", "green", "purple"]
const shape = ["cylinder", "diamond", "squiggle"]
const fill = ["outline", "solid", "filled"]
const number = ["1", "2", "3"]
for (var c = 0; c < color.length; c++) {
for (var s = 0; s < shape.length; s++) {
for (var f = 0; f < fill.length; f++) {
for (var n = 0; n < number.length; n++) {
var card =( {
Color: color[c],
Shape: shape[s],
Fill: fill[f],
Number: number[n]} )
mainDeck.push(card)
}
}
}
}
return mainDeck
}
createSetDeck()
// SHUFFLE THE DECK WITH A FISHER-YATES SHUFFLE
function shuffle (inputArr) {
var shuffledDeck = inputArr
for (var i = inputArr.length - 1; i >= 0; i--) {
var randomIndex = Math.floor(Math.random() * (i + 1))
var randomItem = shuffledDeck[randomIndex]
shuffledDeck[randomIndex] = shuffledDeck[i]
shuffledDeck[i] = randomItem
}
}
shuffle(mainDeck)
// DRAW A NUMBER OF CARDS FROM THE MAINDECK
function draw(num) {
var drawn = mainDeck.splice(0, num)
return drawn
}
// DRAW A DOZEN INITIAL CARDS
cardsOnBoard = new draw(12)
// CREATE THE GAMEBOARD OF 18 AVAILABLE CARD SLOTS
for (let i = 0; i < 18; i++) {
div = document.createElement('div');
div.id = i;
div.classList.add('cardslot');
div.addEventListener('click', function()
{
selectedSlots.push(this.id);
});
document.body.appendChild(div);
}
function renderCardsOnBoard() {
for (let [key] of Object.keys(cardsOnBoard)) {
const shape = cardsOnBoard[key].Shape
const color = cardsOnBoard[key].Color
const fill = cardsOnBoard[key].Fill
const number = cardsOnBoard[key].Number
img = document.createElement('img')
img.classList.add('cardImage')
document.getElementById(key).appendChild(img);
document.getElementById(key).querySelector('.cardImage').src = './img/' + shape + '-' + color + '-' + fill + '-' + number + '.png'
console.log(img)
}
}
renderCardsOnBoard()
最底层的函数(renderCardsOnBoard)不是用来自cardsOnBoard 的卡片填充卡片槽11 和12。