用 ChatGPT 最新推出的代碼解釋器，5 分鐘就能做出一款游戲！
這可不是亂說的，有位博主已經(jīng)放出了一段 DEMO：
這是一款以太空為背景，讓飛船打擊小行星的游戲。
效果還是很震撼的，有網(wǎng)友看完大贊 GPT-4 + 代碼解釋器 = ChatGPT-4.5。
值得一提的是，這位博主不僅展示了自己的成果，還貼心地給出了教程，連 prompt 都告訴我們了。
我們立馬親自上手試了一下~
火速復(fù)刻，順便升級(jí)了一下
我們嘗試著根據(jù)教程進(jìn)行復(fù)刻，其中的 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.
我們?cè)獠粍?dòng)地輸給開啟了代碼解釋器的 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));
}
}按照作者的教程，我們將這段代碼復(fù)制到一個(gè)在線編譯平臺(tái)上。
其中還有飛船和小行星的圖片是需要自行準(zhǔn)備的，我們上傳好之后，運(yùn)行！
咦，怎么出錯(cuò)了？
不慌，我們直接把報(bào)錯(cuò)信息復(fù)制給 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 忘記輸出元件相關(guān)的函數(shù)了。
補(bǔ)充上之后就好了，結(jié)果雖然和 DEMO 有些區(qū)別，但也是可玩的，用時(shí)的確不到五分鐘。
（DEMO 中飛船位置固定，方向可轉(zhuǎn)，我們復(fù)刻出的游戲正好相反）
但我們并不滿足于此，于是接下來又試著讓 ChatGPT 給我們?cè)黾右恍┕δ堋?/p>
這些步驟中我們沒有專門設(shè)計(jì) prompt，而是直接用自然語言來描述，結(jié)果也很好。
這里我們就不逐步展示代碼和 prompt 了，文末分享了整個(gè)制作過程中和 ChatGPT 的聊天記錄
首先是增加計(jì)分和計(jì)時(shí)機(jī)制：
細(xì)心一些的讀者可能會(huì)看到，這里不同大小的小行星得分是相同的。
于是我們要求 ChatGPT 為不同大小的小行星設(shè)置不同的分?jǐn)?shù)。
而且，這里的小行星飛出畫面之后就不回來了，我們也修復(fù)了一下這個(gè) bug。
是不是已經(jīng)有那味了？但是這個(gè)飛船好像不會(huì)轉(zhuǎn)向，我們接下來就解決這個(gè)問題：
最后，我們又加入了暫停功能（由空格鍵控制），至此，這款游戲終于大功告成了。
貪吃蛇、別踩白塊都能做
仿照這位博主的教程，我們?cè)囍?ChatGPT 做些其他游戲出來。
比如貪吃蛇，除了四周的墻壁是后來單獨(dú)要求顯示出來之外，其他直接一步到位！
不過我們要求把食物畫成圓形，ChatGPT 給出的是方形的，但也無傷大雅。
不知道是不是貪吃蛇這個(gè)游戲太過經(jīng)典，導(dǎo)致 ChatGPT 看到名字就知道該怎么做了。
所以我們又試了一下，不給出游戲的名字，只描述玩法，看看 ChatGPT 的表現(xiàn)如何。
這次要做的是“別踩白塊”，我們把玩法描述了一番，結(jié)果除了速度有些慢，其他地方都非常不錯(cuò)。
以上就是對(duì)代碼解釋器做游戲的全部測評(píng)了，如果你還有什么新的想法，歡迎評(píng)論區(qū)留言！
參考鏈接：
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
廣告聲明：文內(nèi)含有的對(duì)外跳轉(zhuǎn)鏈接（包括不限于超鏈接、二維碼、口令等形式），用于傳遞更多信息，節(jié)省甄選時(shí)間，結(jié)果僅供參考，IT之家所有文章均包含本聲明。