克雷西 發自 凹非寺
量子位 | 公眾號 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代碼：
letspaceship;
letspaceshipImg;
letasteroids = [];
letasteroidImg;
letbullets = [];
functionpreload( ) {
spaceshipImg = loadImage( 'spaceship.png'); // replace with your image path
asteroidImg = loadImage( 'asteroid.png'); // replace with your image path
}
functionsetup( ) {
createCanvas(windowWidth, windowHeight);
spaceship = newSpaceship;
for( leti = 0; i < 10; i++){
asteroids.push( newAsteroid);
}
}
functiondraw( ) {
background( 0);
spaceship.show;
spaceship.move;
for( leti = bullets.length -1; i >= 0; i--){
bullets[i].show;
bullets[i].move;
for( letj = asteroids.length -1; j >= 0; j--){
if(bullets[i].hits(asteroids[j])){
if(asteroids[j].r > 10){
letnewAsteroids = asteroids[j].breakup;
asteroids = asteroids.concat(newAsteroids);
}
asteroids.splice(j, 1);
bullets.splice(i, 1);
break;
}
}
}
for( letasteroid ofasteroids){
asteroid.show;
asteroid.move;
if(asteroid.hits(spaceship)){
alert( "Game Over");
noLoop;
}
}
if(asteroids.length === 0){
alert( "You Won!");
noLoop;
}
}
functionmousePressed( ) {
if(mouseButton === LEFT){
bullets.push( newBullet(spaceship.pos, spaceship.heading));
}
}
按照作者的教程，我們將這段代碼復制到一個在線編譯平臺上。
其中還有飛船和小行星的圖片是需要自行準備的，我們上傳好之后，運行！
咦，怎么出錯了？
不慌，我們直接把報錯信息復制給ChatGPT，很快就得到了修正方案：
classSpaceship{
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);
}
}
classBullet{
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) {
letd = dist( this.pos.x, this.pos.y, asteroid.pos.x, asteroid.pos.y);
returnd < asteroid.r;
}
}
classAsteroid{
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) {
letd = dist( this.pos.x, this.pos.y, ship.pos.x, ship.pos.y);
returnd < this.r + ship.r;
}
breakup {
return[
newAsteroid( this.pos, this.r),
newAsteroid( this.pos, this.r)
];
}
}
原來是 丟三落四的ChatGPT忘記輸出元件相關的函數了。
補充上之后就好了，結果雖然和DEMO有些區別，但也是可玩的，用時的確不到五分鐘。
（DEMO中飛船位置固定，方向可轉，我們復刻出的游戲正好相反）
但我們并不滿足于此，于是接下來又試著讓ChatGPT給我們增加一些功能。
這些步驟中我們沒有專門設計prompt，而是直接用自然語言來描述，結果也很好。
這里我們就不逐步展示代碼和prompt了，文末分享了整個制作過程中和ChatGPT的聊天記錄
首先是增加計分和計時機制：
細心一些的讀者可能會看到，這里不同大小的小行星得分是相同的。
于是我們要求ChatGPT為不同大小的小行星設置不同的分數。
而且，這里的小行星飛出畫面之后就不回來了，我們也修復了一下這個bug。
是不是已經有那味了？但是這個飛船好像不會轉向，我們接下來就解決這個問題：
最后，我們又加入了暫停功能（由空格鍵控制），至此，這款游戲終于大功告成了。
貪吃蛇、別踩白塊都能做
仿照這位博主的教程，我們試著讓ChatGPT做些其他游戲出來。
比如貪吃蛇，除了四周的墻壁是后來單獨要求顯示出來之外，其他直接一步到位！
不過我們要求把食物畫成圓形，ChatGPT給出的是方形的，但也無傷大雅。
不知道是不是貪吃蛇這個游戲太過經典，導致ChatGPT看到名字就知道該怎么做了。
所以我們又試了一下，不給出游戲的名字，只描述玩法，看看ChatGPT的表現如何。
這次要做的是“別踩白塊”，我們把玩法描述了一番，結果除了速度有些慢，其他地方都非常不錯。
以上就是對代碼解釋器做游戲的全部測評了，如果你還有什么新的想法，歡迎評論區留言！
— 完—
