一发入魂：AI 自动生成打方块游戏的惊艳演示！（附可运行代码）

最新推荐文章于 2025-04-03 20:01:54 发布

因_果_律

最新推荐文章于 2025-04-03 20:01:54 发布

阅读量886

点赞数 18

文章标签：游戏 AI编程 ai AIGC

本文链接：https://blog.youkuaiyun.com/rralucard123/article/details/145422016

版权

此次，我将介绍使用 ChatGPT o3-mini-high 一次性无误生成的 p5.js 砖块破坏游戏的案例。
生成的代码可以直接粘贴到p5.js 编辑器中运行，这也是其一个很大的魅力。

引言

此次介绍的打砖块游戏是基于以下要求的详细提示，由 ChatGPT o3-mini-high 自动生成。

画布和初始设置
使用 createCanvas(windowWidth, windowHeight) 进行全屏显示，进行背景和文本的初始化。
块配置
画面上部放置 5 段×10 列的块。可以设置耐久度和颜色变化，并在破坏时添加特效。
球拍和球
画面下部配置的球拍可以通过鼠标或键盘操作。
球体在球拍的上部附近初始配置，并以随机角度发射。
冲突判定
实现圆形和矩形的碰撞检测逻辑，并处理与块、挡板和墙壁的碰撞。
评分与游戏进行
实现了在破坏方块时的得分增加、全部方块破坏后游戏通关、球落到屏幕底部时生命减少等功能。

使用环境

p5.js 编辑器
您可以在 https://editor.p5js.org/ 上直接运行生成的代码。
ChatGPT o3-mini-high
此次代码生成采用了 ChatGPT o3-mini-high。
高精度的代码生成能力使得一次性无误地满足需求的代码得以创建。

使用的提示

以下是此次代码生成中使用的详细提示。

# 改善后的提示示例（打砖块篇）

以下需求的基础上，请使用 **p5.js** 来制作一个打砖块游戏。

## 1. 画布和初始设置
- 使用 `createCanvas(windowWidth, windowHeight)`，使画布在浏览器中全屏显示。
- 包括背景色和文本绘制在内，根据需要进行初始化处理。
- 在字体和颜色等设计方面，也要注意可读性。

## 2. 砖块配置
- 在画面上方放置多层（例如：5 行 × 10 列）的砖块。
- 可以为每个砖块设置不同的颜色或耐久度（不易破坏度）。
- 例如：耐久度为 2 或以上的砖块，第一次撞击后颜色变淡，第二次撞击后即破坏。
- 如果有在砖块被破坏时出现的粒子效果或简单动画，也可以作为演出效果添加。

## 3. 挡板（玩家的操作区域）
- 在画面底部设置挡板，通过鼠标或键盘操作进行横向移动。
- 挡板的宽度和颜色可酌情设置，确保既易于看清又便于操作。
- 为提高游戏性，可进行调整，例如：当球撞击挡板的两端时，球的反射角度发生变化。

## 4. 球
- 将球的初始位置设置在靠近挡板上方的位置，开始时可随机或固定角度发射。
- 在每帧更新球的坐标，并进行与 **墙壁、砖块、挡板** 的碰撞判定。
- 若与墙壁或挡板碰撞，则进行 **反射**。
- 若与砖块碰撞，则减少该砖块的耐久度，必要时进行破坏（删除）。

## 5. 碰撞判定的实现
- 对球和砖块之间的碰撞判定，引入 **矩形和圆形的碰撞检测**机制。
- 与挡板的碰撞判定也同理，并正确计算反射角度。
- 为了让碰撞判定逻辑更易懂，请在代码中添加注释。

## 6. 计分与游戏流程
- 每当破坏砖块时，增加相应的 **分数**。
- 当 **所有砖块都被破坏** 时，视为游戏通关，并显示通关画面或再次开始的提示。
- 如果球从画面底部掉出，则减少一次生命值。
- 当生命值耗尽时，游戏结束，并添加重新开始的处理。

## 7. 用户界面
- 在游戏中显示分数、生命值等信息。
- 根据 **游戏状态**（例如开始画面、游戏结束画面）进行对应的画面显示能让玩家更易理解当前状态。
- 可以添加音效，例如砖块破裂的声音、球反弹的声音等。

## 8. 调试与优化
- 为确保每一帧的绘制都能流畅进行，请对代码进行 **优化**。
- 尽量避免不必要的计算和对象生成。
- 可以利用可视化调试（碰撞判定的可视化）等方式来确认碰撞判定是否正确。

## 9. 扩展功能（可选）
- 破坏砖块时，可以随机出现道具（如强化道具），比如让挡板变宽、增加球的数量等要素。
- 可以进行关卡设计、难度调整，或者添加分数排行榜功能等，以提升游戏性。

## 10. 代码可读性
- 使用含义明确且易懂的变量名、函数名，并在主要处理逻辑处添加注释。
- 为了便于后续功能扩展或修复 Bug，也可考虑进行文件拆分等。

生成的代码

以下是实际生成的代码。
这段代码在 p5.js 的画布上作为打砖块游戏运行。

// 全局变量
let paddle;
let ball;
let blocks = [];
const rows = 5;
const cols = 10;
let blockWidth;
const blockHeight = 30;
const blockPadding = 5;
let score = 0;
let lives = 3;
let gameState = "start"; // "start", "playing", "gameover", "gameclear"

// 初始设置
function setup() {
  createCanvas(windowWidth, windowHeight);
  textAlign(CENTER, CENTER);
  rectMode(CORNER);
  // 初始化挡板
  paddle = new Paddle();
  // 初始化球（设置在挡板上方附近）
  ball = new Ball();
  // 计算块的宽度（包括左右的间隔）
  blockWidth = (width - (cols + 1) * blockPadding) / cols;
  createBlocks();
}

// 创建砖块
function createBlocks() {
  blocks = [];
  const offsetY = 50; // 从顶部开始的偏移量
  for (let row = 0; row < rows; row++) {
    for (let col = 0; col < cols; col++) {
      const x = blockPadding + col * (blockWidth + blockPadding);
      const y = offsetY + row * (blockHeight + blockPadding);
      // 作为示例，偶数行设置耐久度为1，奇数行设置耐久度为2
      const durability = (row % 2 === 0) ? 1 : 2;
      blocks.push(new Block(x, y, blockWidth, blockHeight, durability));
    }
  }
}

// 每帧的绘制处理
function draw() {
  background(0);

  // 根据游戏状态显示不同的画面
  if (gameState === "start") {
    drawStartScreen();
  } else if (gameState === "playing") {
    playGame();
  } else if (gameState === "gameover") {
    drawGameOverScreen();
  } else if (gameState === "gameclear") {
    drawGameClearScreen();
  }
  
  // 显示分数和生命值
  fill(255);
  textSize(20);
  text("Score: " + score, width - 80, 30);
  text("Lives: " + lives, 80, 30);
}

// 游戏中的处理
function playGame() {
  // 更新并显示挡板
  paddle.update();
  paddle.show();
  
  // 更新球，进行各种判定并显示