使用最新的代码解释器，您可以在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?=?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?nstructor(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?
原来我忘记了输出组件相关的功能。
添加之后就可以了。 虽然结果和DEMO有些出入，但是还是可以玩的，而且耗时不到五分钟。
（DEMO中的飞船位置是固定的，方向可以转动，我们复现的游戏正好相反）
但我们对此并不满意，所以接下来我们尝试给我们添加一些功能。
我们没有专门设计这些步骤，而是直接用自然语言来描述，效果也很好。
这里我们就不展示代码和代码步骤了。 文章最后分享了整个制作过程的聊天记录，
一是增加计分和计时机制：
细心的读者可能会发现，不同大小的小行星在这里得分是相同的。
所以我们要求不同大小的小行星有不同的分数。
而且，这里的小行星飞出屏幕后就不会再回来了，我们也修复了这个bug。
已经有这种味道了吗？ 但这艘飞船似乎并没有回转，那么接下来我们来解决这个问题：
最后，我们添加了暂停功能（由空格键控制），至此，游戏终于完成了。
吃蛇不踩白块就可以了
按照博主的教程，我们尝试制作一些其他游戏。
比如蛇蛇，除了周围的墙壁需要稍后单独显示之外，其他的都直接一步到位！
然而，我们要求把食物画成圆形，结果却给了我们一个方形，但这并没有什么坏处。
不知道是不是因为贪吃蛇这个游戏太经典了，看到名字就知道该怎么做了。
所以我们又尝试了一次，没有给出游戏的名称，只是描述了游戏玩法，看看效果如何。
这次我们要做的就是“不要踩到白块”。 我们描述了游戏玩法，除了速度慢之外，结果都很好。
