AI game creator

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

No:14467

←

Prev Next

→

マージゲーム
Developer User5883｜Date and time 23/9/2 7:19:55
Build time 37.07 sec｜Game capacity 5.84KB｜

Script

了解しました。マージゲームをHTMLファイルとして実装し、JavaScriptを使用して処理を実行します。スマホ操作を前提とし、絵文字も使用します。以下が実装例です。

このHTMLファイルをブラウザで開くと、マージゲームが遊べるようになります。スワイプ操作でゲームのマージを実行できます。

←

Prev　Next

→ 　

Back　

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

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

了解しました。マージゲームをHTMLファイルとして実装し、JavaScriptを使用して処理を実行します。スマホ操作を前提とし、絵文字も使用します。

以下が実装例です。

```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 {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      font-size: 2rem;
    }
  </style>
</head>

<body>
  <script>
    // マージゲームの処理
    const game = {
      board: [
        ['', '', ''],
        ['', '', ''],
        ['', '', '']
      ],

// 初期化
      init() {
        this.fillRandomCell();
        this.fillRandomCell();
        this.render();
      },

// ランダムなセルを埋める
      fillRandomCell() {
        const emptyCells = [];
        for (let i = 0; i < this.board.length; i++) {
          for (let j = 0; j < this.board[i].length; j++) {
            if (this.board[i][j] === '') {
              emptyCells.push({ x: i, y: j });
            }
          }
        }
        if (emptyCells.length === 0) {
          return;
        }
        const randomIndex = Math.floor(Math.random() * emptyCells.length);
        const randomValue = Math.random() < 0.8 ? 2 : 4;
        const { x, y } = emptyCells[randomIndex];
        this.board[x][y] = randomValue;
      },

// ゲーム状態を描画
      render() {
        document.body.innerHTML = '';
        for (let i = 0; i < this.board.length; i++) {
          for (let j = 0; j < this.board[i].length; j++) {
            const cell = document.createElement('div');
            cell.textContent = this.board[i][j] || '';
            document.body.appendChild(cell);
          }
          document.body.appendChild(document.createElement('br'));
        }
      },

// 上にマージ
      mergeUp() {
        const rotatedBoard = this.rotateRight();
        this.mergeRight();
        this.board = this.rotateLeft(rotatedBoard);
        this.fillRandomCell();
        this.render();
      },

// 右にマージ
      mergeRight() {
        for (let i = 0; i < this.board.length; i++) {
          for (let j = this.board[i].length - 1; j > 0; j--) {
            if (this.board[i][j] === this.board[i][j - 1]) {
              const mergedValue = this.board[i][j] * 2;
              this.board[i][j] = mergedValue;
              this.board[i][j - 1] = '';
            }
          }
        }
      },

// 下にマージ
      mergeDown() {
        const rotatedBoard = this.rotateRight();
        this.reverseRows();
        this.mergeRight();
        this.reverseRows();
        this.board = this.rotateLeft(rotatedBoard);
        this.fillRandomCell();
        this.render();
      },

// 左にマージ
      mergeLeft() {
        for (let i = 0; i < this.board.length; i++) {
          for (let j = 0; j < this.board[i].length - 1; j++) {
            if (this.board[i][j] === this.board[i][j + 1]) {
              const mergedValue = this.board[i][j] * 2;
              this.board[i][j] = mergedValue;
              this.board[i][j + 1] = '';
            }
          }
        }
      },

// ボードを右に90度回転
      rotateRight() {
        const rotatedBoard = [];
        for (let i = 0; i < this.board.length; i++) {
          rotatedBoard[i] = [];
          for (let j = 0; j < this.board[i].length; j++) {
            rotatedBoard[i][j] = this.board[this.board.length - j - 1][i];
          }
        }
        return rotatedBoard;
      },

// ボードを左に90度回転
      rotateLeft(board) {
        const rotatedBoard = [];
        for (let i = 0; i < board.length; i++) {
          rotatedBoard[i] = [];
          for (let j = 0; j < board[i].length; j++) {
            rotatedBoard[i][j] = board[j][board[i].length - i - 1];
          }
        }
        return rotatedBoard;
      },

// 行の順序を逆にする
      reverseRows() {
        for (let i = 0; i < this.board.length; i++) {
          this.board[i].reverse();
        }
      }
    };

// ゲームの初期化
    game.init();

// スワイプ操作の検出
    let touchstartX = 0;
    let touchstartY = 0;
    let touchendX = 0;
    let touchendY = 0;

const gestureZone = document.body;

gestureZone.addEventListener('touchstart', function (event) {
      touchstartX = event.changedTouches[0].screenX;
      touchstartY = event.changedTouches[0].screenY;
    }, false);

gestureZone.addEventListener('touchend', function (event) {
      touchendX = event.changedTouches[0].screenX;
      touchendY = event.changedTouches[0].screenY;
      handleGesture();
    }, false);

function handleGesture() {
      const swipedDistanceX = touchendX - touchstartX;
      const swipedDistanceY = touchendY - touchstartY;
      const tolerance = 50;

if (Math.abs(swipedDistanceX) >= Math.abs(swipedDistanceY)) {
        if (Math.abs(swipedDistanceX) >= tolerance) {
          if (swipedDistanceX > 0) {
            // 右にスワイプ
            game.mergeRight();
          } else {
            // 左にスワイプ
            game.mergeLeft();
          }
        }
      } else {
        if (Math.abs(swipedDistanceY) >= tolerance) {
          if (swipedDistanceY > 0) {
            // 下にスワイプ
            game.mergeDown();
          } else {
            // 上にスワイプ
            game.mergeUp();
          }
        }
      }
    }
  </script>
</body>

</html>
```

このHTMLファイルをブラウザで開くと、マージゲームが遊べるようになります。スワイプ操作でゲームのマージを実行できます。