Mid-Autumn Festival Lantern Riddles Game

The Mid-Autumn Festival Lantern Riddles Guessing Game is an interactive game based on HTML, designed to add to the joyful atmosphere of the Mid-Autumn Festival and entertain and challenge players by guessing lantern riddles.

Preface
- Introduction
- game rules
Production process
Function realization
- Storage of questions and answers
- Game logic design

Preface

Introduction

When the game starts, players will see the title and brief description of the game. After clicking the Start Game button, the game will enter the ongoing interface. On this interface, the question will be displayed to the player in the form of text. There will also be an input box for the player to enter their answer, and a submit button to confirm the answer.

After the player submits the answer, the game will give corresponding prompt information based on the player's answer. If the answer is correct, a prompt for the correct answer will be displayed and the corresponding score will be added; if the answer is incorrect, a prompt for the wrong answer will be displayed and the corresponding score will be deducted. At the same time, the game will record the player's highest score so that players can challenge their best score.

Players can choose to continue guessing the next question until all questions are answered or not continue. After the game is over, the player's score and high score are displayed, with options to restart and exit the game.

Through the Mid-Autumn Festival lantern riddles guessing game, players can guess lantern riddles with friends and family during the Mid-Autumn Festival, increasing interaction and fun. At the same time, the game production process can also help players understand how to use HTML, CSS and JavaScript to create simple interactive games. I wish you have fun and have a happy Mid-Autumn Festival!

game rules

The game includes multiple light puzzles, each with a corresponding answer.
Players need to enter their answers in the input box and click the submit button to confirm.
If the answer is correct, the corresponding prompt message will be displayed, indicating that the answer is correct; if the answer is wrong, the error prompt message will be displayed and the corresponding points will be deducted.
The game gives scores based on the player's answers and records the highest score.
Players can choose to reset the game and start over, or exit the game.

Production process

HTML structure

In the Mid-Autumn Festival lantern riddle guessing game, you can use the following HTML structure to create the game interface:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>中秋猜灯谜小游戏</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>中秋猜灯谜小游戏</h1>
        <p>欢迎参加中秋猜灯谜小游戏！请仔细阅读题目并输入您的答案。</p>
    </header>
  
    <main>
        <div id="question-container">
            <h2>题目：</h2>
            <p id="question">这里是题目的内容</p>
        </div>
    
        <div id="answer-container">
            <label for="answer-input">请输入答案：</label>
            <input type="text" id="answer-input" placeholder="填入你的答案">
            <button id="submit-btn">提交</button>
        </div>
    
        <div id="result-container">
            <p id="result-message"></p>
            <p>得分：<span id="score">0</span></p>
            <p>最高分：<span id="high-score">0</span></p>
            <button id="reset-btn">重新开始</button>
            <button id="quit-btn">退出游戏</button>
        </div>
    </main>
  
    <script src="script.js"></script>
</body>
</html>

The above code is the HTML structure of the Mid-Autumn Festival lantern riddle guessing game. The game interface is divided into three parts: head, body and feet.

The header contains the game title and a brief description, wrapped in <header>tags.

The main part is <main>wrapped with labels, including the question display area, answer input area and result display area.

question-containerThe container is used to display questions, including a title and a
Label.
answer-containerThe container includes an input box for entering answers and a submit button.
result-containerThe container is used to display the answer results, including a container for displaying prompt information.
tags, as well as tags showing the score and the highest score <p>. Additionally, two buttons are included to restart and exit the game.
The footer contains relevant code that imports CSS style files and JavaScript files.

The above HTML structure provides the basic interface layout and element organization for the game, which facilitates subsequent style beautification and implementation of interactive functions.

CSS styles

In the Mid-Autumn Festival lantern riddle guessing game, you can use the following CSS styles to beautify the game interface:

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

header {
  background-color: #ffc107;
  color: #fff;
  text-align: center;
  padding: 20px;
  margin-bottom: 30px;
}

main {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

#question-container {
  margin-bottom: 30px;
}

#answer-input {
  margin-right: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

