AI game creator

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

No:49830

←

Prev Next

→

Random
Developer User18896｜Date and time 24/3/6 12:17:19
Build time 8.418 sec｜Game capacity 2.185KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pictogram Game</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  #game-screen {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px;
  }
  .pictogram {
    font-size: 50px;
    cursor: pointer;
  }
</style>
</head>
<body>
<div id="game-screen"></div>
<script>
  const pictograms = ['🍎', '🍌', '🍉', '🍇', '🥝', '🍓'];
  const shuffledPictograms = pictograms.concat(pictograms).sort(() => Math.random() - 0.5);
  let firstCard = null;
  let secondCard = null;
  
  function createPictogramElement(index) {
    const pictogramElement = document.createElement('div');
    pictogramElement.classList.add('pictogram');
    pictogramElement.textContent = shuffledPictograms[index];
    pictogramElement.addEventListener('click', () => {
      if (!firstCard) {
        firstCard = pictogramElement;
        firstCard.classList.add('selected');
      } else if (!secondCard && pictogramElement !== firstCard) {
        secondCard = pictogramElement;
        secondCard.classList.add('selected');
        if (firstCard.textContent === secondCard.textContent) {
          setTimeout(() => {
            firstCard.style.visibility = 'hidden';
            secondCard.style.visibility = 'hidden';
            firstCard = null;
            secondCard = null;
            if (document.querySelectorAll('.pictogram').length === 0) {
              alert('Congrats! You have won the game!');
            }
          }, 1000);
        } else {
          setTimeout(() => {
            firstCard.classList.remove('selected');
            secondCard.classList.remove('selected');
            firstCard = null;
            secondCard = null;
          }, 1000);
        }
      }
    });
    return pictogramElement;
  }
  
  const gameScreen = document.getElementById('game-screen');
  shuffledPictograms.forEach((pictogram, index) => {
    gameScreen.appendChild(createPictogramElement(index));
  });
</script>
</body>
</html>
```