AI game creator

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

No:40752

←

Prev Next

→

Sandbox
Developer User18245｜Date and time 24/2/4 3:05:45
Build time 10.809 sec｜Game capacity 2.942KB｜

Script

Sure! Here's a simple game implemented as a single HTML file using JavaScript and enclosed within script tags. It's designed to be played on a smartphone and uses pictograms for a fun visual experience. You can copy this code into an HTML file and open it in a web browser to start playing:

Score: 0

This game presents pictograms of different fruits, and you need to click on each one and confirm whether it matches the displayed fruit's name. The game keeps track of your score and alerts you when you win by correctly identifying all pictograms. Enjoy playing!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pictogram Game</title>
  <style>
    #game-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
  
    .pictogram {
      font-size: 48px;
      padding: 10px;
      cursor: pointer;
      user-select: none;
      transition: all 0.2s ease-in-out;
    }
    
    .pictogram:hover {
      transform: scale(1.1);
    }
    
    .hidden {
      display: none;
    }
  
    #score {
      position: fixed;
      top: 10px;
      left: 10px;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div id="game-container"></div>
  <div id="score">Score: 0</div>

var pictograms = [
      { value: '🍎', name: 'Apple' },
      { value: '🍌', name: 'Banana' },
      { value: '🍇', name: 'Grapes' },
      { value: '🍊', name: 'Orange' },
      { value: '🍓', name: 'Strawberry' },
      { value: '🍉', name: 'Watermelon' },
      { value: '🍒', name: 'Cherry' },
      { value: '🍍', name: 'Pineapple' },
    ];

// Shuffle the pictograms array randomly
    pictograms.sort(() => Math.random() - 0.5);

// Create pictogram elements and attach click event handler
    pictograms.forEach(pictogram => {
      var element = document.createElement('div');
      element.innerHTML = pictogram.value;
      element.classList.add('pictogram');
      element.dataset.name = pictogram.name;
      element.addEventListener('click', checkPictogram);
      gameContainer.appendChild(element);
    });

function checkPictogram(event) {
      var clickedPictogram = event.target;
      var correctName = clickedPictogram.dataset.name;

if (window.confirm(`Is this a ${correctName}?`)) {
        // Correct answer
        score += 10;
        scoreDisplay.textContent = 'Score: ' + score;
        clickedPictogram.classList.add('hidden');
      } else {
        // Incorrect answer
        score -= 5;
        scoreDisplay.textContent = 'Score: ' + score;
      }

// Check if all pictograms are hidden
      if (document.querySelectorAll('.pictogram:not(.hidden)').length === 0) {
        alert('Congratulations! You won!');
      }
    }
  </script>
</body>
</html>
```