#submit-btn {
  background-color: #ffc107;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 5px 10px;
  cursor: pointer;
}

#submit-btn:hover {
  background-color: #ff8f00;
}

#result-message {
  margin-bottom: 20px;
  font-weight: bold;
}

#reset-btn,
#quit-btn {
  background-color: #ffc107;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 5px 10px;
  cursor: pointer;
  margin-right: 20px;
}

#reset-btn:hover,
#quit-btn:hover {
  background-color: #ff8f00;
}

The above code is the CSS style of the Mid-Autumn Festival lantern riddle guessing game. Style includes the font, background color, element layout and color of the entire page.

bodyStyle the entire page to Arial or sans-serif font, and the background color to light gray.
headerThe background color of the style setting game title is yellow, the text color is white, the center alignment, and the margin and bottom margin are 20px and 30px respectively.
mainThe style sets the maximum width of the main body to 800px and displays it horizontally and centered.
#question-containerThe style sets the bottom margin of the question display area to 30px.
#answer-inputThe style sets the right margin of the answer input box to 10px, the padding to 5px, the border to a solid line of 1 pixel, and the border radius to 3 pixels.
#submit-btnThe style sets the background color of the submit button to yellow, the text color to white, no border, the border radius to 3 pixels, and the padding to 5px 10px. When the mouse is placed on it, the background color changes to orange, and the mouse pointer changes to a hand shape.
#result-messageThe style sets the bottom margin of the prompt information to 20px and the text to be bold.
#reset-btn和#quit-btnThe style sets the style of the restart and exit game buttons, including background color, text color, and no border. The border radius is 3 pixels, and the padding is 5px 10px. When the mouse is placed on it, the background color changes to orange, and the mouse pointer changes to a hand shape. .

The above CSS styles add a beautiful appearance and interactive effects to the game interface, making the user experience better.

JavaScript interaction

In the Mid-Autumn Festival lantern riddle guessing game, you can use the following JavaScript code to implement interactive functions:

// 获取元素
const questionElement = document.getElementById('question');
const answerInputElement = document.getElementById('answer-input');
const submitButtonElement = document.getElementById('submit-btn');
const resultMessageElement = document.getElementById('result-message');
const scoreElement = document.getElementById('score');
const highScoreElement = document.getElementById('high-score');
const resetButtonElement = document.getElementById('reset-btn');
const quitButtonElement = document.getElementById('quit-btn');

// 定义题目和答案
const questions = [
  { question: '灯笼高高挂，夜夜亮晶晶。', answer: '月亮' },
  { question: '秋天五谷丰收的节日。', answer: '中秋节' },
  { question: '一个月亮挂在树枝上。', answer: '柿子' }
];

// 初始化游戏数据
let currentQuestionIndex = 0;
let score = 0;
let highScore = 0;

// 显示当前题目
function displayCurrentQuestion() {
  questionElement.textContent = questions[currentQuestionIndex].question;
}

// 提交答案
function submitAnswer() {
  const userAnswer = answerInputElement.value.trim().toLowerCase();
  const correctAnswer = questions[currentQuestionIndex].answer.toLowerCase();
  
  if (userAnswer === correctAnswer) {
    resultMessageElement.textContent = '回答正确！';
    score++;
  } else {
    resultMessageElement.textContent = '回答错误！';
  }
  
  // 更新最高分数
  if (score > highScore) {
    highScore = score;
    highScoreElement.textContent = highScore;
  }
  
  // 显示得分
  scoreElement.textContent = score;
  
  // 清空输入框
  answerInputElement.value = '';
  
  // 判断是否已经回答完所有题目
  if (currentQuestionIndex === questions.length - 1) {
    // 显示最终得分并禁用提交按钮
    resultMessageElement.textContent += ' 游戏结束！你的最终得分是：' + score;
    submitButtonElement.disabled = true;
  } else {
    // 继续下一题
    currentQuestionIndex++;
    displayCurrentQuestion();
  }
}

