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

No:20221

38

マージゲーム
Developer User8984｜Date and time 23/10/8 21:37:49
Build time 52.534 sec｜Game capacity 7.29KB｜

了解しました。以下に、指定された要件に基づいたマージゲームの実装例を示します。

Merge Game

このソースコードは、HTMLファイルの中にJavaScriptを含んでいます。マージゲームの動作に必要な様々な処理や要素の表示を行っています。初期化の`init`関数、盤面の表示の`renderBoard`関数、ブロックのマージ処理などが含まれています。また、キー操作に応じた処理は`handleKey`関数で行っています。 HTMLファイルをブラウザで開くと、キーボードの矢印キーでブロックをマージすることができます。ゲーム終了時にはアラートが表示されます。なお、絵文字を表示するために`String.fromCodePoint`を使用しています。絵文字のコードポイントに対応した数値を`board`配列に格納しています。ただし、絵文字の表示が正しく行われない場合は、環境によっては対応していない絵文字やフォントの問題が考えられます。

→ 　

0　

0　

　
　
　
　

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

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

(C)2023 HisashiApp

了解しました。以下に、指定された要件に基づいたマージゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Merge Game</title>
</head>
<body>
  <h1>Merge Game</h1>
  <div id="game-board"></div>

<script>
    // ゲームの状態を表す2次元配列
    let board;

// 盤面のサイズ
    const boardSize = 4;

// 初期化処理
    function init() {
      // 盤面を空の配列で初期化
      board = new Array(boardSize);
      for (let i = 0; i < boardSize; i++) {
        board[i] = new Array(boardSize).fill(0);
      }

// 盤面に2つのランダムな数値を配置
      putRandomNumber();
      putRandomNumber();

// 盤面を表示
      renderBoard();
    }

// ランダムな数値を盤面に配置する処理
    function putRandomNumber() {
      // 空のセルの一覧を取得
      const emptyCells = [];
      for (let i = 0; i < boardSize; i++) {
        for (let j = 0; j < boardSize; j++) {
          if (board[i][j] === 0) {
            emptyCells.push({row: i, col: j});
          }
        }
      }

// 空のセルが存在しない場合は終了
      if (emptyCells.length === 0) {
        return;
      }

// ランダムに1つのセルを選び、2または4の値を配置
      const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
      board[randomCell.row][randomCell.col] = Math.random() < 0.9 ? 2 : 4;
    }

// 盤面の表示処理
    function renderBoard() {
      const gameBoard = document.getElementById('game-board');
      gameBoard.innerHTML = '';

for (let i = 0; i < boardSize; i++) {
        for (let j = 0; j < boardSize; j++) {
          const cell = document.createElement('div');

// 数値が0の場合は空白を表示し、それ以外の場合は数値を表示
          if (board[i][j] === 0) {
            cell.textContent = '';
          } else {
            cell.textContent = String.fromCodePoint(0x1F4C8 + Math.log2(board[i][j]));
          }

// 盤面のセルのスタイルを設定
          cell.style.width = '50px';
          cell.style.height = '50px';
          cell.style.border = '1px solid black';
          cell.style.display = 'flex';
          cell.style.justifyContent = 'center';
          cell.style.alignItems = 'center';

gameBoard.appendChild(cell);
        }
        gameBoard.appendChild(document.createElement('br'));
      }
    }

// ゲーム終了の判定処理
    function isGameOver() {
      for (let i = 0; i < boardSize; i++) {
        for (let j = 0; j < boardSize; j++) {
          // 空のセルがある場合はまだ続行
          if (board[i][j] === 0) {
            return false;
          }
          // 隣り合うセルが同じ数値の場合はまだ続行
          if ((i < boardSize - 1 && board[i][j] === board[i + 1][j]) ||
              (j < boardSize - 1 && board[i][j] === board[i][j + 1])) {
            return false;
          }
        }
      }
      // ゲーム終了
      return true;
    }

