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

No:33457

←

Prev Next

→

マージゲーム
Developer User15732｜Date and time 24/1/4 9:03:42
Build time 56.079 sec｜Game capacity 7.338KB｜

Script

了解です。以下にマージゲームのプログラムを実装しました。

マージゲーム

このプログラムでは、左右上下のキーまたはスワイプ操作でセルを操作し、同じ数字のセル同士をマージさせて2048を目指すゲームです。セルの初期配置や新しい数字の追加はランダムに行われます。また、ゲームオーバー判定も実装しています。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

了解です。以下にマージゲームのプログラムを実装しました。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>マージゲーム</title>
  <style>
    body {
      text-align: center;
      font-size: 20px;
      padding: 40px;
    }

#game-board {
      display: inline-block;
      border: 2px solid black;
      padding: 10px;
    }

.cell {
      display: inline-block;
      width: 50px;
      height: 50px;
      border: 1px solid black;
      margin: 2px;
      font-size: 30px;
      line-height: 50px;
    }
  </style>
</head>
<body>
  <h1>マージゲーム</h1>
  <div id="game-board">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  
  <script>
    // ゲームボードのセル要素を取得
    const cells = document.querySelectorAll('.cell');

// ゲームボードの初期化
    function initializeGameBoard() {
      cells.forEach(cell => {
        cell.textContent = "";
        cell.style.backgroundColor = "";
      });

// ランダムな位置に2か4の値をランダムに配置
      const randomIndex1 = Math.floor(Math.random() * cells.length);
      const randomIndex2 = Math.floor(Math.random() * cells.length);
      const value1 = Math.random() < 0.9 ? 2 : 4;
      const value2 = Math.random() < 0.9 ? 2 : 4;
      cells[randomIndex1].textContent = value1;
      cells[randomIndex2].textContent = value2;
    }

// ゲーム開始時に初期化
    initializeGameBoard();

// 新しい値をランダムな位置に追加
    function addNewValue() {
      const emptyCells = Array.from(cells).filter(cell => !cell.textContent);
      if (emptyCells.length === 0) return;

const randomIndex = Math.floor(Math.random() * emptyCells.length);
      const newValue = Math.random() < 0.9 ? 2 : 4;
      emptyCells[randomIndex].textContent = newValue;
    }

// 上向きにマージ
    function mergeUp() {
      let merged = false;
      for (let i = 0; i < 4; i++) {
        for (let j = 0; j < 3; j++) {
          const currentIndex = i + j * 4;
          if (cells[currentIndex].textContent === cells[currentIndex + 4].textContent) {
            const newValue = Number(cells[currentIndex].textContent) * 2;
            cells[currentIndex].textContent = newValue;
            cells[currentIndex + 4].textContent = "";
            cells[currentIndex].style.backgroundColor = getCellBgColor(newValue);
            merged = true;
          }
        }
      }
      return merged;
    }

// 下向きにマージ
    function mergeDown() {
      let merged = false;
      for (let i = 0; i < 4; i++) {
        for (let j = 0; j < 3; j++) {
          const currentIndex = i + (3 - j) * 4;
          if (cells[currentIndex].textContent === cells[currentIndex - 4].textContent) {
            const newValue = Number(cells[currentIndex].textContent) * 2;
            cells[currentIndex].textContent = newValue;
            cells[currentIndex - 4].textContent = "";
            cells[currentIndex].style.backgroundColor = getCellBgColor(newValue);
            merged = true;
          }
        }
      }
      return merged;
    }

// 左向きにマージ
    function mergeLeft() {
      let merged = false;
      for (let i = 0; i < 4; i++) {
        for (let j = 0; j < 3; j++) {
          const currentIndex = i * 4 + j;
          if (cells[currentIndex].textContent === cells[currentIndex + 1].textContent) {
            const newValue = Number(cells[currentIndex].textContent) * 2;
            cells[currentIndex].textContent = newValue;
            cells[currentIndex + 1].textContent = "";
            cells[currentIndex].style.backgroundColor = getCellBgColor(newValue);
            merged = true;
          }
        }
      }
      return merged;
    }

// 右向きにマージ
    function mergeRight() {
      let merged = false;
      for (let i = 0; i < 4; i++) {
        for (let j = 0; j < 3; j++) {
          const currentIndex = i * 4 + (3 - j);
          if (cells[currentIndex].textContent === cells[currentIndex - 1].textContent) {
            const newValue = Number(cells[currentIndex].textContent) * 2;
            cells[currentIndex].textContent = newValue;
            cells[currentIndex - 1].textContent = "";
            cells[currentIndex].style.backgroundColor = getCellBgColor(newValue);
            merged = true;
          }
        }
      }
      return merged;
    }

// セル背景色を返す
    function getCellBgColor(value) {
      switch (value) {
        case 2: return 'lightgray';
        case 4: return 'lightyellow';
        case 8: return 'lightgreen';
        case 16: return 'lightblue';
        case 32: return 'lightpink';
        case 64: return 'lightcoral';
        case 128: return 'lightseagreen';
        case 256: return 'lightskyblue';
        case 512: return 'lightsalmon';
        case 1024: return 'lightsteelblue';
        case 2048: return 'lightgoldenrodyellow';
        default: return '';
      }
    }

// ゲームの状態を判定
    function checkGameStatus() {
      const gameOver = Array.from(cells).every(cell => cell.textContent);

if (gameOver) {
        alert('ゲームオーバー！');
      }
    }

// キーボード操作のイベントリスナーを設定
    document.addEventListener('keyup', (event) => {
      let merged = false;
      switch (event.key) {
        case 'ArrowUp':
          merged = mergeUp();
          break;
        case 'ArrowDown':
          merged = mergeDown();
          break;
        case 'ArrowLeft':
          merged = mergeLeft();
          break;
        case 'ArrowRight':
          merged = mergeRight();
          break;
      }

if (merged) {
        addNewValue();
        checkGameStatus();
      }
    });

// スワイプ操作のイベントリスナーを設定
    let touchStartX = null;
    let touchStartY = null;

document.addEventListener('touchstart', (event) => {
      touchStartX = event.touches[0].clientX;
      touchStartY = event.touches[0].clientY;
    });

document.addEventListener('touchmove', (event) => {
      event.preventDefault();
    });

document.addEventListener('touchend', (event) => {
      const touchEndX = event.changedTouches[0].clientX;
      const touchEndY = event.changedTouches[0].clientY;
      const dx = Math.abs(touchEndX - touchStartX);
      const dy = Math.abs(touchEndY - touchStartY);

let merged = false;

if (dx > dy && dx > 30) {
        if (touchEndX < touchStartX) {
          merged = mergeLeft();
        } else {
          merged = mergeRight();
        }
      } else if (dy > dx && dy > 30) {
        if (touchEndY < touchStartY) {
          merged = mergeUp();
        } else {
          merged = mergeDown();
        }
      }

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