【gpt实践】同时让chatgpt和claude开发俄罗斯方块

最近chatgpt和claude都在使用，其实大部分日常使用场景表现都没有相差太多，想搞一个有趣的小实验，如果同时让chatgpt和claude开发俄罗斯方块谁会表现的更好呢，说干就干！

prompt

我选择了用英文描述，毕竟英文数据库更丰富，而且claude封禁比较严格，语言上也是小心翼翼

prompt：I have few development experience, and I want to develope the game 'Tetris' totally basing on html5, css and javascript. I have a few requests: 1, we need a start button, 2, a scoreboard recording score 3, pop up gameover 4, full functionality of a complete Tetris game, their movement, collision detection, scoring, and clearing lines give me all the codes, that can run the game in the browse.

我的开发经验不多，我想开发一款完全基于 html5、css 和 javascript 的 "俄罗斯方块 "游戏。我有几个要求： 1、我们需要一个开始按钮；2、一个记录得分的记分板；3、弹出式游戏结束界面；4、一个完整俄罗斯方块游戏的全部功能，包括移动、碰撞检测、得分和清线。

chatgpt回答

// Define variables and constants
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const startButton = document.getElementById('startButton');
const scoreboard = document.getElementById('score');
const gameOver = document.getElementById('gameOver');
let score = 0;
let gameInterval;
let gameOverFlag = false;

// Define Tetris pieces and their colors
const pieces = [
  [[1, 1, 1, 1]], // I
  [[1, 1, 1], [0, 1, 0]], // T
  [[1, 1, 0], [0, 1, 1]], // Z
  [[0, 1, 1], [1, 1, 0]], // S
  [[1, 1, 1], [0, 1, 0]], // L
  [[1, 1, 1], [1, 0, 0]], // J
  [[1, 1], [1, 1]], // O
];

const colors = ['#00FFFF', '#FF00FF', '#FFA500', '#FFFF00', '#00FF00', '#0000FF', '#FF0000'];

// Define functions for game logic (e.g., draw, move, rotate, check collision, etc.)

// Implement game logic

// Implement startGame function

// Implement gameOver function

// Implement key event listeners for controlling the game (e.g., arrow keys for movement)

// Implement the main game loop

// Implement functions for clearing lines, updating score, etc.

// Implement collision detection and game over check

// Implement rendering functions (e.g., drawPiece, drawBoard, etc.)

// Implement functions for moving and rotating pieces

// Implement functions for handling user input (e.g., start game, pause, resume, etc.)

// Start the game when the start button is clicked
startButton.addEventListener('click', startGame);

考虑篇幅关系，忽略了html和css部分截图，文章最后会给出源码！！！

可以看出chatgpt的做了一些方法定义，但是并没有实现。

claude回答

const canvas = document.getElementById('game-canvas');
const ctx = canvas.getContext('2d');
const scoreDisplay = document.getElementById('score');
const startButton = document.getElementById('start-button');
const gameOverMessage = document.getElementById('game-over-message');

// Game constants
const ROWS = 20;
const COLS = 10;
const BLOCK_SIZE = 20;
const LINE_CLEAR_POINTS = 100;

// Game state
let board = [];
let piece = null;
let isGameOver = false;
let isPlaying = false;
let score = 0;

// Tetromino shapes
const shapes = [
  [
    [0, 0, 0, 0],
    [1, 1, 1, 1],
    [0, 0, 0, 0],
    [0, 0, 0, 0]
  ],
  [
    [1, 0, 0],
    [1, 1, 1],
    [0, 0, 0]
  ],
  [
    [0, 0, 1],
    [1, 1, 1],
    [0, 0, 0]
  ],
  [
    [1, 1, 0],
    [0, 1, 1],
    [0, 0, 0]
  ],
  [
    [0, 1, 1],
    [1, 1, 0],
    [0, 0, 0]
  ],
  [
    [1, 1],
    [1, 1]
  ],
  [
    [0, 1, 0],
    [1, 1, 1],
    [0, 0, 0]
  ]
];

