我正在进行四局连通游戏，现在我可以将芯片放入适当的插槽中，也可以从红筹变为黄筹。但是，当您放下芯片时，它不会进入电路板。它位于板的外部。我希望被丢弃的芯片落在每个插槽内的深蓝色圆圈上，并落在插槽本身之下。因此，它看起来很逼真的3D效果。我以为我可以使用z-index做到这一点，但是我有2个问题。1st当我将div槽设置为3的z-index时，即使下降的筹码的z-index为2；芯片仍然掉在插槽上吗？第二，即使确实可行，由于div的z索引较高，每个槽口中的深蓝色圆圈现在也将被隐藏，但它们必须保持相同才能使它们都可见。但是，如果它们相同，那么芯片不能落入电路板中吗？关于如何产生这种效果的任何想法？//grab all slot positions on the boardconst 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 positionfor(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'; } }}
1 回答
泛舟湖上清波郎朗
TA贡献1818条经验 获得超3个赞
这是您的代码的修改后的版本。首先，我将芯片元素更改为仅考虑一个伪元素而不是2，并且使用CSS变量来轻松更改颜色。
然后，对于电路板，我使用两个元素创建了每个单元，以便能够具有3D效果。您将看到伪元素，我在其中应用了径向渐变以创建孔，并且该层将位于芯片将落在后面的顶部：
//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';
}
}
}
/** {
outline: 1px solid red;
}*/
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
background-color: #e5e6e8;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
}
.board-wrapper {
padding-top: 100px;
display: flex;
justify-content: center;
margin: auto auto 0 auto; /*ask why this is needed*/
position: relative;
overflow: hidden;
}
.board {
display: flex;
flex-wrap: wrap;
max-width: 706px;
background-color: #00c;
padding: 3px;
}
.board div {
width: 100px;
height: 100px;
position: relative;
}
.board div span {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #00c;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
box-shadow: inset 0px 0px 13px #0606aa;
}
.board div span:before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
background: radial-gradient(circle, transparent 40px, blue 0);
border: 3px solid #00c;
z-index: 3;
}
.board .chip {
display: block;
position: absolute;
background-color: transparent;
top: 0;
left: 0;
right: 0;
height: 100px;
}
.board .chip:after {
content: "";
width: 80px;
height: 80px;
border-radius: 50%;
border: 15px solid red;
background-color: red;
box-shadow: inset 0px 0px 20px #cc0000;
position: absolute;
left: 3px;
top: 0;
opacity: 0;
transition: all .5s ease;
}
.board div:nth-of-type(7n+1):hover~.chip:after {
transform: translateX(10px);
opacity: 1;
}
.board div:nth-of-type(7n+1):hover~.chip:before {
transform: translateX(10px);
opacity: 1;
}
.board div:nth-of-type(7n+2):hover~.chip:after {
transform: translateX(110px);
opacity: 1;
}
.board div:nth-of-type(7n+2):hover~.chip:before {
transform: translateX(110px);
opacity: 1;
}
.board div:nth-of-type(7n+3):hover~.chip:after {
transform: translateX(210px);
opacity: 1;
}
.board div:nth-of-type(7n+3):hover~.chip:before {
transform: translateX(210px);
opacity: 1;
}
.board div:nth-of-type(7n+4):hover~.chip:after {
transform: translateX(310px);
opacity: 1;
}
.board div:nth-of-type(7n+4):hover~.chip:before {
transform: translateX(310px);
opacity: 1;
}
.board div:nth-of-type(7n+5):hover~.chip:after {
transform: translateX(410px);
opacity: 1;
}
.board div:nth-of-type(7n+5):hover~.chip:before {
transform: translateX(410px);
opacity: 1;
}
.board div:nth-of-type(7n+6):hover~.chip:after {
transform: translateX(510px);
opacity: 1;
}
.board div:nth-of-type(7n+6):hover~.chip:before {
transform: translateX(510px);
opacity: 1;
}
.board div:nth-of-type(7n+7):hover~.chip:after {
transform: translateX(610px);
opacity: 1;
}
.board div:nth-of-type(7n+7):hover~.chip:before {
transform: translateX(610px);
opacity: 1;
}
.p1:after,
.p2:after {
content: "";
display: inline-block;
width: 80px;
height: 80px;
border-radius: 50%;
border: 15px solid var(--c, red);
background-color: var(--c, red);
box-shadow: inset 0px 0px 20px var(--s, #cc0000);
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 1;
animation-name: drop;
animation-fill-mode: forwards;
animation-duration: .5s;
animation-timing-function: ease-in;
}
.p2 {
--c: yellow;
--s: #ced639;
}
@keyframes drop {
from {
top: -1500px;
}
to {
top: 0;
}
}
<div class="board-wrapper">
<div class="board">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<span class="chip"></span>
</div>
</div>
添加回答
举报
0/150
提交
取消