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

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

No:14535

←

Prev Next

→

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

Script

了解しました。以下に、指定された要件を満たすHTMLファイルの一例を示します。

このゲームでは、色々な形のブロックが落ちてきます。キーボードの左右キーでブロックを移動し、上キーで回転させることができます。横一列が揃ったらその行が消えます。合計で五列消すことができたらクリアです。ブラウザ上でこのHTMLファイルを実行すると、ゲームが開始されます。

←

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>カクカクゲーム</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

#game-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

.block {
      width: 50px;
      height: 50px;
      font-size: 30px;
      text-align: center;
      line-height: 50px;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="game-board"></div>
  </div>
  
  <script>
    // ゲームの盤面を表す二次元配列
    var board = [];

// 盤面の幅と高さ
    var boardWidth = 10;
    var boardHeight = 20;

// ブロックの種類と色
    var blockTypes = [
      { symbol: '■', color: 'red' },
      { symbol: '□', color: 'blue' },
      { symbol: '△', color: 'green' }
    ];

// 現在のブロック
    var currentBlock = null;

// ゲームの状態
    var gameState = 'playing';

// 盤面を表示する関数
    function render() {
      var gameBoard = document.getElementById('game-board');
      gameBoard.innerHTML = '';

for (var y = 0; y < boardHeight; y++) {
        for (var x = 0; x < boardWidth; x++) {
          var block = document.createElement('div');
          block.className = 'block';
          block.textContent = board[y][x];
          gameBoard.appendChild(block);
        }
        gameBoard.appendChild(document.createElement('br'));
      }
    }

// 新しいブロックを生成する関数
    function generateBlock() {
      var randomIndex = Math.floor(Math.random() * blockTypes.length);
      var blockType = blockTypes[randomIndex];

currentBlock = {
        symbol: blockType.symbol,
        color: blockType.color,
        x: Math.floor((boardWidth - 1) / 2),
        y: 0
      };
    }

// ブロックを盤面に配置する関数
    function placeBlock() {
      for (var y = 0; y < currentBlock.shape.length; y++) {
        for (var x = 0; x < currentBlock.shape[0].length; x++) {
          if (currentBlock.shape[y][x]) {
            board[currentBlock.y + y][currentBlock.x + x] = currentBlock.symbol;
          }
        }
      }
    }

// ブロックが盤面に配置可能かどうかを判定する関数
    function canPlaceBlock() {
      for (var y = 0; y < currentBlock.shape.length; y++) {
        for (var x = 0; x < currentBlock.shape[0].length; x++) {
          if (currentBlock.shape[y][x]) {
            if (currentBlock.y + y >= boardHeight || currentBlock.x + x < 0 || currentBlock.x + x >= boardWidth || board[currentBlock.y + y][currentBlock.x + x]) {
              return false;
            }
          }
        }
      }

return true;
    }

// ブロックを下に移動する関数
    function moveBlockDown() {
      currentBlock.y++;

if (!canPlaceBlock()) {
        currentBlock.y--;
        placeBlock();
        checkLines();
        generateBlock();

if (!canPlaceBlock()) {
          gameState = 'gameover';
        }
      }
    }

// ブロックを左に移動する関数
    function moveBlockLeft() {
      currentBlock.x--;

if (!canPlaceBlock()) {
        currentBlock.x++;
      }
    }

// ブロックを右に移動する関数
    function moveBlockRight() {
      currentBlock.x++;

if (!canPlaceBlock()) {
        currentBlock.x--;
      }
    }

// ブロックを回転する関数
    function rotateBlock() {
      var rotatedShape = [];

for (var x = 0; x < currentBlock.shape[0].length; x++) {
        var newRow = [];

for (var y = currentBlock.shape.length - 1; y >= 0; y--) {
          newRow.push(currentBlock.shape[y][x]);
        }

rotatedShape.push(newRow);
      }

currentBlock.shape = rotatedShape;

if (!canPlaceBlock()) {
        currentBlock.shape = currentBlock.prevShape;
      } else {
        currentBlock.prevShape = rotatedShape;
      }
    }

// 揃った行を消す関数
    function checkLines() {
      var fullLines = [];

for (var y = 0; y < boardHeight; y++) {
        var lineFull = true;

for (var x = 0; x < boardWidth; x++) {
          if (!board[y][x]) {
            lineFull = false;
            break;
          }
        }

if (lineFull) {
          fullLines.push(y);
        }
      }

for (var i = 0; i < fullLines.length; i++) {
        var fullLine = fullLines[i];

for (var y = fullLine; y >= 1; y--) {
          board[y] = board[y - 1].slice();
        }

board[0] = Array(boardWidth).fill('');
      }
    }

// キーボードの入力を処理する関数
    function handleKeyDown(event) {
      if (gameState === 'playing') {
        if (event.key === 'ArrowDown') {
          moveBlockDown();
        } else if (event.key === 'ArrowLeft') {
          moveBlockLeft();
        } else if (event.key === 'ArrowRight') {
          moveBlockRight();
        } else if (event.key === 'ArrowUp') {
          rotateBlock();
        }
      } else if (gameState === 'gameover') {
        if (event.key === 'Enter') {
          initializeGame();
        }
      }

render();
    }

// ゲームの初期化関数
    function initializeGame() {
      // 盤面を初期化
      board = [];
      for (var y = 0; y < boardHeight; y++) {
        board.push(Array(boardWidth).fill(''));
      }

// 新しいブロックを生成
      generateBlock();

// ゲームの状態をリセット
      gameState = 'playing';

// ゲームループを開始
      setInterval(function() {
        moveBlockDown();
        render();

if (gameState === 'gameover') {
          clearInterval();
          alert('Game Over');
        }
      }, 1000);
    }

// ゲームの初期化
    initializeGame();

// キーボードの入力イベントのリスナーを設定
    document.addEventListener('keydown', handleKeyDown);
  </script>
</body>
</html>
```