// Helper functions
function drawBoard() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let row = 0; row < ROWS; row++) {
    for (let col = 0; col < COLS; col++) {
      if (board[row][col]) {
        ctx.fillStyle = 'yellow';
        ctx.fillRect(col * BLOCK_SIZE, row * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
      }
    }
  }

  if (piece) {
    drawPiece(piece.shape, piece.x, piece.y);
  }
}

function drawPiece(shape, x, y) {
  ctx.fillStyle = 'red';
  for (let row = 0; row < shape.length; row++) {
    for (let col = 0; col < shape[row].length; col++) {
      if (shape[row][col]) {
        ctx.fillRect((x + col) * BLOCK_SIZE, (y + row) * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
      }
    }
  }
}

function resetBoard() {
  board = Array.from({ length: ROWS }, () => Array(COLS).fill(0));
}

function randomPiece() {
  const randomIndex = Math.floor(Math.random() * shapes.length);
  return {
    shape: shapes[randomIndex],
    x: 3,
    y: 0
  };
}

function movePiece(direction) {
  if (!piece) return;

  const newX = piece.x + (direction === 'left' ? -1 : direction === 'right' ? 1 : 0);
  const newY = piece.y + (direction === 'down' ? 1 : 0);

  if (canMove(piece.shape, newX, newY)) {
    piece.x = newX;
    piece.y = newY;
  } else if (direction === 'down') {
    placePiece();
    clearLines();
    if (!isGameOver) {
      piece = randomPiece();
    }
  }

  drawBoard();
}

function canMove(shape, x, y) {
  for (let row = 0; row < shape.length; row++) {
    for (let col = 0; col < shape[row].length; col++) {
      if (shape[row][col]) {
        const newX = x + col;
        const newY = y + row;

        if (
          newX < 0 ||
          newX >= COLS ||
          newY >= ROWS ||
          (newY >= 0 && board[newY][newX])
        ) {
          return false;
        }
      }
    }
  }
  return true;
}

function placePiece() {
  if (!piece) return;

  for (let row = 0; row < piece.shape.length; row++) {
    for (let col = 0; col < piece.shape[row].length; col++) {
      if (piece.shape[row][col]) {
        board[piece.y + row][piece.x + col] = 1;
      }
    }
  }
}

function clearLines() {
  let linesCleared = 0;
  for (let row = ROWS - 1; row >= 0; row--) {
    let isFull = true;
    for (let col = 0; col < COLS; col++) {
      if (!board[row][col]) {
        isFull = false;
        break;
      }
    }

    if (isFull) {
      linesCleared++;
      for (let r = row; r > 0; r--) {
        for (let c = 0; c < COLS; c++) {
          board[r][c] = board[r - 1][c];
        }
      }
      for (let c = 0; c < COLS; c++) {
        board[0][c] = 0;
      }
    }
  }

  score += linesCleared * LINE_CLEAR_POINTS;
  scoreDisplay.textContent = `Score: ${score}`;
}

function rotatePiece() {
  if (!piece) return;

  const newShape = Array.from({ length: piece.shape[0].length }, () =>
    Array(piece.shape.length).fill(0)
  );

  for (let row = 0; row < piece.shape.length; row++) {
    for (let col = 0; col < piece.shape[row].length; col++) {
      newShape[col][piece.shape.length - 1 - row] = piece.shape[row][col];
    }
  }

  if (canMove(newShape, piece.x, piece.y)) {
    piece.shape = newShape;
  }

  drawBoard();
}

function isGameOverCheck() {
  for (let col = 0; col < COLS; col++) {
    if (board[0][col]) {
      isGameOver = true;
      gameOverMessage.classList.remove('hidden');
      break;
    }
  }
}

// Event listeners
document.addEventListener('keydown', (event) => {
  if (!isPlaying) return;

  switch (event.code) {
    case 'ArrowLeft':
      movePiece('left');
      break;
    case 'ArrowRight':
      movePiece('right');
      break;
    case 'ArrowDown':
      movePiece('down');
      break;
    case 'ArrowUp':
      rotatePiece();
      break;
  }
});

startButton.addEventListener('click', () => {
  if (isPlaying) {
    isPlaying = false;
    startButton.textContent = 'Start';
    gameOverMessage.classList.add('hidden');
  } else {
    isPlaying = true;
    startButton.textContent = 'Pause';
    isGameOver = false;
    score = 0;
    scoreDisplay.textContent = `Score: ${score}`;
    resetBoard();
    piece = randomPiece();
    drawBoard();
  }
});

// Game loop
function gameLoop() {
  if (!isPlaying) return;

  movePiece('down');
  isGameOverCheck();

  if (!isGameOver) {
    requestAnimationFrame(gameLoop);
  }
}

// Start the game
resetBoard();
piece = randomPiece();
drawBoard();
gameLoop();

同样只贴出js部分的代码。可以看到claude给出了相对完善的js逻辑，所以我们直接选择用claude回答的代码进行调试，看看是否能正常在浏览器中运行。

贴出代码：

浏览器打开tetris运行效果：

可以看到，点击开始后方块不会自动下落，需要手动按下，继续反馈优化：

反馈完善功能

prompt：I mean when the game starts without pressing the down button, the cube falls at a constant speed

即当游戏开始时，方块保持匀速下落。

const canvas = document.getElementById('game-canvas');
const ctx = canvas.getContext('2d');
const scoreDisplay = document.getElementById('score');
const startButton = document.getElementById('start-button');
const gameOverMessage = document.getElementById('game-over-message');

// Game constants
const ROWS = 20;
const COLS = 10;
const BLOCK_SIZE = 20;
const LINE_CLEAR_POINTS = 100;
const FALL_SPEED = 500; // Adjust this value to control the falling speed (in milliseconds)

// Game state
let board = [];
let piece = null;
let isGameOver = false;
let isPlaying = false;
let score = 0;
let lastTime = 0;
let fallInterval = null;

// Tetromino shapes
// ... (shapes array remains the same)

// Helper functions
// ... (drawBoard, drawPiece, resetBoard, randomPiece, movePiece, canMove, placePiece, clearLines, rotatePiece, isGameOverCheck functions remain the same)

// Event listeners
document.addEventListener('keydown', (event) => {
  if (!isPlaying) return;

  switch (event.code) {
    case 'ArrowLeft':
      movePiece('left');
      break;
    case 'ArrowRight':
      movePiece('right');
      break;
    case 'ArrowUp':
      rotatePiece();
      break;
  }
});

startButton.addEventListener('click', () => {
  if (isPlaying) {
    isPlaying = false;
    startButton.textContent = 'Start';
    gameOverMessage.classList.add('hidden');
    clearInterval(fallInterval); // Stop the automatic falling
  } else {
    isPlaying = true;
    startButton.textContent = 'Pause';
    isGameOver = false;
    score = 0;
    scoreDisplay.textContent = `Score: ${score}`;
    resetBoard();
    piece = randomPiece();
    drawBoard();
    lastTime = performance.now(); // Get the current time
    fallInterval = setInterval(gameLoop, FALL_SPEED); // Start the automatic falling
  }
});

// Game loop
function gameLoop() {
  if (!isPlaying) return;

  const currentTime = performance.now();
  const deltaTime = currentTime - lastTime;

  if (deltaTime >= FALL_SPEED) {
    movePiece('down');
    isGameOverCheck();
    lastTime = currentTime;
  }

  if (!isGameOver) {
    requestAnimationFrame(gameLoop);
  } else {
    clearInterval(fallInterval); // Stop the automatic falling when the game is over
  }
}

// Start the game
resetBoard();
piece = randomPiece();
drawBoard();

可以看到claude会的的js代码里增加了方块下落的逻辑。点击开始后方块就能匀速下落