我正在进行四局连通游戏，现在我可以将芯片放入适当的插槽中，也可以从红筹变为黄筹。但是，当您放下芯片时，它不会进入电路板。它位于板的外部。我希望被丢弃的芯片落在每个插槽内的深蓝色圆圈上，并落在插槽本身之下。因此，它看起来很逼真的3D效果。
我以为我可以使用z-index做到这一点，但是我有2个问题。1st当我将div槽设置为3的z-index时，即使下降的筹码的z-index为2；芯片仍然掉在插槽上吗？第二，即使确实可行，由于div的z索引较高，每个槽口中的深蓝色圆圈现在也将被隐藏，但它们必须保持相同才能使它们都可见。但是，如果它们相同，那么芯片不能落入电路板中吗？
关于如何产生这种效果的任何想法？
//grab all slot positions on the board
const slots = document.querySelectorAll('.board div');
let player = 'p1';
let board = [
0, 1, 2, 3, 4, 5, 6,
7, 8, 9, 10, 11, 12, 13,
14, 15, 16, 17, 18, 19, 20,
21, 22, 23, 24, 25, 26, 27,
28, 29, 30, 31, 32, 33, 34,
35, 36, 37, 38, 39, 40, 41,
]
//assign a class to each slot to represent its position
for(let i = 0; i < slots.length; i++) {
//add class to each div
slots[i].classList.add('c' + i);
//add the slot to each div
let slot = document.createElement('span');
slots[i].appendChild(slot);
//add the function with the game logic to each slot
slots[i].addEventListener('click', runGame);
}
function runGame() {
//figure out which column the selected slot sits in
const slotColumn = (Number(this.className.slice(1, 3)) % 7);
//create an array to store all the slots that share the above column
const columnArray = [];
//grab all the slots that sit in that column
for(let i = 0; i < board.length; i++) {
if(board[i] % 7 === slotColumn) columnArray.push(board[i]);
}
//drop chip in the chosen column
dropChip(columnArray);
function dropChip(column) {
//select bottom most slot that's available in the column
for(let i = column.length - 1; i >= 0; i--) {
if(column[i] !== 'p1' || column[i] !== 'p2') {
board[column[i]] = player;
slots[column[i]].classList.add(player);
switchPlayer(player);
break;
}
}
function switchPlayer(currentPlayer) {
if(currentPlayer === 'p1') player = 'p2';
else if(currentPlayer ==='p2') player = 'p1';
}
}
}
泛舟湖上清波郎朗
相关分类