AI game creator

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

No:41323

←

Prev Next

→

Tv
Developer User18502｜Date and time 24/2/6 22:18:28
Build time 12.821 sec｜Game capacity 2.816KB｜

Script

Sure, here's an example of a simple game implemented in a single HTML file using JavaScript and enclosed in script tags. The game is a basic memory matching game where you need to find matching pairs of pictograms:

This game will create a game board with 12 pictogram cards shuffled randomly each time you load the page. Clicking on a card will flip it, and if you find a matching pair, they will stay flipped. The game is won when all the pairs have been matched.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pictogram Matching Game</title>
  <style>
    .card {
      width: 100px;
      height: 100px;
      background-color: #fafafa;
      margin: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="gameboard"></div>

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

// Initialize game
    const initGame = () => {
      const gameboard = document.getElementById("gameboard");
      const shuffledCards = shuffle(pictograms);
      
      shuffledCards.forEach((picto) => {
        const card = document.createElement("div");
        card.className = "card";
        card.textContent = picto;
        card.addEventListener("click", handleCardClick);
        gameboard.appendChild(card);
      });
    };

let flippedCards = [];
    let matchedCards = [];

// Handle card click
    const handleCardClick = (event) => {
      const card = event.target;
      
      if (flippedCards.length >= 2 || matchedCards.includes(card)) {
        return;
      }

card.classList.add("flipped");
      flippedCards.push(card);

if (flippedCards.length === 2) {
        setTimeout(checkMatch, 1000);
      }
    };

// Check if two flipped cards match
    const checkMatch = () => {
      const [card1, card2] = flippedCards;

if (card1.textContent === card2.textContent) {
        card1.removeEventListener("click", handleCardClick);
        card2.removeEventListener("click", handleCardClick);
        matchedCards.push(card1, card2);
      } else {
        card1.classList.remove("flipped");
        card2.classList.remove("flipped");
      }

flippedCards = [];

if (matchedCards.length === pictograms.length) {
        setTimeout(() => {
          alert("Congrats! You've won the game!");
        }, 500);
      }
    };

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