// 重新开始游戏
function resetGame() {
  currentQuestionIndex = 0;
  score = 0;
  resultMessageElement.textContent = '';
  scoreElement.textContent = score;
  answerInputElement.value = '';
  submitButtonElement.disabled = false;
  displayCurrentQuestion();
}

// 退出游戏
function quitGame() {
  resultMessageElement.textContent = '游戏已退出！';
  submitButtonElement.disabled = true;
}

// 绑定事件
submitButtonElement.addEventListener('click', submitAnswer);
resetButtonElement.addEventListener('click', resetGame);
quitButtonElement.addEventListener('click', quitGame);

// 初始化游戏
displayCurrentQuestion();

The above code is the JavaScript interactive function implementation of the Mid-Autumn Festival lantern riddle guessing game. The code mainly includes the following functions:

Get the elements in the page that need to be interacted with.
Array defining questions and answers.
Initialize game data, including current question index, score and highest score.
Implement the function to display the current topic displayCurrentQuestion, which is used to display the current topic on the page.
Implement the function for submitting answers submitAnswerto determine whether the user's answer is correct, update the score, and display the results.
Implement the function of restarting the game resetGame, which is used to reset the game data and redisplay the first question.
Implement the function to exit the game quitGame, which is used to display the prompt information for exiting the game.
Bind events to associate the button click event with the corresponding function.
Initialize the game and call displayCurrentQuestionthe function to display the first question.
The above JavaScript code implements the interactive functions of the Mid-Autumn Festival lantern riddle guessing game, including displaying questions, submitting answers, calculating scores, displaying results, etc. Users can participate in the game by entering answers and clicking the submit button, while also being able to restart or exit the game.

Function realization

Storage of questions and answers

The storage of questions and answers can be implemented using an array, with each element representing a question and the corresponding answer. For example:

const questions = [
  { question: '灯笼高高挂，夜夜亮晶晶。', answer: '月亮' },
  { question: '秋天五谷丰收的节日。', answer: '中秋节' },
  { question: '一个月亮挂在树枝上。', answer: '柿子' }
];

The above code defines an array containing three questions and answers. Each element is an object that contains two attributes: questiona question and answeran answer. The content and quantity of questions and answers can be modified according to actual needs.

If there are a large number of questions and answers that need to be stored, the data can be saved in external files, such as JSON files or databases. When reading data, you can use JavaScript's built-in methods or third-party libraries, such as fetch()、XMLHttpRequest()、axiosetc.

Here is a sample code that reads questions and answers from a JSON file:

// 定义异步函数，读取JSON文件中的题目和答案
async function loadQuestions() {
  try {
    const response = await fetch('questions.json');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

// 调用loadQuestions函数获取题目和答案
loadQuestions().then((questions) => {
  // do something with questions
});

The above code uses the fetch() method to asynchronously read the JSON file named questions.json and return data containing questions and answers. After the reading is successful, the data is passed to the callback function as a parameter, and the data can be used in the callback function.

Game logic design

The game logic design is as follows:

Define question and answer arrays, each element contains a question and corresponding answer.
Initialize game data, including current question index, score and highest score.
Display the current question and display the question on the page for users to view.
After the user enters their answer, they click the submit button.
Check whether the user's answer is correct. If it is correct, the score will be increased and a prompt for the correct answer will be displayed; if it is incorrect, a prompt for the wrong answer will be displayed.
Update the maximum score, or update the maximum score if the current score exceeds the maximum score.
Shows current score and highest score.
Clear the input box and prepare to accept the answer to the next question.
Determine whether all questions have been answered. If all questions have been answered, a prompt message indicating the end of the game will be displayed and the submit button will be disabled; if all questions have not been completed, the next question will be displayed.
Provides the function to restart the game, reset game data and redisplay the first question.
Provides the function of exiting the game and displays prompt information for exiting the game.

The above code implements the complete interactive logic of the Mid-Autumn Festival lantern riddle guessing game. Users can enter answers and click the submit button to participate in the game. The system will judge the correctness of the answers and display the corresponding results and scores. It also provides the functions of restarting the game and exiting the game.