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

No:18723

←

Prev Next

→

Matching jewel puzzle
Developer User8249｜Date and time 23/9/30 14:35:09
Build time 7.968 sec｜Game capacity 2.374KB｜

Script

Sure! Here's an example of a simple matching jewel puzzle game implemented as a single HTML file:

Matching Jewel Puzzle

This is a simple matching jewel puzzle game that can be played on a smartphone. The game board consists of a 3x3 grid. Each cell represents a jewel icon. Tapping on a cell will cycle through the available jewel icons. You can modify the `jewelIcons` array to include different pictograms or icons of your choice. The game starts by rendering a random set of jewel icons on the game board. Each time a cell is tapped, the icon changes to the next one in the `jewelIcons` array. You can continue tapping the cells to match the jewels according to your strategy or preference. Feel free to customize and enhance the game as per your requirements.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple matching jewel puzzle game implemented as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Matching Jewel Puzzle</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

.board {
      display: flex;
      flex-wrap: wrap;
      width: 300px;
      height: 300px;
      margin: 0 auto;
    }

.cell {
      width: 33.33%;
      height: 33.33%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 36px;
      cursor: pointer;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <h1>Matching Jewel Puzzle</h1>

// Create the game board
    const board = document.querySelector('.board');

function createCell(index) {
      const cell = document.createElement('div');
      cell.classList.add('cell');
      cell.dataset.iconIndex = index;

return cell;
    }

function renderBoard() {
      board.innerHTML = '';
      for (let i = 0; i < 9; i++) {
        const iconIndex = Math.floor(Math.random() * jewelIcons.length);
        const cell = createCell(iconIndex);
        board.appendChild(cell);
      }
    }

renderBoard();

// Handle cell clicks
    board.addEventListener('click', function(event) {
      const cell = event.target;
      if (cell.classList.contains('cell')) {
        const iconIndex = Number(cell.dataset.iconIndex);
        const nextIndex = (iconIndex + 1) % jewelIcons.length;

cell.dataset.iconIndex = nextIndex;
        cell.textContent = jewelIcons[nextIndex];
      }
    });
  </script>
</body>
</html>
```

The game starts by rendering a random set of jewel icons on the game board. Each time a cell is tapped, the icon changes to the next one in the `jewelIcons` array. You can continue tapping the cells to match the jewels according to your strategy or preference.

Feel free to customize and enhance the game as per your requirements.