实测 ChatGPT 最强插件：0 经验 5 分钟开发游戏

量子位
2023-07-12 21:51

用 ChatGPT 最新推出的代码解释器，5 分钟就能做出一款游戏！

这可不是乱说的，有位博主已经放出了一段 DEMO：

这是一款以太空为背景，让飞船打击小行星的游戏。

效果还是很震撼的，有网友看完大赞 GPT-4 + 代码解释器 = ChatGPT-4.5。

值得一提的是，这位博主不仅展示了自己的成果，还贴心地给出了教程，连 prompt 都告诉我们了。

我们立马亲自上手试了一下~

火速复刻，顺便升级了一下

我们尝试着根据教程进行复刻，其中的 prompt 是酱婶儿的：

write p5.js code for Asteroids where you control a spaceship with the mouse and shoot asteroids with the left click of the mouse. If your spaceship collides with an asteroid, you lose. If you shoot down all asteroids, you win! I want to use my own textures for the spaceship and for asteroids.

我们原封不动地输给开启了代码解释器的 ChatGPT，很快就得到了一段 JS 代码：

let spaceship;let spaceshipImg;let asteroids = [];let asteroidImg;let bullets = [];function preload() {  spaceshipImg = loadImage('spaceship.png'); // replace with your image path  asteroidImg = loadImage('asteroid.png'); // replace with your image path}function setup() {  createCanvas(windowWidth, windowHeight);  spaceship = new Spaceship();  for(let i = 0; i < 10; i++){    asteroids.push(new Asteroid());  }}function draw() {  background(0);  spaceship.show();  spaceship.move();  for(let i = bullets.length-1; i >= 0; i--){    bullets[i].show();    bullets[i].move();    for(let j = asteroids.length-1; j >= 0; j--){      if(bullets[i].hits(asteroids[j])){        if(asteroids[j].r > 10){          let newAsteroids = asteroids[j].breakup();          asteroids = asteroids.concat(newAsteroids);        }        asteroids.splice(j, 1);        bullets.splice(i, 1);        break;      }    }  }  for(let asteroid of asteroids){    asteroid.show();    asteroid.move();    if(asteroid.hits(spaceship)){      alert("Game Over");      noLoop();    }  }  if(asteroids.length === 0){    alert("You Won!");    noLoop();  }}function mousePressed() {  if(mouseButton === LEFT){    bullets.push(new Bullet(spaceship.pos, spaceship.heading));  }}

按照作者的教程，我们将这段代码复制到一个在线编译平台上。

其中还有飞船和小行星的图片是需要自行准备的，我们上传好之后，运行！

咦，怎么出错了？

不慌，我们直接把报错信息复制给 ChatGPT，很快就得到了修正方案：

class Spaceship {  constructor() {    this.pos = createVector(width / 2, height / 2);    this.r = 50;    this.heading = 0;    this.rotation = 0;  }  show() {    push();    translate(this.pos.x, this.pos.y);    rotate(this.heading + PI / 2);    image(spaceshipImg, 0, 0, this.r, this.r);    pop();  }  move() {    this.pos = createVector(mouseX, mouseY);  }}class Bullet {  constructor(shipPos, angle) {    this.pos = createVector(shipPos.x, shipPos.y);    this.vel = p5.Vector.fromAngle(angle);    this.vel.mult(5);  }  show() {    push();    stroke(255);    strokeWeight(4);    point(this.pos.x, this.pos.y);    pop();  }  move() {    this.pos.add(this.vel);  }  hits(asteroid) {    let d = dist(this.pos.x, this.pos.y, asteroid.pos.x, asteroid.pos.y);    return d < asteroid.r;  }}class Asteroid {  constructor(pos, r) {    if(pos){      this.pos = pos.copy();    } else {      this.pos = createVector(random(width), random(height));    }    if(r){      this.r = r * 0.5;    } else {      this.r = random(15, 50);    }    this.vel = p5.Vector.random2D();  }  show() {    push();    image(asteroidImg, this.pos.x, this.pos.y, this.r * 2, this.r * 2);    pop();  }  move() {    this.pos.add(this.vel);  }  hits(ship) {    let d = dist(this.pos.x, this.pos.y, ship.pos.x, ship.pos.y);    return d < this.r + ship.r;  }  breakup() {    return [      new Asteroid(this.pos, this.r),      new Asteroid(this.pos, this.r)    ];  }}

原来是丢三落四的 ChatGPT 忘记输出元件相关的函数了。

补充上之后就好了，结果虽然和 DEMO 有些区别，但也是可玩的，用时的确不到五分钟。

（DEMO 中飞船位置固定，方向可转，我们复刻出的游戏正好相反）