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

No:14632

←

Prev Next

→

マージゲーム
Developer User6321｜Date and time 23/9/3 19:19:26
Build time 81.596 sec｜Game capacity 7.293KB｜

Script

了解しました。以下にマージゲームのHTMLファイルを示します。

Merge Game

以上が、HTMLファイルに記述されたマージゲームの実装です。スワイプによって数字のタイルをスライドさせ、同じ数字が隣り合わせると合体するというルールのゲームです。ゲームボードは4x4のサイズで、タッチ操作が可能です。また、ランダムな位置に2または4のタイルが追加されます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

了解しました。以下にマージゲームのHTMLファイルを示します。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Merge Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin: 0;
      padding: 50px;
      background-color: #F5F5F5;
    }
    #game-board {
      display: flex;
      flex-wrap: wrap;
      max-width: 400px;
      margin: 0 auto;
    }
    .tile {
      width: calc(33.33% - 10px);
      height: 0;
      padding-bottom: calc(33.33% - 10px);
      margin: 5px;
      background-color: white;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: bold;
      color: #333;
    }
  </style>
</head>
<body>
  <h1>Merge Game</h1>
  <div id="game-board"></div>

// ゲームボードの初期化
    let board = [];
    for (let i = 0; i < BOARD_SIZE; i++) {
      board[i] = [];
      for (let j = 0; j < BOARD_SIZE; j++) {
        board[i][j] = 0;
      }
    }

// ランダムな位置に2または4を追加
    function addTile() {
      const emptyTiles = [];
      for (let i = 0; i < BOARD_SIZE; i++) {
        for (let j = 0; j < BOARD_SIZE; j++) {
          if (board[i][j] === 0) {
            emptyTiles.push({ x: i, y: j });
          }
        }
      }

if (emptyTiles.length === 0) {
        // ゲームオーバー
        alert('Game Over!');
        return;
      }

const randomTile = emptyTiles[Math.floor(Math.random() * emptyTiles.length)];
      board[randomTile.x][randomTile.y] = Math.random() < 0.9 ? 2 : 4;
    }

// ゲームボードの描画
    function renderBoard() {
      const gameBoard = document.getElementById('game-board');
      gameBoard.innerHTML = '';

for (let i = 0; i < BOARD_SIZE; i++) {
        for (let j = 0; j < BOARD_SIZE; j++) {
          const tile = document.createElement('div');
          tile.className = 'tile';
          tile.innerText = board[i][j] === 0 ? '' : board[i][j];
          tile.style.backgroundColor = tileColor(board[i][j]);
          gameBoard.appendChild(tile);
        }
      }
    }

// タイルの色を返す
    function tileColor(value) {
      const colors = {
        0: '#9E9E9E',
        2: '#FF9800',
        4: '#FF5722',
        8: '#F44336',
        16: '#E91E63',
        32: '#9C27B0',
        64: '#673AB7',
        128: '#3F51B5',
        256: '#2196F3',
        512: '#03A9F4',
        1024: '#00BCD4',
        2048: '#009688',
      };

return colors[value] || '#4CAF50';
    }

// ゲームボードの初期化
    function resetBoard() {
      board = [];
      for (let i = 0; i < BOARD_SIZE; i++) {
        board[i] = [];
        for (let j = 0; j < BOARD_SIZE; j++) {
          board[i][j] = 0;
        }
      }

// 最初に2つのタイルを追加
      addTile();
      addTile();

renderBoard();
    }

// 初期化処理
    resetBoard();

// スワイプイベントの処理
    let touchStartX;
    let touchStartY;
    document.addEventListener('touchstart', function(event) {
      touchStartX = event.touches[0].clientX;
      touchStartY = event.touches[0].clientY;
    });

document.addEventListener('touchmove', function(event) {
      const touchEndX = event.touches[0].clientX;
      const touchEndY = event.touches[0].clientY;
      const dx = touchEndX - touchStartX;
      const dy = touchEndY - touchStartY;

if (Math.abs(dx) > Math.abs(dy)) {
        if (dx > 0) {
          // 右スワイプ
          slideRight();
        } else {
          // 左スワイプ
          slideLeft();
        }
      } else {
        if (dy > 0) {
          // 下スワイプ
          slideDown();
        } else {
          // 上スワイプ
          slideUp();
        }
      }

renderBoard();

event.preventDefault();
    });

// 上にスライド
    function slideUp() {
      let merged = false;

// 合体処理
      for (let j = 0; j < BOARD_SIZE; j++) {
        for (let i = 1; i < BOARD_SIZE; i++) {
          if (board[i][j] !== 0) {
            let k = i;
            while (k > 0 && board[k - 1][j] === 0) {
              board[k - 1][j] = board[k][j];
              board[k][j] = 0;
              k--;
            }

if (k > 0 && board[k - 1][j] === board[k][j]) {
              board[k - 1][j] *= 2;
              board[k][j] = 0;
              merged = true;
            }
          }
        }
      }

if (merged) {
        addTile();
      }
    }

// 下にスライド
    function slideDown() {
      let merged = false;

// 合体処理
      for (let j = 0; j < BOARD_SIZE; j++) {
        for (let i = BOARD_SIZE - 2; i >= 0; i--) {
          if (board[i][j] !== 0) {
            let k = i;
            while (k < BOARD_SIZE - 1 && board[k + 1][j] === 0) {
              board[k + 1][j] = board[k][j];
              board[k][j] = 0;
              k++;
            }

if (k < BOARD_SIZE - 1 && board[k + 1][j] === board[k][j]) {
              board[k + 1][j] *= 2;
              board[k][j] = 0;
              merged = true;
            }
          }
        }
      }

if (merged) {
        addTile();
      }
    }

// 左にスライド
    function slideLeft() {
      let merged = false;

// 合体処理
      for (let i = 0; i < BOARD_SIZE; i++) {
        for (let j = 1; j < BOARD_SIZE; j++) {
          if (board[i][j] !== 0) {
            let k = j;
            while (k > 0 && board[i][k - 1] === 0) {
              board[i][k - 1] = board[i][k];
              board[i][k] = 0;
              k--;
            }

if (k > 0 && board[i][k - 1] === board[i][k]) {
              board[i][k - 1] *= 2;
              board[i][k] = 0;
              merged = true;
            }
          }
        }
      }

if (merged) {
        addTile();
      }
    }

// 右にスライド
    function slideRight() {
      let merged = false;

// 合体処理
      for (let i = 0; i < BOARD_SIZE; i++) {
        for (let j = BOARD_SIZE - 2; j >= 0; j--) {
          if (board[i][j] !== 0) {
            let k = j;
            while (k < BOARD_SIZE - 1 && board[i][k + 1] === 0) {
              board[i][k + 1] = board[i][k];
              board[i][k] = 0;
              k++;
            }

if (k < BOARD_SIZE - 1 && board[i][k + 1] === board[i][k]) {
              board[i][k + 1] *= 2;
              board[i][k] = 0;
              merged = true;
            }
          }
        }
      }

if (merged) {
        addTile();
      }
    }
  </script>
</body>
</html>
```