Question

我正在构建一个简单的JavaScript html游戏。只是问与答。玩家只有20秒的时间回答问题。我的问题是，时间到了，玩家仍然可以回答问题，并且分数不断增加。

时间到了，如何显示“游戏结束”。另外，如何显示他们的分数？

const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')

let shuffledQuestions, currentQuestionIndex
let countRightAnswers = 0;

startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
  currentQuestionIndex++
  setNextQuestion()
}
)
function startGame() {
  startButton.classList.add('hide')
  shuffledQuestions = questions.sort(() => Math.random() - .5)
  currentQuestionIndex = 0
  questionContainerElement.classList.remove('hide')
  countRightAnswers = 0;
  c = 20;
  setNextQuestion()
}

function setNextQuestion() {
  resetState()
  showQuestion(shuffledQuestions[currentQuestionIndex])
}

function showQuestion(question) {
  questionElement.innerText = question.question
  question.answers.forEach(answer => {
    const button = document.createElement('button')
    button.innerText = answer.text
    button.classList.add('btn')
    if (answer.correct) {
      button.dataset.correct = answer.correct
    }
    button.addEventListener('click', selectAnswer)
    answerButtonsElement.appendChild(button)
  })
}

function resetState() {
  clearStatusClass(document.body)
  nextButton.classList.add('hide')
  while (answerButtonsElement.firstChild) {
    answerButtonsElement.removeChild(answerButtonsElement.firstChild)
  }
}

function selectAnswer(e) {
  const selectedButton = e.target
  const correct = selectedButton.dataset.correct
  setStatusClass(document.body, correct)
  Array.from(answerButtonsElement.children).forEach(button => {
    setStatusClass(button, button.dataset.correct)
  })
  if (shuffledQuestions.length > currentQuestionIndex + 1) {
    nextButton.classList.remove('hide')
  } else {
    startButton.innerText = 'Restart'
    startButton.classList.remove('hide')
  }
  if (selectedButton.dataset = correct) {
    countRightAnswers++;
  }
  document.getElementById('score001').innerHTML = countRightAnswers;
}

function setStatusClass(element, correct) {
  clearStatusClass(element)
  if (correct) {
    element.classList.add('correct')
  } else {
    element.classList.add('wrong')
  }
}

function clearStatusClass(element) {
  element.classList.remove('correct')
  element.classList.remove('wrong')
}

function timer001() {
  c = c - 1;
  if (c < 20) {
    time001.innerHTML = c;
  }

  if (c < 1) {
    window.clearInterval(update);
  }
}

update = setInterval('timer001()', 1000);

const questions = [
  {
    question: 'What is 4 + 4?',
    answers: [
      { text: '4', correct: false },
      { text: '22', correct: false },
      { text: '8', correct: true },
      { text: '44', correct: false }
    ]
  },
  {
    question: 'Who is the developer of this game?',
    answers: [
      { text: 'Otis', correct: true },
      { text: 'Jesus', correct: false },
      { text: 'Mike', correct: false },
      { text: 'Jason', correct: false }
    ]
  },
  {
    question: 'What is the middle day of the week?',
    answers: [
      { text: 'Monday', correct: false },
      { text: 'Thursday', correct: true },
      { text: 'Wednesday', correct: false },
      { text: 'Friday', correct: false }
    ]
  },
  {
    question: 'What is the middle day of the work week?',
    answers: [
      { text: 'Monday', correct: false },
      { text: 'Thursday', correct: false },
      { text: 'Wednesday', correct: true },
      { text: 'Friday', correct: false }
    ]
  },
  {
    question: 'Monday, Tuesday, ______, Thursday?',
    answers: [
      { text: 'Monday', correct: false },
      { text: 'Thursday', correct: false },
      { text: 'Wednesday', correct: true },
      { text: 'Friday', correct: false }
    ]
  },
  {
    question: '1, 2, 3, ____, 5',
    answers: [
      { text: '1', correct: false },
      { text: '2', correct: false },
      { text: '4', correct: true },
      { text: '3', correct: false }
    ]
  },
  {
    question: 'What is 2 + 2?',
    answers: [
      { text: '4', correct: true },
      { text: '2', correct: false },
      { text: '22', correct: false },
      { text: '24', correct: false }
    ]
  },
  {
    question: 'May, June, ______?',
    answers: [
      { text: 'May', correct: false },
      { text: 'July', correct: true },
      { text: 'June', correct: false },
      { text: 'April', correct: false }
    ]
  },
  {
    question: 'Untied State of ______',
    answers: [
      { text: 'Washington', correct: false },
      { text: 'New York', correct: false },
      { text: 'America', correct: true },
      { text: 'Maryland', correct: false }
    ]
  },
  {
    question: 'If b=y, and y=3, then b=?',
    answers: [
      { text: '2', correct: false },
      { text: '3', correct: true },
      { text: '4', correct: false },
      { text: '6', correct: false }
    ]
  },
  {
    question: 'If ab=y, and a=4, b=2, then y=?',
    answers: [
      { text: '8', correct: true },
      { text: '6', correct: false },
      { text: '4', correct: false },
      { text: '2', correct: false }
    ]
  },
  {
    question: 'If x=y, and x=0, then y=??',
    answers: [
      { text: '0', correct: true },
      { text: '2', correct: false },
      { text: '4', correct: false },
      { text: '8', correct: false }
    ]
  }
]

