AI game creator

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

No:42328

104

←

Prev Next

→

上原テトリス
Developer User18736｜Date and time 24/2/11 11:16:42
Build time 13.492 sec｜Game capacity 4.004KB｜

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>
<head>
  <meta charset="UTF-8">
  <title>Tetris</title>
  <style>
    #game {
      width: 300px;
      height: 600px;
      border: 1px solid black;
      background-color: #eee;
    }
  </style>
</head>
<body>
  <div id="game"></div>

// ゲームの初期化
    function initializeGame() {
      gameBoard = Array.from({ length: 20 }, () => Array(10).fill(0));
      currentPiece = createPiece();
      interval = setInterval(movePieceDown, 500);
    }

// ピースの作成
    function createPiece() {
      const pieces = [
        [[1, 1, 1, 1]], // I
        [[1, 1], [1, 1]], // O
        [[0, 1, 1], [1, 1, 0]], // Z
        [[1, 1, 0], [0, 1, 1]], // S
        [[1, 1, 1], [0, 1, 0]], // T
        [[1, 1, 1], [1, 0, 0]], // L
        [[1, 1, 1], [0, 0, 1]], // J
      ];
      const randomIndex = Math.floor(Math.random() * pieces.length);
      return pieces[randomIndex];
    }

// ピースを表示
    function drawPiece() {
      const gameElement = document.getElementById('game');
      gameElement.innerHTML = '';

for (let row = 0; row < gameBoard.length; row++) {
        const rowElement = document.createElement('div');
        rowElement.classList.add('row');

for (let col = 0; col < gameBoard[row].length; col++) {
          const cellElement = document.createElement('div');
          cellElement.classList.add('cell');
          cellElement.innerText = gameBoard[row][col] ? '■' : '';
          rowElement.appendChild(cellElement);
        }

gameElement.appendChild(rowElement);
      }
    }

// ピースが移動可能かチェック
    function isMovePossible(newRow, newCol, piece) {
      for (let row = 0; row < piece.length; row++) {
        for (let col = 0; col < piece[row].length; col++) {
          if (piece[row][col] && (newRow + row >= gameBoard.length || newCol + col < 0 || newCol + col >= gameBoard[row].length || gameBoard[newRow + row][newCol + col])) {
            return false;
          }
        }
      }
      return true;
    }

// ピースの移動
    function movePiece(newRow, newCol) {
      if (isMovePossible(newRow, newCol, currentPiece)) {
        for (let row = 0; row < currentPiece.length; row++) {
          for (let col = 0; col < currentPiece[row].length; col++) {
            if (currentPiece[row][col]) {
              gameBoard[newRow + row][newCol + col] = 1;
            }
          }
        }
        currentPiece = createPiece();
        if (!isMovePossible(0, Math.floor(gameBoard[0].length / 2) - Math.floor(currentPiece[0].length / 2), currentPiece)) {
          clearInterval(interval);
          alert('ゲームオーバー');
        }
        drawPiece();
      }
    }

// ピースを下に移動
    function movePieceDown() {
      movePiece(1, 0);
    }

// 左へ移動
    function movePieceLeft() {
      movePiece(0, -1);
    }

// 右へ移動
    function movePieceRight() {
      movePiece(0, 1);
    }
    
    // ゲーム開始
    initializeGame();

// キーボード操作でピースの移動
    document.addEventListener('keydown', (event) => {
      if (event.key === 'ArrowLeft') {
        movePieceLeft();
      } else if (event.key === 'ArrowRight') {
        movePieceRight();
      } else if (event.key === 'ArrowDown') {
        movePieceDown();
      }
    });
  </script>
</body>
</html>
```