チャットGPTにテトリス作ってもらった!

PC

chatGPTで「HTML、CSS、JSでテトリス風ゲームを作ってください。 ゲームは矢印キーでブロックを操作、スペースキーでブロックを回転するようにしてください」と言って作ってもらいました。
下のボタンで見れます!

やり方

↑↓←→の矢印きーでブロックを動かします。
スペースキーでブロックを回転できます。

上まで積み上げると動作が停止します。

URL

※新しいタブで開きます

コード

コードはこちら↓↓↓(htmlファイルです)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tetris Game</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #111;
      color: #fff;
      font-family: Arial, sans-serif;
    }

    #game-container {
      position: relative;
      width: 200px;
      height: 400px;
      background-color: #222;
      border: 2px solid #555;
      overflow: hidden;
    }

    .block {
      position: absolute;
      width: 20px;
      height: 20px;
      border: 1px solid rgba(0, 0, 0, 0.5);
    }

    .effect {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: yellow;
      opacity: 0.8;
      animation: fadeOut 0.5s forwards;
    }

    @keyframes fadeOut {
      0% { opacity: 0.8; }
      100% { opacity: 0; }
    }

    #game-over {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: red;
      font-size: 2rem;
      display: none;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="game-over">Game Over</div>
  </div>

  <script>
    const gameContainer = document.getElementById('game-container');
    const gameOverText = document.getElementById('game-over');
    const rows = 20;
    const cols = 10;
    const blockSize = 20;
    const gameSpeed = 500; // in milliseconds

    const shapes = [
      { shape: [[1, 1, 1, 1]], color: '#0ff' }, // I shape
      { shape: [[1, 1], [1, 1]], color: '#ff0' }, // O shape
      { shape: [[0, 1, 0], [1, 1, 1]], color: '#f0f' }, // T shape
      { shape: [[1, 1, 0], [0, 1, 1]], color: '#f00' }, // Z shape
      { shape: [[0, 1, 1], [1, 1, 0]], color: '#0f0' }, // S shape
      { shape: [[1, 1, 1], [1, 0, 0]], color: '#00f' }, // L shape
      { shape: [[1, 1, 1], [0, 0, 1]], color: '#ffa500' } // J shape
    ];

    let board = Array.from({ length: rows }, () => Array(cols).fill(0));
    let currentShape = null;
    let currentColor = null;
    let currentX = 0;
    let currentY = 0;

    function drawBoard() {
      gameContainer.innerHTML = '';
      for (let r = 0; r < rows; r++) {
        for (let c = 0; c < cols; c++) {
          if (board[r][c]) {
            const block = document.createElement('div');
            block.classList.add('block');
            block.style.backgroundColor = board[r][c];
            block.style.top = `${r * blockSize}px`;
            block.style.left = `${c * blockSize}px`;
            gameContainer.appendChild(block);
          }
        }
      }
    }

    function drawShape() {
      currentShape.forEach((row, r) => {
        row.forEach((cell, c) => {
          if (cell) {
            const block = document.createElement('div');
            block.classList.add('block');
            block.style.backgroundColor = currentColor;
            block.style.top = `${(currentY + r) * blockSize}px`;
            block.style.left = `${(currentX + c) * blockSize}px`;
            gameContainer.appendChild(block);
          }
        });
      });
    }

    function canMove(newX, newY, newShape) {
      return newShape.every((row, r) => {
        return row.every((cell, c) => {
          if (!cell) return true;
          const x = newX + c;
          const y = newY + r;
          return x >= 0 && x < cols && y < rows && !board[y][x];
        });
      });
    }

    function rotateShape(shape) {
      return shape[0].map((_, c) => shape.map(row => row[c]).reverse());
    }

    function placeShape() {
      currentShape.forEach((row, r) => {
        row.forEach((cell, c) => {
          if (cell) {
            board[currentY + r][currentX + c] = currentColor;
          }
        });
      });
    }

    function clearLines() {
      let clearedLines = 0;
      board = board.filter((row, rIndex) => {
        if (row.every(cell => cell)) {
          clearedLines++;
          row.forEach((_, cIndex) => {
            const effect = document.createElement('div');
            effect.classList.add('effect');
            effect.style.top = `${rIndex * blockSize}px`;
            effect.style.left = `${cIndex * blockSize}px`;
            gameContainer.appendChild(effect);
          });
          setTimeout(() => {
            const effects = document.querySelectorAll('.effect');
            effects.forEach(effect => effect.remove());
          }, 500); // Wait for the animation to complete
          return false;
        }
        return true;
      });

      while (board.length < rows) {
        board.unshift(Array(cols).fill(0));
      }
    }

    function spawnShape() {
      const randomShape = shapes[Math.floor(Math.random() * shapes.length)];
      currentShape = randomShape.shape;
      currentColor = randomShape.color;
      currentX = Math.floor((cols - currentShape[0].length) / 2);
      currentY = 0;

      if (!canMove(currentX, currentY, currentShape)) {
        gameOverText.style.display = 'block';
        clearInterval(gameInterval);
        return;
      }
    }

    function gameLoop() {
      if (canMove(currentX, currentY + 1, currentShape)) {
        currentY++;
      } else {
        placeShape();
        clearLines();
        spawnShape();
      }

      drawBoard();
      drawShape();
    }

    document.addEventListener('keydown', (e) => {
      if (e.key === 'ArrowLeft' && canMove(currentX - 1, currentY, currentShape)) {
        currentX--;
      } else if (e.key === 'ArrowRight' && canMove(currentX + 1, currentY, currentShape)) {
        currentX++;
      } else if (e.key === 'ArrowDown' && canMove(currentX, currentY + 1, currentShape)) {
        currentY++;
      } else if (e.key === ' ' || e.code === 'Space') {
        const rotatedShape = rotateShape(currentShape);
        if (canMove(currentX, currentY, rotatedShape)) {
          currentShape = rotatedShape;
        }
      }

      drawBoard();
      drawShape();
    });

    spawnShape();
    const gameInterval = setInterval(gameLoop, gameSpeed);
  </script>
</body>
</html>

コメント

タイトルとURLをコピーしました