Redian新闻
>
实测ChatGPT最强插件:0经验5分钟开发游戏

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

科技
克雷西 发自 凹非寺
量子位 | 公众号 QbitAI

用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, 00this.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(1550);
    }
    this.vel = p5.Vector.random2D();
  }

  show() {
    push();
    image(asteroidImg, this.pos.x, this.pos.y, this.r * 2this.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中飞船位置固定,方向可转,我们复刻出的游戏正好相反)

但我们并不满足于此,于是接下来又试着让ChatGPT给我们增加一些功能。

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

这里我们就不逐步展示代码和prompt了,文末分享了整个制作过程中和ChatGPT的聊天记录

首先是增加计分和计时机制:

细心一些的读者可能会看到,这里不同大小的小行星得分是相同的。

于是我们要求ChatGPT为不同大小的小行星设置不同的分数。

而且,这里的小行星飞出画面之后就不回来了,我们也修复了一下这个bug。

是不是已经有那味了?但是这个飞船好像不会转向,我们接下来就解决这个问题:

最后,我们又加入了暂停功能(由空格键控制),至此,这款游戏终于大功告成了。

贪吃蛇、别踩白块都能做

仿照这位博主的教程,我们试着让ChatGPT做些其他游戏出来。

比如贪吃蛇,除了四周的墙壁是后来单独要求显示出来之外,其他直接一步到位!

不过我们要求把食物画成圆形,ChatGPT给出的是方形的,但也无伤大雅。

不知道是不是贪吃蛇这个游戏太过经典,导致ChatGPT看到名字就知道该怎么做了。

所以我们又试了一下,不给出游戏的名字,只描述玩法,看看ChatGPT的表现如何。

这次要做的是“别踩白块”,我们把玩法描述了一番,结果除了速度有些慢,其他地方都非常不错。

以上就是对代码解释器做游戏的全部测评了,如果你还有什么新的想法,欢迎评论区留言!

参考链接:
https://twitter.com/icreatelife/status/1678184683702566922

制作过程
小行星:
https://chat.openai.com/share/7fdc27a1-4a64-4c2f-a27d-c62f31a8af97
贪吃蛇:
https://chat.openai.com/share/c67ca1c8-8a9e-41a1-bd0d-40970b52104c
别踩白块:
https://chat.openai.com/share/639e957d-66bd-41bb-9676-1c9890629d49

「AIGC+垂直领域社群」

招募中!

欢迎关注AIGC的伙伴们加入AIGC+垂直领域社群,一起学习、探索、创新AIGC!

请备注您想加入的垂直领域「教育」或「电商零售」,加入AIGC人才社群请备注「人才」&「姓名-公司-职位」。


点这里👇关注我,记得标星哦~

一键三连「分享」、「点赞」和「在看」

科技前沿进展日日相见 ~ 

微信扫码关注该文公众号作者

戳这里提交新闻线索和高质量文章给我们。
相关阅读
ChatGPT 再次成为焦点:学生放弃导师,改用 ChatGPT 自学!科技与狠活席卷高校?15分钟开发一个机器人,硬件软件都现成,背后还有“三板斧”巴黎市长将重修Châtelet 广场以方便行人ChatGPT插件全宇宙爆炸级开放!无需排队,下周可用,GPT-4突然「紫」了ChatGPT最强竞品Claude2来了:代码、GRE成绩超越GPT-4,免费可用《梦想如此美丽》&《因为爱你》ChatGPT之父反驳马斯克/高考生喊话取消调休/刘慈欣也用ChatGPT写稿|灵感周报8 大分类、80+ ChatGPT 插件一网打尽,最全 ChatGPT 插件清单来了ChatGPT 又断网了!OpenAI 暂时下线 ChatGPT 搜索功能,只因绕过付费墙?大羊驼、羊驼、小羊驼和ChatGPT比差在哪儿?CMU副教授测评了7个类ChatGPT大模型拒绝花架子!盘点ChatGPT最强的七个插件:写提示词、学外语、总结视频,让ChatGPT做你的私人秘书用ChatGPT赚钱的秘诀是,教别人怎么用ChatGPT赚钱与刘源的一面之缘谁给停产了20年的游戏机开发游戏?啊?麦当劳!|不着调Python吞噬世界,GPT吞噬Python!ChatGPT 上线最强应用:分析数据、生成代码都精通ChatGPT 最强竞品 Claude2 来了:代码、GRE 成绩超越 GPT-4,免费可用一文总结13个国内外ChatGPT平替产品:是时候可以不那么依赖ChatGPT了~微软也搞起了开源小模型!利用OpenAI的ChatGPT和GPT-4 训练,实力碾压当前最强开源模型清华造了个游戏公司!十余个ChatGPT上岗,7分钟开发一款游戏ChatGPT路线图曝光:没有GPT-5、识图功能要等到明年、GPT-3或将开源儿子大了不由娘ChatGPT中文版来了!只需简单注册ChatGPT.bj,即刻使用【最先进】的AI工具~文末送书 | 4个维度讲透ChatGPT技术原理,揭开ChatGPT神秘技术黑盒!娘亲舅大 (一)华阳刘三姐ChatGPT凌晨重磅更新!GPT-3.5/4双升级:上下文飙升4倍,用API自己造插件【城事】巴黎市长将重修Châtelet 广场以方便行人大型语言模型技术公开课上线4讲!直播讲解ChatGPT开源平替、类GPT4低成本定制以及GPT4ToolsChatGPT最强竞品重磅升级,免费可用!第一手实测在此,网友:有个性揭开金融小白的进化史:0经验如何上岸顶级投行Risk岗8大分类、80+ChatGPT插件一网打尽,最全ChatGPT插件清单来了GPT4通过注册会计师考试/孙燕姿首谈「AI孙燕姿」/微软为Win 11添加ChatGPT插件ChatGPT最强平替告别纯免费!Claude会员版每月140,对话量可提高5倍讯飞星火V2.0突破代码能力,一个指令生成贪吃蛇游戏,10分钟开发“凌空手写”AI之下没有秘密:网友诱骗ChatGPT激活 Windows 11,ChatGPT落入陷阱!愚不可及的,是自己对自己吼“你是个中国人”。有点像“受鲁迅思想影响”,怨谁?
logo
联系我们隐私协议©2024 redian.news
Redian新闻
Redian.news刊载任何文章,不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。文章信息的合法性及真实性由其作者负责,与Redian.news及其运营公司无关。欢迎投稿,如发现稿件侵权,或作者不愿在本网发表文章,请版权拥有者通知本网处理。