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

No:39636

Create me a running game for kid theme
Developer User10722｜Date and time 24/1/29 15:40:30
Build time 18.937 sec｜Game capacity 3.51KB｜

Script

Sure! Here's an example of a simple game for kids implemented as a single HTML file using JavaScript. The game is called "Find the Pairs" and uses pictograms as symbols to match.

Find the Pairs

To run the game, save the code into a `.html` file and open it in a web browser. The game will be displayed on the screen, and the player can click on the pictogram cards to flip them. The objective is to find all the matching pairs. When all pairs are found, an alert will be shown, and the game can be reset by clicking okay on the alert. Please note that this is a basic example and can be further enhanced with additional features, styling, and animations based on your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Sure! Here's an example of a simple game for kids implemented as a single HTML file using JavaScript. The game is called "Find the Pairs" and uses pictograms as symbols to match.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Find the Pairs</title>
  <style>
    /* Basic styling to center the game on the screen */
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
  </style>
</head>
<body>
  <h1>Find the Pairs</h1>
  <div id="game"></div>

// Generate the card pairs
    const cards = [...pictograms, ...pictograms];

// Shuffle the cards using Fisher-Yates algorithm
    for (let i = cards.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [cards[i], cards[j]] = [cards[j], cards[i]];
    }

const gameContainer = document.getElementById('game');
    let flippedCards = [];
    let matchedCards = [];

// Render the cards on the game board
    cards.forEach((card, index) => {
      const cardElement = document.createElement('div');
      cardElement.classList.add('card');
      cardElement.textContent = card;
      cardElement.addEventListener('click', () => flipCard(index));
      gameContainer.appendChild(cardElement);
    });

// Handle card flip
    function flipCard(index) {
      if (flippedCards.length < 2 && !flippedCards.includes(index) && !matchedCards.includes(index)) {
        flippedCards.push(index);
        gameContainer.children[index].classList.add('flip');
        if (flippedCards.length === 2) {
          setTimeout(checkMatch, 1000);
        }
      }
    }

// Check if the flipped cards are a match
    function checkMatch() {
      const [card1, card2] = flippedCards;
      if (cards[card1] === cards[card2]) {
        matchedCards.push(card1, card2);
        checkWin();
      } else {
        gameContainer.children[card1].classList.remove('flip');
        gameContainer.children[card2].classList.remove('flip');
      }
      flippedCards = [];
    }

// Check if the player has won
    function checkWin() {
      if (matchedCards.length === cards.length) {
        alert('Congratulations! You found all the pairs!');
        resetGame();
      }
    }

// Reset the game
    function resetGame() {
      gameContainer.innerHTML = '';
      flippedCards = [];
      matchedCards = [];
      cards.sort(() => Math.random() - 0.5);
      cards.forEach((card, index) => {
        const cardElement = document.createElement('div');
        cardElement.classList.add('card');
        cardElement.textContent = card;
        cardElement.addEventListener('click', () => flipCard(index));
        gameContainer.appendChild(cardElement);
      });
    }
  </script>
</body>
</html>
```

Please note that this is a basic example and can be further enhanced with additional features, styling, and animations based on your requirements.