// 上方向へのブロックのマージ処理
    function mergeUp() {
      for (let j = 0; j < boardSize; j++) {
        for (let i = 1; i < boardSize; i++) {
          if (board[i][j] !== 0) {
            let k = i - 1;
            while (k >= 0 && board[k][j] === 0) {
              k--;
            }
            if (k >= 0 && board[k][j] === board[i][j]) {
              board[k][j] *= 2;
              board[i][j] = 0;
            } else if (k + 1 !== i) {
              board[k + 1][j] = board[i][j];
              board[i][j] = 0;
            }
          }
        }
      }
    }

// 下方向へのブロックのマージ処理
    function mergeDown() {
      for (let j = 0; j < boardSize; j++) {
        for (let i = boardSize - 2; i >= 0; i--) {
          if (board[i][j] !== 0) {
            let k = i + 1;
            while (k < boardSize && board[k][j] === 0) {
              k++;
            }
            if (k < boardSize && board[k][j] === board[i][j]) {
              board[k][j] *= 2;
              board[i][j] = 0;
            } else if (k - 1 !== i) {
              board[k - 1][j] = board[i][j];
              board[i][j] = 0;
            }
          }
        }
      }
    }

// 左方向へのブロックのマージ処理
    function mergeLeft() {
      for (let i = 0; i < boardSize; i++) {
        for (let j = 1; j < boardSize; j++) {
          if (board[i][j] !== 0) {
            let k = j - 1;
            while (k >= 0 && board[i][k] === 0) {
              k--;
            }
            if (k >= 0 && board[i][k] === board[i][j]) {
              board[i][k] *= 2;
              board[i][j] = 0;
            } else if (k + 1 !== j) {
              board[i][k + 1] = board[i][j];
              board[i][j] = 0;
            }
          }
        }
      }
    }

// 右方向へのブロックのマージ処理
    function mergeRight() {
      for (let i = 0; i < boardSize; i++) {
        for (let j = boardSize - 2; j >= 0; j--) {
          if (board[i][j] !== 0) {
            let k = j + 1;
            while (k < boardSize && board[i][k] === 0) {
              k++;
            }
            if (k < boardSize && board[i][k] === board[i][j]) {
              board[i][k] *= 2;
              board[i][j] = 0;
            } else if (k - 1 !== j) {
              board[i][k - 1] = board[i][j];
              board[i][j] = 0;
            }
          }
        }
      }
    }

// ゲームのキー操作に応じた処理
    function handleKey(event) {
      if (isGameOver()) {
        return;
      }

switch (event.key) {
        case 'ArrowUp':
          mergeUp();
          break;
        case 'ArrowDown':
          mergeDown();
          break;
        case 'ArrowLeft':
          mergeLeft();
          break;
        case 'ArrowRight':
          mergeRight();
          break;
        default:
          return;
      }

putRandomNumber();
      renderBoard();

if (isGameOver()) {
        alert('ゲーム終了です');
      }
    }

// ゲームの初期化とキーイベントのリスナー登録
    init();
    document.addEventListener('keydown', handleKey);
  </script>
</body>
</html>
```

このソースコードは、HTMLファイルの中にJavaScriptを含んでいます。マージゲームの動作に必要な様々な処理や要素の表示を行っています。初期化の`init`関数、盤面の表示の`renderBoard`関数、ブロックのマージ処理などが含まれています。また、キー操作に応じた処理は`handleKey`関数で行っています。

HTMLファイルをブラウザで開くと、キーボードの矢印キーでブロックをマージすることができます。ゲーム終了時にはアラートが表示されます。

なお、絵文字を表示するために`String.fromCodePoint`を使用しています。絵文字のコードポイントに対応した数値を`board`配列に格納しています。ただし、絵文字の表示が正しく行われない場合は、環境によっては対応していない絵文字やフォントの問題が考えられます。