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

No:30405

131

マージゲーム
Developer User14760｜Date and time 23/12/21 14:07:25
Build time 53.382 sec｜Game capacity 7.04KB｜

了解です。以下にマージゲームの実装例を示します。

Merge Game

このコードでは、4x4のマージゲームを実装しています。画面上部に"Merge Game"と表示され、その下にゲームボードが表示されます。ゲームボードは1つのhtml要素で構成され、JavaScriptによって動的に生成されます。ゲームの初期化やキーボードの入力に応じた処理が行われ、ゲームのプレイが可能です。ゲームボードは数字のタイルで構成され、同じ数字のタイルを隣り合わせると2つのタイルが結合されます。ゲームボードのすべてのセルが埋まり、動かせるタイルがなくなるとゲームオーバーとなります。スマートフォンでの操作を前提としており、キーボードの左右上下キー入力に対応しています。スマートフォンのブラウザ上で動作することを想定していますが、パソコン上でも操作可能です。上記のコードを1枚のhtmlファイルに保存し、ブラウザで開くことでマージゲームが遊べます。

→ 　

0　

0　

　

　
　
　

[PR]現在の人気グッズランキング

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

(C)2023 HisashiApp

了解です。以下にマージゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Merge Game</title>
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        text-align: center;
      }
      #game-board {
        display: flex;
        flex-wrap: wrap;
        width: 300px;
        height: 300px;
        margin: 0 auto;
      }
      .tile {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100px;
        height: 100px;
        font-size: 36px;
        background-color: #eee;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <h1>Merge Game</h1>
    <div id="game-board"></div>

<script>
      // ゲームボードのサイズ
      const boardSize = 4;

// 初期ゲーム状態の生成
      const initialGameBoard = () => {
        const board = [];
        for (let i = 0; i < boardSize; i++) {
          board[i] = new Array(boardSize).fill(0);
        }
        return board;
      }

// ランダムに2または4の値を生成
      const randomValue = () => {
        return Math.random() < 0.9 ? 2 : 4;
      }

// 空のセルの位置をランダムに取得
      const randomEmptyCell = (board) => {
        const emptyCells = [];
        for (let i = 0; i < boardSize; i++) {
          for (let j = 0; j < boardSize; j++) {
            if (board[i][j] === 0) {
              emptyCells.push([i, j]);
            }
          }
        }
        if (emptyCells.length === 0) {
          return null;
        }
        const randomIndex = Math.floor(Math.random() * emptyCells.length);
        return emptyCells[randomIndex];
      }

// ゲームボードに値を追加
      const addValue = (board) => {
        const emptyCell = randomEmptyCell(board);
        if (emptyCell !== null) {
          const [row, col] = emptyCell;
          board[row][col] = randomValue();
        }
      }

// ゲームボードの描画
      const drawBoard = (board) => {
        const gameBoardElement = document.getElementById("game-board");
        gameBoardElement.innerHTML = '';
        for (let i = 0; i < boardSize; i++) {
          for (let j = 0; j < boardSize; j++) {
            const tile = document.createElement("div");
            tile.className = "tile";
            tile.innerText = board[i][j] === 0 ? '' : board[i][j];
            gameBoardElement.appendChild(tile);
          }
        }
      }

// ゲームの初期化
      const initGame = () => {
        const board = initialGameBoard();
        addValue(board);
        addValue(board);
        drawBoard(board);
      }

// ゲームの開始
      const startGame = () => {
        initGame();
        window.addEventListener("keydown", handleKeyPress);
      }

// キープレスの処理
      const handleKeyPress = (event) => {
        const direction = event.key.replace("Arrow", "").toLowerCase();
        const board = moveTiles(direction);
        if (!isBoardEqual(gameState, board)) {
          addValue(board);
          gameState = board;
          drawBoard(board);
          if (isGameOver(board)) {
            alert("Game Over");
            window.removeEventListener("keydown", handleKeyPress);
          }
        }
      }

// タイルの移動
      const move = (arr, direction) => {
        const resultArray = [...arr];
        resultArray.forEach((row) => {
          if (direction === "right") {
            row.sort((a, b) => b - a);
          } else {
            row.sort((a, b) => a - b);
          }
          let index = 0;
          while (resultArray.length === 0 || index < resultArray.length - 1) {
            if (row[index] && row[index] === row[index + 1]) {
              row[index] *= 2;
              row.splice(index + 1, 1);
            }
            index++;
          }
        });
        return resultArray;
      }

// タイルの移動とマージ
      const moveTiles = (direction) => {
        const directionMap = {
          up: (board) => board.map((_, colIndex) => board.map(row => row[colIndex])),
          down: (board) => board.map((_, colIndex) => board.map(row => row[colIndex]).reverse()),
          left: (board) => board.map(move),
          right: (board) => board.map(row => move(row, "right"))
        }
        const board = directionMap[direction](gameState);
        if (direction === "down" || direction === "right") {
          board.forEach((row) => row.reverse());
        }
        return directionMap[direction](gameState);
      }

// ゲーム終了判定
      const isGameOver = (board) => {
        return (
          !board.flat().includes(0) &&
          !canMove(board, "up") &&
          !canMove(board, "down") &&
          !canMove(board, "left") &&
          !canMove(board, "right")
        );
      }

// ゲーム状態の比較
      const isBoardEqual = (board1, board2) => {
        for (let i = 0; i < boardSize; i++) {
          for (let j = 0; j < boardSize; j++) {
            if (board1[i][j] !== board2[i][j]) {
              return false;
            }
          }
        }
        return true;
      }

// タイルの移動可否判定
      const canMove = (board, direction) => {
        const directionMap = {
          up: [0, -1],
          down: [0, 1],
          left: [-1, 0],
          right: [1, 0]
        };
        const [dx, dy] = directionMap[direction];
        for (let i = 0; i < boardSize; i++) {
          for (let j = 0; j < boardSize; j++) {
            if (
              board[i][j] !== 0 &&
              (board[i + dx]?.[j + dy] === 0 || board[i + dx]?.[j + dy] === board[i][j])
            ) {
              return true;
            }
          }
        }
        return false;
      }

// ゲームの開始
      let gameState = initialGameBoard();
      startGame();
    </script>
  </body>
</html>
```

このコードでは、4x4のマージゲームを実装しています。画面上部に"Merge Game"と表示され、その下にゲームボードが表示されます。ゲームボードは1つのhtml要素で構成され、JavaScriptによって動的に生成されます。ゲームの初期化やキーボードの入力に応じた処理が行われ、ゲームのプレイが可能です。

ゲームボードは数字のタイルで構成され、同じ数字のタイルを隣り合わせると2つのタイルが結合されます。ゲームボードのすべてのセルが埋まり、動かせるタイルがなくなるとゲームオーバーとなります。

スマートフォンでの操作を前提としており、キーボードの左右上下キー入力に対応しています。スマートフォンのブラウザ上で動作することを想定していますが、パソコン上でも操作可能です。

上記のコードを1枚のhtmlファイルに保存し、ブラウザで開くことでマージゲームが遊べます。