我希望循環只運行一次 - 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

我自己想通了。 我用window.location.replace("https://stackoverflow.com/");替換tableOnStart(puzzles[index], 3) );