色々な形をしたカクカクしたものが落ちてきてそれを動かして一列揃ったら揃った一列が消え、合計で五列消せたらクリア's game

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

No:14536

←

Prev Next

→

色々な形をしたカクカクしたものが落ちてきてそれを動かして一列揃ったら揃った一列が消え、合計で五列消せ..ALL
Developer User6281｜Date and time 23/9/3 2:37:18
Build time 57.958 sec｜Game capacity 5.383KB｜

Script

了解しました。以下に、要件を満たすHTMLファイルを実装したサンプルコードを示します。このコードは、テトリスというゲームを実装しています。

このサンプルコードでは、テトリスのゲームを実装しています。プレイヤーは右矢印キー、左矢印キー、下矢印キーでブロックを移動させることができます。一列揃った場合には、その列が消え、合計で5列揃えると「Clear」と表示されます。このコードを保存して、任意のウェブブラウザで開くと、ゲームがプレイできる画面が表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

了解しました。以下に、要件を満たすHTMLファイルを実装したサンプルコードを示します。このコードは、テトリスというゲームを実装しています。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tetris</title>
  <style>
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(10, 40px);
      grid-gap: 1px;
      background-color: #e1e1e1;
      border: 1px solid #999999;
      padding: 1px;
    }
    .block {
      background-color: #ff0000;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="grid" id="grid"></div>
  </div>

// 二次元配列を作成して初期化
    const grid = [];
    for (let row = 0; row < ROWS; row++) {
      grid[row] = Array.from({ length: COLS }).fill(0);
    }

// ゲームの状態を管理する変数
    let score = 0;
    let gameOver = false;

// ゲームオーバー時の処理
    function handleGameOver() {
      gameOver = true;
      alert("Game Over");
    }

// ブロックを描画する関数
    function drawGrid() {
      const gridElement = document.getElementById("grid");
      gridElement.innerHTML = "";

for (let row = 0; row < ROWS; row++) {
        for (let col = 0; col < COLS; col++) {
          const block = document.createElement("div");
          block.className = "block";
          if (grid[row][col] === 1) {
            block.style.backgroundColor = "#00ff00";
          }
          gridElement.appendChild(block);
        }
      }
    }

// ブロックを移動する関数
    function moveBlock(dir) {
      if (!gameOver) {
        // ブロックを右に移動
        if (dir === "right") {
          // ブロックが右端に達していないか確認
          for (let row = 0; row < ROWS; row++) {
            if (grid[row][COLS - 1] === 1) {
              return;
            }
          }

// ブロックを移動
          for (let row = 0; row < ROWS; row++) {
            for (let col = COLS - 1; col >= 0; col--) {
              if (grid[row][col] === 1) {
                grid[row][col + 1] = 1;
                grid[row][col] = 0;
              }
            }
          }
        }

// ブロックを左に移動
        if (dir === "left") {
          // ブロックが左端に達していないか確認
          for (let row = 0; row < ROWS; row++) {
            if (grid[row][0] === 1) {
              return;
            }
          }

// ブロックを移動
          for (let row = 0; row < ROWS; row++) {
            for (let col = 0; col < COLS; col++) {
              if (grid[row][col] === 1) {
                grid[row][col - 1] = 1;
                grid[row][col] = 0;
              }
            }
          }
        }

// ブロックを下に移動
        if (dir === "down") {
          // ブロックが下端に達していないか確認
          for (let col = 0; col < COLS; col++) {
            if (grid[ROWS - 1][col] === 1) {
              handleGameOver();
              return;
            }
          }

// ブロックを移動
          for (let row = ROWS - 1; row >= 0; row--) {
            for (let col = 0; col < COLS; col++) {
              if (grid[row][col] === 1) {
                grid[row + 1][col] = 1;
                grid[row][col] = 0;
              }
            }
          }
        }

drawGrid();
      }
    }

// 列が揃ったかどうかを判定する関数
    function checkLines() {
      let lines = 0;

for (let row = 0; row < ROWS; row++) {
        let isLineComplete = grid[row].every(block => block === 1);

if (isLineComplete) {
          lines++;
          grid.splice(row, 1);
          grid.unshift(Array.from({ length: COLS }).fill(0));
        }
      }

score += lines;
      if (score === 5) {
        alert("Clear");
      }
    }

// ゲームの状態を更新する関数
    function update() {
      if (!gameOver) {
        checkLines();
        drawGrid();
        setTimeout(() => {
          moveBlock("down");
          update();
        }, 1000);
      }
    }

// キー入力のイベントリスナーを設定
    document.addEventListener("keydown", (e) => {
      if (e.key === "ArrowRight") {
        moveBlock("right");
      }
      if (e.key === "ArrowLeft") {
        moveBlock("left");
      }
      if (e.key === "ArrowDown") {
        moveBlock("down");
      }
    });

// ゲームを開始する
    update();
  </script>
</body>
</html>
```

このサンプルコードでは、テトリスのゲームを実装しています。プレイヤーは右矢印キー、左矢印キー、下矢印キーでブロックを移動させることができます。一列揃った場合には、その列が消え、合計で5列揃えると「Clear」と表示されます。

このコードを保存して、任意のウェブブラウザで開くと、ゲームがプレイできる画面が表示されます。