javascript - 我希望循环只运行一次 - 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>

标签： javascript

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>