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

No:7243

1546

←

Prev Next

→

match-3 game
Developer User3990｜Date and time 23/7/6 15:07:07
Build time 27.406 sec｜Game capacity 4.187KB｜

Script

了解しました。以下にマッチ3ゲームのサンプルコードを示します。

マッチ3ゲーム

上記のコードは、ジャンルとしてのマッチ3ゲームを部分的にゲーム化したものです。ブラウザ上で動作し、マウス操作に対応しています。また、絵文字を使用してセルの色を表現しています。このコードを1枚のHTMLファイルに保存し、ウェブブラウザで開くと、マッチ3ゲームをプレイすることができます。セルをクリックすると、同じ色のセルが連続している部分がクリアされます。クリアされた部分に新しいセルが生成され、ゲームが進行します。

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

了解しました。以下にマッチ3ゲームのサンプルコードを示します。

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
      }
      .board {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 20px;
      }
      .cell {
        width: 50px;
        height: 50px;
        margin: 5px;
        background-color: #f1f1f1;
        border-radius: 5px;
        user-select: none;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h1>マッチ3ゲーム</h1>
    <div id="board" class="board"></div>

const boardSize = 7;
      let board = [];

// ゲームボードを初期化する関数
      function initBoard() {
        for (let x = 0; x < boardSize; x++) {
          for (let y = 0; y < boardSize; y++) {
            if (!board[x]) board[x] = [];
            board[x][y] = getRandomColor();
          }
        }
      }

// ランダムな色を生成する関数
      function getRandomColor() {
        const randomIndex = Math.floor(Math.random() * colors.length);
        return colors[randomIndex];
      }

// ゲームボードを描画する関数
      function renderBoard() {
        const boardElement = document.getElementById('board');
        boardElement.innerHTML = '';

for (let x = 0; x < boardSize; x++) {
          for (let y = 0; y < boardSize; y++) {
            const cellElement = document.createElement('div');
            cellElement.classList.add('cell');
            cellElement.innerText = board[x][y];
            cellElement.addEventListener('click', () => {
              handleCellClick(x, y);
            });
            boardElement.appendChild(cellElement);
          }
        }
      }

// クリックされたセルを判定する関数
      function handleCellClick(x, y) {
        if (board[x][y] === '') return; // 既にクリアされたセルは無視する

if (clearCount > 0) {
          renderBoard();
        }
      }

// ゲームを開始する関数
      function startGame() {
        initBoard();
        renderBoard();
      }

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

上記のコードは、ジャンルとしてのマッチ3ゲームを部分的にゲーム化したものです。ブラウザ上で動作し、マウス操作に対応しています。また、絵文字を使用してセルの色を表現しています。

このコードを1枚のHTMLファイルに保存し、ウェブブラウザで開くと、マッチ3ゲームをプレイすることができます。セルをクリックすると、同じ色のセルが連続している部分がクリアされます。クリアされた部分に新しいセルが生成され、ゲームが進行します。