*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: Gotham Rounded;
}

:root {
  --hue-neutral: 200;
  --hue-wrong: 0;
  --hue-correct: 145;
}

body {
  --hue: var(--hue-neutral);
  padding: 0;
  margin: 0;
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-color: hsl(var(--hue), 100%, 20%);
}

body.correct {
  --hue: var(--hue-correct);
}

body.wrong {
  --hue: var(--hue-wrong);
}

.container {
  width: 800px;
  max-width: 80%;
  background-color: white;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 0 10px 2px;
}

.btn-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px;
  margin: 20px 0;
}

.btn {
  --hue: var(--hue-neutral);
  border: 1px solid hsl(var(--hue), 100%, 30%);
  background-color: hsl(var(--hue), 100%, 50%);
  border-radius: 5px;
  padding: 5px 10px;
  color: white;
  outline: none;
}

.btn:hover {
  border-color: black;
}

.btn.correct {
  --hue: var(--hue-correct);
  color: black;
}

.btn.wrong {
  --hue: var(--hue-wrong);
}

.start-btn,
.next-btn {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 10px 20px;
}

.controls {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hide {
  display: none;
}

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link href="styles.css" rel="stylesheet" />
    <script defer src="script.js"></script>
    <span id="right-answers"></span>
    <title>Games</title>
  </head>
  <body>
    <div class="container">
      <div id="question-container" class="hide">
        <div id="question">Question</div>
        <text>Score: <text id="score001">0</text></text
        ><br />
        <text>Time: <text id="time001">20</text></text
        ><br />
        <div id="answer-buttons" class="btn-grid">
          <button class="btn">Answer 1</button>
          <button class="btn">Answer 2</button>
          <button class="btn">Answer 3</button>
          <button class="btn">Answer 4</button>
        </div>
      </div>
      <div class="controls">
        <button id="start-btn" class="start-btn btn">Start</button>
        <button id="next-btn" class="next-btn btn hide">Next</button>
      </div>
    </div>
  </body>
</html>

Answer 1

要在计时器计时后禁用按钮：

function timer001() {
  c = c - 1;
  if (c < 20) {
      time001.innerHTML = c;
  }
 
  if (c < 1) 
  {
    window.clearInterval(update);
    
    // get all of the buttons by class
    let buttons = document.getElementsByClassName("btn")
    
    // loop through the array of buttons, set them to be disabled
    for (let i = 0; i < buttons.length; i++) 
    {
       buttons[i].disabled = true
    }   
  }
}

游戏结束时，您的游戏似乎已经显示了得分，但是也许您可以create a popup显示“游戏结束”屏幕。

或者，您可以使用JavaScript将问题名称替换为“游戏结束”：

function timer001() {
  c = c - 1;
  if (c < 20) {
      time001.innerHTML = c;
  }
 
  if (c < 1) 
  {
    window.clearInterval(update);
    let buttons = document.getElementsByClassName("btn")

    for (let i = 0; i < buttons.length; i++) 
    {
       buttons[i].disabled = true
    }

    // this line below will replace the question with "Game Over!"
    document.getElementById("question").innerHTML = "Game Over!"
  }
}

JavaScript最终游戏，显示玩家最高分，排名玩家最高分

1 个答案: