我希望循环只运行一次JavaScript

Question

我想运行一次这个游戏，然后在任务完成后链接到另一个html页面。然而，一旦用户成功完成挑战，这个游戏就会重复。

我只想玩一次游戏。如果需要，我可以上传html和css文件。

希望有人能解决这个问题，如果你需要的话，我可以上传html和css文件。尽管这些很简单。

const onSectionClick = event => {
event.preventDefault()
const cardClicked = event.composedPath().find(element => (
[...element.classList].includes('card')))
if (!cardClicked.disabled) {
cardClicked.disabled = true
const currentRotation = cardClicked.dataset.rotation
const newRotation = `${Number(currentRotation) + 1}`
cardClicked.dataset.rotation = newRotation
if (newRotation === "4") {
const imageFragment = cardClicked.querySelector('.imageFragment')
cardClicked.addEventListener('transitionend', () => {
imageFragment.style.transitionDuration = "0s"
requestAnimationFrame(() => {
cardClicked.dataset.rotation = "0"
requestAnimationFrame(() => {
imageFragment.style.transitionDuration = ""
})
})
}, {
once: true
})
}
const allCards = [...document.querySelectorAll('.card')]
const isPuzzleComplete = allCards.every(card => ["0", "4"].includes(card.dataset.rotation))
if (isPuzzleComplete) {
allCards.forEach(card => card.disabled = true)
setTimeout(() => {
index += 1
if (index === puzzles.length) {
index = 0
}
tableOnStart(puzzles[index], 3)
}, 3000)
} else {
cardClicked.addEventListener('transitionend', () => {
cardClicked.disabled = false
}, {
once: true
})
}
}
}
const tableOnStart = (puzzle, size = 4) => {
const getRandomRotation = () => Math.floor(Math.random() * 4)
const renderCard = (x, y) => `
<button class="card" data-rotation="${getRandomRotation()}" style="width: ${(80 / size)}vmin; height: ${(80 / size)}vmin;">
<div class="imageFragment" style=" background-image: url('https://i.imgur.com/z2VZELB.jpeg'); background-position: ${y * (100 / (size - 1))}% ${x * (100 / (size - 1))}%; background-size: ${(size) * 100}% ${(size) * 100}%;
"
></div>
</button>
`
const renderRow = children => `
<div class="row">${children}</div>
`
const indices = Array.from(Array(size).keys())
const boardHTML = indices.map(rowIndex => (
renderRow(
indices.map(columnIndex => (
renderCard(rowIndex, columnIndex)
)).join('')
)
)).join('')
document.getElementById('board').innerHTML = boardHTML
document.querySelectorAll('.card').forEach(card => {
card.addEventListener('click', onSectionClick)
card.addEventListener('contextmenu', onSectionClick)
card.addEventListener('auxclick', onSectionClick)
})
}
const puzzles = [
'floorMap'
]
let index = Math.floor(Math.random() * puzzles.length)
tableOnStart(puzzles[index], 3)
document.addEventListener('click', {
once: true
})

* {
padding: 0;
margin: 0;
box-sizing: border-box;
user-select: none;
font-size: 0;
}
html,
body {
height: 100%;
}
#board {
background-image: url("https://images.unsplash.com/photo-1523861751938-121b5323b48b?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8ZmlyZXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60");
;
background-size: cover;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@keyframes fadeIn {
from {
transform: scale(0.2);
}
to {
transform: scale(1);
}
}
.card {
margin: 2px;
background-color: transparent;
transition: transform 2s;
animation-duration: 0.3s;
animation-name: fadeIn;
}
.imageFragment {
width: 100%;
height: 100%;
transition: transform 0.4s;
}
.card[data-rotation="0"] .imageFragment {
transform: rotate(0deg);
}
.card[data-rotation="1"] .imageFragment {
transform: rotate(90deg);
}
.card[data-rotation="2"] .imageFragment {
transform: rotate(180deg);
}
.card[data-rotation="3"] .imageFragment {
transform: rotate(270deg);
}
.card[data-rotation="4"] .imageFragment {
transform: rotate(360deg);
}

<div id="board"></div>

Answer 1

只需执行以下操作：

