AI game creator

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

No:32660

←

Prev Next

→

Uhhhh ABC CBA hu Hu
Developer User15471｜Date and time 23/12/31 19:57:15
Build time 35.878 sec｜Game capacity 3.451KB｜

Script

Sure, I can help you create a simple game using JavaScript in a single HTML file. Here's an example of a game where the player needs to match pictograms:

In this game, we have an array of pictogram image URLs stored in the `pictograms` variable. The images are shuffled randomly, and a grid of pictogram tiles is created using a loop. Each tile has a click event listener that checks if it matches the previously selected tile. If the clicked tile matches, both tiles remain matched. Otherwise, they are temporarily highlighted and then unselected. The `shuffle` function is used to randomize the order of tiles in the grid. You can save this code into an HTML file and open it in a web browser on your smartphone to play the game. The tiles will be displayed in a 2x2 grid, and you can tap on them to find matching pairs of pictograms.

←

Prev　Next

→ 　

Back　

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

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

Sure, I can help you create a simple game using JavaScript in a single HTML file. Here's an example of a game where the player needs to match pictograms:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pictogram Matching Game</title>
</head>
<body>
  <script>
    // Array of pictogram image source URLs
    var pictograms = [
      "pictogram1.png",
      "pictogram2.png",
      "pictogram3.png",
      "pictogram4.png"
    ];

// Shuffle the pictogram array
    pictograms = shuffle(pictograms);

// Create a grid of pictogram tiles
    var grid = document.createElement('div');
    grid.className = 'grid';
    document.body.appendChild(grid);

pictograms.forEach(function(pictogram, index) {
      var tile = document.createElement('div');
      tile.className = 'tile';
      tile.style.backgroundImage = "url('" + pictogram + "')";
      tile.addEventListener('click', function() {
        // Check if clicked tile matches the previous tile
        if (this.classList.contains('selected')) {
          this.classList.remove('selected');
        } else {
          var prevTile = document.querySelector('.tile.selected');
          if (prevTile) {
            if (prevTile.style.backgroundImage === this.style.backgroundImage) {
              // Pictogram matched!
              this.classList.add('matched');
              prevTile.classList.add('matched');
            } else {
              // Pictogram didn't match
              this.classList.add('selected');
              setTimeout(function() {
                this.classList.remove('selected');
                prevTile.classList.remove('selected');
              }.bind(this), 1000);
            }
          } else {
            // No previous tile selected
            this.classList.add('selected');
          }
        }
      });
      grid.appendChild(tile);
    });

// Shuffle function to randomize the array
    function shuffle(array) {
      var currentIndex = array.length, temporaryValue, randomIndex;
      while (0 !== currentIndex) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
      }
      return array;
    }
  </script>
  <style>
    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 100px;
      grid-gap: 10px;
      max-width: 400px;
      margin: 0 auto;
    }

.tile {
      background-size: cover;
      background-position: center;
      cursor: pointer;
      border: 1px solid black;
    }

.selected {
      border: 2px solid blue;
    }

.matched {
      opacity: 0.5;
    }
  </style>
</body>
</html>
```

In this game, we have an array of pictogram image URLs stored in the `pictograms` variable. The images are shuffled randomly, and a grid of pictogram tiles is created using a loop.

Each tile has a click event listener that checks if it matches the previously selected tile. If the clicked tile matches, both tiles remain matched. Otherwise, they are temporarily highlighted and then unselected.

The `shuffle` function is used to randomize the order of tiles in the grid.

You can save this code into an HTML file and open it in a web browser on your smartphone to play the game. The tiles will be displayed in a 2x2 grid, and you can tap on them to find matching pairs of pictograms.