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

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

    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回答

    1. // Define variables and constants
    2. const canvas = document.getElementById('gameCanvas');
    3. const ctx = canvas.getContext('2d');
    4. const startButton = document.getElementById('startButton');
    5. const scoreboard = document.getElementById('score');
    6. const gameOver = document.getElementById('gameOver');
    7. let score = 0;
    8. let gameInterval;
    9. let gameOverFlag = false;
    10.  
    11. // Define Tetris pieces and their colors
    12. const pieces = [
    13.   [[1, 1, 1, 1]], // I
    14.   [[1, 1, 1], [0, 1, 0]], // T
    15.   [[1, 1, 0], [0, 1, 1]], // Z
    16.   [[0, 1, 1], [1, 1, 0]], // S
    17.   [[1, 1, 1], [0, 1, 0]], // L
    18.   [[1, 1, 1], [1, 0, 0]], // J
    19.   [[1, 1], [1, 1]], // O
    20. ];
    21.  
    22. const colors = ['#00FFFF', '#FF00FF', '#FFA500', '#FFFF00', '#00FF00', '#0000FF', '#FF0000'];
    23.  
    24. // Define functions for game logic (e.g., draw, move, rotate, check collision, etc.)
    25.  
    26. // Implement game logic
    27.  
    28. // Implement startGame function
    29.  
    30. // Implement gameOver function
    31.  
    32. // Implement key event listeners for controlling the game (e.g., arrow keys for movement)
    33.  
    34. // Implement the main game loop
    35.  
    36. // Implement functions for clearing lines, updating score, etc.
    37.  
    38. // Implement collision detection and game over check
    39.  
    40. // Implement rendering functions (e.g., drawPiece, drawBoard, etc.)
    41.  
    42. // Implement functions for moving and rotating pieces
    43.  
    44. // Implement functions for handling user input (e.g., start game, pause, resume, etc.)
    45.  
    46. // Start the game when the start button is clicked
    47. startButton.addEventListener('click', startGame);

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

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

    claude回答
    1. const canvas = document.getElementById('game-canvas');
    2. const ctx = canvas.getContext('2d');
    3. const scoreDisplay = document.getElementById('score');
    4. const startButton = document.getElementById('start-button');
    5. const gameOverMessage = document.getElementById('game-over-message');
    6.  
    7. // Game constants
    8. const ROWS = 20;
    9. const COLS = 10;
    10. const BLOCK_SIZE = 20;
    11. const LINE_CLEAR_POINTS = 100;
    12.  
    13. // Game state
    14. let board = [];
    15. let piece = null;
    16. let isGameOver = false;
    17. let isPlaying = false;
    18. let score = 0;
    19.  
    20. // Tetromino shapes
    21. const shapes = [
    22.   [
    23.     [0, 0, 0, 0],
    24.     [1, 1, 1, 1],
    25.     [0, 0, 0, 0],
    26.     [0, 0, 0, 0]
    27.   ],
    28.   [
    29.     [1, 0, 0],
    30.     [1, 1, 1],
    31.     [0, 0, 0]
    32.   ],
    33.   [
    34.     [0, 0, 1],
    35.     [1, 1, 1],
    36.     [0, 0, 0]
    37.   ],
    38.   [
    39.     [1, 1, 0],
    40.     [0, 1, 1],
    41.     [0, 0, 0]
    42.   ],
    43.   [
    44.     [0, 1, 1],
    45.     [1, 1, 0],
    46.     [0, 0, 0]
    47.   ],
    48.   [
    49.     [1, 1],
    50.     [1, 1]
    51.   ],
    52.   [
    53.     [0, 1, 0],
    54.     [1, 1, 1],
    55.     [0, 0, 0]
    56.   ]
    57. ];
    58.  
    59. // Helper functions
    60. function drawBoard() {
    61.   ctx.clearRect(0, 0, canvas.width, canvas.height);
    62.   for (let row = 0; row < ROWS; row++) {
    63.     for (let col = 0; col < COLS; col++) {
    64.       if (board[row][col]) {
    65.         ctx.fillStyle = 'yellow';
    66.         ctx.fillRect(col * BLOCK_SIZE, row * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
    67.       }
    68.     }
    69.   }
    70.  
    71.   if (piece) {
    72.     drawPiece(piece.shape, piece.x, piece.y);
    73.   }
    74. }
    75.  
    76. function drawPiece(shape, x, y) {
    77.   ctx.fillStyle = 'red';
    78.   for (let row = 0; row < shape.length; row++) {
    79.     for (let col = 0; col < shape[row].length; col++) {
    80.       if (shape[row][col]) {
    81.         ctx.fillRect((x + col) * BLOCK_SIZE, (y + row) * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
    82.       }
    83.     }
    84.   }
    85. }
    86.  
    87. function resetBoard() {
    88.   board = Array.from({ length: ROWS }, () => Array(COLS).fill(0));
    89. }
    90.  
    91. function randomPiece() {
    92.   const randomIndex = Math.floor(Math.random() * shapes.length);
    93.   return {
    94.     shape: shapes[randomIndex],
    95.     x: 3,
    96.     y: 0
    97.   };
    98. }
    99.  
    100. function movePiece(direction) {
    101.   if (!piece) return;
    102.  
    103.   const newX = piece.x + (direction === 'left' ? -1 : direction === 'right' ? 1 : 0);
    104.   const newY = piece.y + (direction === 'down' ? 1 : 0);
    105.  
    106.   if (canMove(piece.shape, newX, newY)) {
    107.     piece.x = newX;
    108.     piece.y = newY;
    109.   } else if (direction === 'down') {
    110.     placePiece();
    111.     clearLines();
    112.     if (!isGameOver) {
    113.       piece = randomPiece();
    114.     }
    115.   }
    116.  
    117.   drawBoard();
    118. }
    119.  
    120. function canMove(shape, x, y) {
    121.   for (let row = 0; row < shape.length; row++) {
    122.     for (let col = 0; col < shape[row].length; col++) {
    123.       if (shape[row][col]) {
    124.         const newX = x + col;
    125.         const newY = y + row;
    126.  
    127.         if (
    128.           newX < 0 ||
    129.           newX >= COLS ||
    130.           newY >= ROWS ||
    131.           (newY >= 0 && board[newY][newX])
    132.         ) {
    133.           return false;
    134.         }
    135.       }
    136.     }
    137.   }
    138.   return true;
    139. }
    140.  
    141. function placePiece() {
    142.   if (!piece) return;
    143.  
    144.   for (let row = 0; row < piece.shape.length; row++) {
    145.     for (let col = 0; col < piece.shape[row].length; col++) {
    146.       if (piece.shape[row][col]) {
    147.         board[piece.y + row][piece.x + col] = 1;
    148.       }
    149.     }
    150.   }
    151. }
    152.  
    153. function clearLines() {
    154.   let linesCleared = 0;
    155.   for (let row = ROWS - 1; row >= 0; row--) {
    156.     let isFull = true;
    157.     for (let col = 0; col < COLS; col++) {
    158.       if (!board[row][col]) {
    159.         isFull = false;
    160.         break;
    161.       }
    162.     }
    163.  
    164.     if (isFull) {
    165.       linesCleared++;
    166.       for (let r = row; r > 0; r--) {
    167.         for (let c = 0; c < COLS; c++) {
    168.           board[r][c] = board[r - 1][c];
    169.         }
    170.       }
    171.       for (let c = 0; c < COLS; c++) {
    172.         board[0][c] = 0;
    173.       }
    174.     }
    175.   }
    176.  
    177.   score += linesCleared * LINE_CLEAR_POINTS;
    178.   scoreDisplay.textContent = `Score: ${score}`;
    179. }
    180.  
    181. function rotatePiece() {
    182.   if (!piece) return;
    183.  
    184.   const newShape = Array.from({ length: piece.shape[0].length }, () =>
    185.     Array(piece.shape.length).fill(0)
    186.   );
    187.  
    188.   for (let row = 0; row < piece.shape.length; row++) {
    189.     for (let col = 0; col < piece.shape[row].length; col++) {
    190.       newShape[col][piece.shape.length - 1 - row] = piece.shape[row][col];
    191.     }
    192.   }
    193.  
    194.   if (canMove(newShape, piece.x, piece.y)) {
    195.     piece.shape = newShape;
    196.   }
    197.  
    198.   drawBoard();
    199. }
    200.  
    201. function isGameOverCheck() {
    202.   for (let col = 0; col < COLS; col++) {
    203.     if (board[0][col]) {
    204.       isGameOver = true;
    205.       gameOverMessage.classList.remove('hidden');
    206.       break;
    207.     }
    208.   }
    209. }
    210.  
    211. // Event listeners
    212. document.addEventListener('keydown', (event) => {
    213.   if (!isPlaying) return;
    214.  
    215.   switch (event.code) {
    216.     case 'ArrowLeft':
    217.       movePiece('left');
    218.       break;
    219.     case 'ArrowRight':
    220.       movePiece('right');
    221.       break;
    222.     case 'ArrowDown':
    223.       movePiece('down');
    224.       break;
    225.     case 'ArrowUp':
    226.       rotatePiece();
    227.       break;
    228.   }
    229. });
    230.  
    231. startButton.addEventListener('click', () => {
    232.   if (isPlaying) {
    233.     isPlaying = false;
    234.     startButton.textContent = 'Start';
    235.     gameOverMessage.classList.add('hidden');
    236.   } else {
    237.     isPlaying = true;
    238.     startButton.textContent = 'Pause';
    239.     isGameOver = false;
    240.     score = 0;
    241.     scoreDisplay.textContent = `Score: ${score}`;
    242.     resetBoard();
    243.     piece = randomPiece();
    244.     drawBoard();
    245.   }
    246. });
    247.  
    248. // Game loop
    249. function gameLoop() {
    250.   if (!isPlaying) return;
    251.  
    252.   movePiece('down');
    253.   isGameOverCheck();
    254.  
    255.   if (!isGameOver) {
    256.     requestAnimationFrame(gameLoop);
    257.   }
    258. }
    259.  
    260. // Start the game
    261. resetBoard();
    262. piece = randomPiece();
    263. drawBoard();
    264. 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

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

    1. const canvas = document.getElementById('game-canvas');
    2. const ctx = canvas.getContext('2d');
    3. const scoreDisplay = document.getElementById('score');
    4. const startButton = document.getElementById('start-button');
    5. const gameOverMessage = document.getElementById('game-over-message');
    6.  
    7. // Game constants
    8. const ROWS = 20;
    9. const COLS = 10;
    10. const BLOCK_SIZE = 20;
    11. const LINE_CLEAR_POINTS = 100;
    12. const FALL_SPEED = 500; // Adjust this value to control the falling speed (in milliseconds)
    13.  
    14. // Game state
    15. let board = [];
    16. let piece = null;
    17. let isGameOver = false;
    18. let isPlaying = false;
    19. let score = 0;
    20. let lastTime = 0;
    21. let fallInterval = null;
    22.  
    23. // Tetromino shapes
    24. // ... (shapes array remains the same)
    25.  
    26. // Helper functions
    27. // ... (drawBoard, drawPiece, resetBoard, randomPiece, movePiece, canMove, placePiece, clearLines, rotatePiece, isGameOverCheck functions remain the same)
    28.  
    29. // Event listeners
    30. document.addEventListener('keydown', (event) => {
    31.   if (!isPlaying) return;
    32.  
    33.   switch (event.code) {
    34.     case 'ArrowLeft':
    35.       movePiece('left');
    36.       break;
    37.     case 'ArrowRight':
    38.       movePiece('right');
    39.       break;
    40.     case 'ArrowUp':
    41.       rotatePiece();
    42.       break;
    43.   }
    44. });
    45.  
    46. startButton.addEventListener('click', () => {
    47.   if (isPlaying) {
    48.     isPlaying = false;
    49.     startButton.textContent = 'Start';
    50.     gameOverMessage.classList.add('hidden');
    51.     clearInterval(fallInterval); // Stop the automatic falling
    52.   } else {
    53.     isPlaying = true;
    54.     startButton.textContent = 'Pause';
    55.     isGameOver = false;
    56.     score = 0;
    57.     scoreDisplay.textContent = `Score: ${score}`;
    58.     resetBoard();
    59.     piece = randomPiece();
    60.     drawBoard();
    61.     lastTime = performance.now(); // Get the current time
    62.     fallInterval = setInterval(gameLoop, FALL_SPEED); // Start the automatic falling
    63.   }
    64. });
    65.  
    66. // Game loop
    67. function gameLoop() {
    68.   if (!isPlaying) return;
    69.  
    70.   const currentTime = performance.now();
    71.   const deltaTime = currentTime - lastTime;
    72.  
    73.   if (deltaTime >= FALL_SPEED) {
    74.     movePiece('down');
    75.     isGameOverCheck();
    76.     lastTime = currentTime;
    77.   }
    78.  
    79.   if (!isGameOver) {
    80.     requestAnimationFrame(gameLoop);
    81.   } else {
    82.     clearInterval(fallInterval); // Stop the automatic falling when the game is over
    83.   }
    84. }
    85.  
    86. // Start the game
    87. resetBoard();
    88. piece = randomPiece();
    89. drawBoard();

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

    当然后面还有几个小问题，比如按下键没有加速下落，方块无法移动到最右端，这些都通过反馈cluade得到了解决，最终能正常运行记分，效果如下：

    源码及claude导出文件

    https://github.com/JiangSanJie/gpt-practice/

    总结：

    claude稳定账号获取

    在本次俄罗斯方块的开发prompt中，claude回答相对完善，通过少量的反馈即可完成开发。当然其实chatgpt也能完成，但是需要prompt更加细致，可能针对回答的反馈会繁琐一些，这个感兴趣的读者可以去实验。我相信好的prompt会提高回答满意率！

  • 相关阅读:
    示例：【新学期、新Flag】与CSDN的故事
    AspNetCore开源中间件-VueRouterHistory
    linux系统安装 -----Centos 8 64位
    【C++】——类与对象引入和认识
    python基于PHP+MySQL的图书馆自习室预约占座系统
    A-level 物理实验题目
    用Python实现感知机学习算法及其对偶算法实验报告
    【七夕特别篇】七夕已至，让爱闪耀
    《面试求职系列》（三）：如何写简历及求职技巧
    (四)详解工厂模式
  • 原文地址：https://blog.csdn.net/u012203062/article/details/136659556