今天小編分享的科學經驗：實測ChatGPT最強插件：0經驗5分鍾開發遊戲，歡迎閱讀。
用 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 ( ) ;
}
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
