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

No:39407

←

Prev Next

→

Pk1fr
Developer User17554｜Date and time 24/1/28 9:26:54
Build time 12.626 sec｜Game capacity 3.47KB｜

Script

Sure, here's a simple game implemented as a single HTML file with JavaScript enclosed in script tags. The game is designed for smartphone operation and uses pictograms. Please note that this is a basic example and can be further enhanced.

Picture Matching Game

Score: 0

To play the game, open the HTML file using a web browser on your smartphone. You'll see a grid of pictogram tiles. Tap on any tile to flip it over and see the pictogram. Try to find matching pairs of pictograms by flipping two tiles at a time. If the tiles match, they will remain flipped. If they don't match, they will flip back over. Keep flipping tiles and finding matches until all tiles are matched. Your score will be displayed at the top. Have fun playing!

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      background-color: #f1f1f1;
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 20px;
    }

h1 {
      color: #333;
    }

#score {
      font-size: 24px;
      margin-bottom: 20px;
    }

#game-board {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

.tile {
      width: 80px;
      height: 80px;
      background-color: #fff;
      border-radius: 5px;
      margin: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
      cursor: pointer;
    }
  </style>
</head>
<body>
<h1>Picture Matching Game</h1>
<div id="score">Score: 0</div>
<div id="game-board"></div>

let score = 0;
  let flippedTiles = [];
  let matchedTiles = [];

// Shuffle the pictograms using Fisher-Yates algorithm
  function shufflePictograms() {
    let currentIndex = pictograms.length;
    while (currentIndex !== 0) {
      let randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex--;
      [pictograms[currentIndex], pictograms[randomIndex]] = [pictograms[randomIndex], pictograms[currentIndex]];
    }
  }

// Create the game board
  function createGameBoard() {
    const gameBoard = document.getElementById('game-board');

pictograms.forEach(pictogram => {
      const tile = document.createElement('div');
      tile.classList.add('tile');
      tile.textContent = pictogram;

tile.addEventListener('click', () => flipTile(tile));

gameBoard.appendChild(tile);
    });
  }

// Flip a tile
  function flipTile(tile) {
    if (flippedTiles.length < 2 && !flippedTiles.includes(tile) && !matchedTiles.includes(tile)) {
      tile.classList.add('flipped');
      flippedTiles.push(tile);

if (flippedTiles.length === 2) {
        setTimeout(checkTilesMatch, 1000);
        incrementScore();
      }
    }
  }

// Check if two flipped tiles match
  function checkTilesMatch() {
    if (flippedTiles[0].textContent === flippedTiles[1].textContent) {
      flippedTiles.forEach(tile => {
        tile.classList.add('matched');
        matchedTiles.push(tile);
      });
    } else {
      flippedTiles.forEach(tile => tile.classList.remove('flipped'));
    }

flippedTiles = [];
  }

// Increment the score and update display
  function incrementScore() {
    score++;
    document.getElementById('score').textContent = `Score: ${score}`;
  }

// Start the game
  function startGame() {
    shufflePictograms();
    createGameBoard();
  }

startGame();
</script>
</body>
</html>
```