Create a mathematical game for 1st graders; numberland is the theme; create a boss battle with infinity symbol's game

Click here for free DL of the app version that can save data.

No:40202

←

Prev Next

→

Create a mathematical game for 1st graders; number..ALL
Developer User18016｜Date and time 24/2/1 17:58:58
Build time 15.028 sec｜Game capacity 3.752KB｜

Script

Sure! Here's an example of a mathematical game with the theme "Numberland" and a boss battle with the infinity symbol. The game is designed for 1st graders and can be played on a smartphone. It uses pictograms to make it more engaging for young players. Please note that this is a simplified version for demonstration purposes.

When you open this HTML file in a web browser, it will display a question with multiple answers. The player must select the correct answer by tapping on the corresponding button. If the answer is correct, "Correct!" will be displayed, and if it's wrong, "Wrong!" will be displayed. The game will continue with the next question until all questions are answered. Upon completing the boss battle, the final score will be shown.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

Click here for free DL of the app version that can save data.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Numberland Boss Battle</title>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
    }

#game-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

#question {
      font-size: 24px;
      margin-bottom: 20px;
    }

.answer-button {
      display: inline-block;
      padding: 10px 20px;
      font-size: 18px;
      margin: 10px;
      cursor: pointer;
      background-color: #f2f2f2;
      border: none;
      border-radius: 4px;
    }

#result {
      font-size: 24px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="question"></div>
    <div id="answers"></div>
    <div id="result"></div>
  </div>

// Game elements
    const questionElement = document.getElementById('question');
    const answersElement = document.getElementById('answers');
    const resultElement = document.getElementById('result');

// Function to display question and answers
    function displayQuestion() {
      const question = questions[currentQuestionIndex];
      questionElement.textContent = question.question;

answersElement.innerHTML = '';
      question.answers.forEach((answer) => {
        const answerButton = document.createElement('button');
        answerButton.classList.add('answer-button');
        answerButton.textContent = answer;
        answerButton.addEventListener('click', handleAnswer);
        answersElement.appendChild(answerButton);
      });
    }

// Function to handle user's answer
    function handleAnswer(e) {
      const selectedAnswer = parseInt(e.target.textContent);

if (selectedAnswer === questions[currentQuestionIndex].correctAnswer) {
        score++;
        resultElement.textContent = "Correct!";
      } else {
        resultElement.textContent = "Wrong!";
      }

currentQuestionIndex++;
      setTimeout(() => {
        if (currentQuestionIndex === questions.length) {
          // Game ends
          endGame();
        } else {
          displayQuestion();
          resultElement.textContent = '';
        }
      }, 1000);
    }

// Function to end the game
    function endGame() {
      questionElement.textContent = "Boss Battle Complete!";
      answersElement.innerHTML = '';
      resultElement.textContent = `Your Score: ${score} / ${questions.length}`;
    }

// Start the game
    displayQuestion();
  </script>
</body>
</html>
```