使用最新的代码解释器，您可以在5分钟内制作一个游戏！

这不废话，有博主放了一个demo：

这是一款以太空为背景，利用宇宙飞船撞击小行星的游戏。

效果还是非常震撼的。 有网友看完后称赞GPT-4+代码解释器=-4.5。

值得一提的是，这位博主不仅展示了他的成果，还给出了教程，甚至告诉我们。

我们赶紧亲自尝试了一下~

顺便快速复现升级

我们按照教程尝试复现，其中有姜阿姨的：

为您使用鼠标的位置编写 p5.js 代码，然后单击鼠标左键进行射击。 如果你有 ，你就输了。 如果你击落所有，你就赢了！ 我想用我自己的 for 和 for 。

我们输给了完好无损地打开代码解释器的人，很快就得到了一段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));
  }
}

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

还有宇宙飞船、小行星的图片需要我们自己准备。 上传它们后，运行它们！

呃，出了什么问题吗？

别慌，我们直接把错误信息复制到了，很快就得到了修正方案：

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)
    ];
  }
}

原来我忘记了输出组件相关的功能。

添加之后就可以了。 虽然结果和DEMO有些出入，但是还是可以玩的，而且耗时不到五分钟。

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

但我们对此并不满意，所以接下来我们尝试给我们添加一些功能。

我们没有专门设计这些步骤，而是直接用自然语言来描述，效果也很好。

这里我们就不展示代码和代码步骤了。 文章最后分享了整个制作过程的聊天记录，

一是增加计分和计时机制：

细心的读者可能会发现，不同大小的小行星在这里得分是相同的。

所以我们要求不同大小的小行星有不同的分数。

而且，这里的小行星飞出屏幕后就不会再回来了，我们也修复了这个bug。

已经有这种味道了吗？ 但这艘飞船似乎并没有回转，那么接下来我们来解决这个问题：

最后，我们添加了暂停功能（由空格键控制），至此，游戏终于完成了。

吃蛇不踩白块就可以了

按照博主的教程，我们尝试制作一些其他游戏。

比如蛇蛇，除了周围的墙壁需要稍后单独显示之外，其他的都直接一步到位！

然而，我们要求把食物画成圆形，结果却给了我们一个方形，但这并没有什么坏处。

不知道是不是因为贪吃蛇这个游戏太经典了，看到名字就知道该怎么做了。

所以我们又尝试了一次，没有给出游戏的名称，只是描述了游戏玩法，看看效果如何。

这次我们要做的就是“不要踩到白块”。 我们描述了游戏玩法，除了速度慢之外，结果都很好。