if (isPuzzleComplete) {
allCards.forEach(card => card.disabled = true)
setTimeout(() => {
index += 1
if (index === puzzles.length) {
// index = 0
alert("DONE!") 
window.location.replace("https://stackoverflow.com/");
}
else tableOnStart(puzzles[index], 3)
}, 1000) 

const onSectionClick = event => {
event.preventDefault()
const cardClicked = event.composedPath().find(element => (
[...element.classList].includes('card')))
if (!cardClicked.disabled) {
cardClicked.disabled = true
const currentRotation = cardClicked.dataset.rotation
const newRotation = `${Number(currentRotation) + 1}`
cardClicked.dataset.rotation = newRotation
if (newRotation === "4") {
const imageFragment = cardClicked.querySelector('.imageFragment')
cardClicked.addEventListener('transitionend', () => {
imageFragment.style.transitionDuration = "0s"
requestAnimationFrame(() => {
cardClicked.dataset.rotation = "0"
requestAnimationFrame(() => {
imageFragment.style.transitionDuration = ""
})
})
}, {
once: true
})
}
const allCards = [...document.querySelectorAll('.card')]
const isPuzzleComplete = allCards.every(card => ["0", "4"].includes(card.dataset.rotation))
if (isPuzzleComplete) {
allCards.forEach(card => card.disabled = true)
setTimeout(() => {
index += 1
if (index === puzzles.length) {
alert("DONE!")
window.location.replace("https://stackoverflow.com/");
} else tableOnStart(puzzles[index], 3)
}, 1000)
} else {
cardClicked.addEventListener('transitionend', () => {
cardClicked.disabled = false
}, {
once: true
})
}
}
}
const tableOnStart = (puzzle, size = 4) => {
const getRandomRotation = () => Math.floor(Math.random() * 4)
const renderCard = (x, y) => `
<button class="card" data-rotation="${getRandomRotation()}" style="width: ${(80 / size)}vmin; height: ${(80 / size)}vmin;">
<div class="imageFragment" style=" background-image: url('https://i.imgur.com/z2VZELB.jpeg'); background-position: ${y * (100 / (size - 1))}% ${x * (100 / (size - 1))}%; background-size: ${(size) * 100}% ${(size) * 100}%;
"
></div>
</button>
`
const renderRow = children => `
<div class="row">${children}</div>
`
const indices = Array.from(Array(size).keys())
const boardHTML = indices.map(rowIndex => (
renderRow(
indices.map(columnIndex => (
renderCard(rowIndex, columnIndex)
)).join('')
)
)).join('')
document.getElementById('board').innerHTML = boardHTML
document.querySelectorAll('.card').forEach(card => {
card.addEventListener('click', onSectionClick)
card.addEventListener('contextmenu', onSectionClick)
card.addEventListener('auxclick', onSectionClick)
})
}
const puzzles = [
'floorMap'
]
let index = Math.floor(Math.random() * puzzles.length)
tableOnStart(puzzles[index], 3)
document.addEventListener('click', {
once: true
})

* {
padding: 0;
margin: 0;
box-sizing: border-box;
user-select: none;
font-size: 0;
}
html,
body {
height: 100%;
}
#board {
background-image: url("https://images.unsplash.com/photo-1523861751938-121b5323b48b?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8ZmlyZXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60");
;
background-size: cover;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@keyframes fadeIn {
from {
transform: scale(0.2);
}
to {
transform: scale(1);
}
}
.card {
margin: 2px;
background-color: transparent;
transition: transform 2s;
animation-duration: 0.3s;
animation-name: fadeIn;
}
.imageFragment {
width: 100%;
height: 100%;
transition: transform 0.4s;
}
.card[data-rotation="0"] .imageFragment {
transform: rotate(0deg);
}
.card[data-rotation="1"] .imageFragment {
transform: rotate(90deg);
}
.card[data-rotation="2"] .imageFragment {
transform: rotate(180deg);
}
.card[data-rotation="3"] .imageFragment {
transform: rotate(270deg);
}
.card[data-rotation="4"] .imageFragment {
transform: rotate(360deg);
}

<div id="board"></div>

Answer 2

我自己想好了。我更换了tableOnStart(puzzles[index], 3)具有window.location.replace("https://stackoverflow.com/");