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

No:17400

138

←

Prev Next

→

Create a game for children’s schools where you can..ALL
Developer User7632｜Date and time 23/9/23 7:07:21
Build time 28.114 sec｜Game capacity 3.681KB｜

Script

Sure! Here's a simple game that children can play to learn science, math, technology, and addition without regrouping. The game is designed to be played on a smartphone and uses pictograms to make it more engaging for kids. Please note that the code below should be saved as a single HTML file with a .html extension, and you can open it in a web browser to play the game.

Learn and Play

In this game, each question has multiple choice answers represented by the pictograms. The player needs to select the correct answer by tapping on the corresponding pictogram. The score is displayed at the top, and once all the questions have been answered, the game ends with a "Game Over" message. Please feel free to modify and add more questions to the `questions` array to suit the learning objectives of your game.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Please note that the code below should be saved as a single HTML file with a .html extension, and you can open it in a web browser to play the game.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Learn and Play: Science, Math, and Technology</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin-top: 100px;
    }

h1 {
      margin-bottom: 50px;
    }

#game-canvas {
      display: inline-block;
      border: 1px solid #000;
      width: 200px;
      height: 200px;
      margin-bottom: 20px;
    }

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

.answer-choice {
      display: inline-block;
      width: 80px;
      height: 80px;
      border: 1px solid #000;
      margin: 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Learn and Play</h1>
  <div id="game-canvas"></div>
  <div id="score"></div>

// Function to initialize the game
    function startGame() {
      const gameCanvas = document.getElementById("game-canvas");
      const scoreElement = document.getElementById("score");

// Render the first question
      renderQuestion(gameCanvas, scoreElement);
    }

// Function to render a question
    function renderQuestion(gameCanvas, scoreElement) {
      const question = questions[currentQuestion];

// Clear previous question
      gameCanvas.innerHTML = "";

// Display question text
      const questionText = document.createElement("p");
      questionText.textContent = question.question;
      gameCanvas.appendChild(questionText);

// Display answer choices
      for (let i = 0; i < question.choices.length; i++) {
        const answerElement = document.createElement("div");
        answerElement.className = "answer-choice";
        answerElement.textContent = question.choices[i];
        answerElement.addEventListener("click", () => checkAnswer(i, scoreElement));
        gameCanvas.appendChild(answerElement);
      }
    }

// Function to check the selected answer
    function checkAnswer(selectedAnswer, scoreElement) {
      const question = questions[currentQuestion];

if (selectedAnswer === question.correctAnswer) {
        score++;
        scoreElement.textContent = `Score: ${score}`;
      }

// Move to the next question
      currentQuestion++;
      if (currentQuestion < questions.length) {
        renderQuestion(gameCanvas, scoreElement);
      } else {
        // End of the game
        gameCanvas.innerHTML = "<h2>Game Over</h2>";
      }
    }

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

Please feel free to modify and add more questions to the `questions` array to suit the learning objectives of your game.