AI game creator

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

No:42829

←

Prev Next

→

パズル
Developer User3021｜Date and time 24/2/12 23:55:22
Build time 19.962 sec｜Game capacity 3.831KB｜

Script

了解しました。以下に、スマホ操作を前提としたパズルゲームの実装例を示します。

このプログラムは、15個の異なる数字タイルと1つの空白タイルを持つ、15パズルと呼ばれるパズルゲームです。初期状態では、数字タイルをスライドして数字の順番を整列させることが目的です。ブラウザで上記のコードを実行すると、15個の数字タイルと1つの空白タイルから成るパズルが表示されます。タイルをタップすることで、そのタイルを空白タイルと交換する操作が行えます。全ての数字タイルを正しい順序に並べると、「クリア！」というアラートが表示されます。スマートフォンのブラウザで表示して操作することができるため、スマホ操作前提のパズルゲームとなります。

←

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 {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f5f5f5;
      font-size: 24px;
    }
    
    #game {
      width: 320px;
      height: 320px;
      border: 2px solid #333;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(4, 1fr);
    }
    
    .cell {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .cell:hover {
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div id="game"></div>

// ゲームの初期化
    function initGame() {
      let gameElement = document.getElementById("game");
      gameElement.innerHTML = "";
      
      for (let i = 0; i < puzzle.length; i++) {
        for (let j = 0; j < puzzle[i].length; j++) {
          let cell = document.createElement("div");
          cell.className = "cell";
          cell.innerText = puzzle[i][j] === "" ? "" : puzzle[i][j];
          cell.addEventListener("click", () => moveTile(i, j));
          gameElement.appendChild(cell);
        }
      }
    }

// タイルの移動
    function moveTile(row, col) {
      // 上に移動
      if (row > 0 && puzzle[row - 1][col] === "") {
        puzzle[row - 1][col] = puzzle[row][col];
        puzzle[row][col] = "";
      }
      // 下に移動
      else if (row < puzzle.length - 1 && puzzle[row + 1][col] === "") {
        puzzle[row + 1][col] = puzzle[row][col];
        puzzle[row][col] = "";
      }
      // 右に移動
      else if (col < puzzle[row].length - 1 && puzzle[row][col + 1] === "") {
        puzzle[row][col + 1] = puzzle[row][col];
        puzzle[row][col] = "";
      }
      // 左に移動
      else if (col > 0 && puzzle[row][col - 1] === "") {
        puzzle[row][col - 1] = puzzle[row][col];
        puzzle[row][col] = "";
      }

// ゲームの再描画
      initGame();
      
      // ゲームのクリア判定
      if (isGameOver()) {
        alert("クリア！")
        initGame();
      }
    }

// ゲームのクリア判定
    function isGameOver() {
      let count = 1;
      for (let i = 0; i < puzzle.length; i++) {
        for (let j = 0; j < puzzle[i].length; j++) {
          if (puzzle[i][j] !== count++ && (i !== puzzle.length - 1 || j !== puzzle[i].length - 1)) {
            return false;
          }
        }
      }
      return true;
    }

// ゲームの初期化を実行
    initGame();
  </script>
</body>
</html>
```

このプログラムは、15個の異なる数字タイルと1つの空白タイルを持つ、15パズルと呼ばれるパズルゲームです。初期状態では、数字タイルをスライドして数字の順番を整列させることが目的です。

ブラウザで上記のコードを実行すると、15個の数字タイルと1つの空白タイルから成るパズルが表示されます。タイルをタップすることで、そのタイルを空白タイルと交換する操作が行えます。全ての数字タイルを正しい順序に並べると、「クリア！」というアラートが表示されます。

スマートフォンのブラウザで表示して操作することができるため、スマホ操作前提のパズルゲームとなります。