用 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=;functionpreloadspaceshipImg=loadImage('spaceship.png');//replacewithyourimagepathasteroidImg=loadImage('asteroid.png');//replacewithyourimagepathfunctionsetupcreateCanvas(windowWidth,windowHeight);spaceship=newSpaceship;for(leti=0;ilt;10;i++)asteroids.push(newAsteroid);functiondrawbackground(0);spaceship.show;spaceship.move;for(leti=bullets.length-1;igt;=0;i--)bullets(i).show;bullets(i).move;for(letj=asteroids.length-1;jgt;=0;j--)if(bullets(i).hits(asteroids(j)))if(asteroids(j).rgt;10)letnewAsteroids=asteroids(j).breakup;asteroids=asteroids.concat(newAsteroids);asteroids.splice(j,1);bullets.splice(i,1);break;for(letasteroidofasteroids)asteroid.show;asteroid.move;if(asteroid.hits(spaceship))alert("GameOver");noLoop;if(asteroids.length=0)alert("YouWon!");noLoop;functionmousePressedif(mouseButton=LEFT)bullets.push(newBullet(spaceship.pos,spaceship.heading));

按照作者的教程，我們將這段代碼復制到一個在線編譯平臺上。

咦，怎么出錯了？

不慌，我們直接把報錯信息復制給 ChatGPT，很快就得到了修正方案:

classSpaceshipconstructorthis.pos=createVector(width/2,height/2);this.r=50;this.heading=0;this.rotation=0;showpush;translate(this.pos.x,this.pos.y);rotate(this.heading+PI/2);image(spaceshipImg,0,0,this.r,this.r);pop;movethis.pos=createVector(mouseX,mouseY);classBulletconstructor(shipPos,angle)this.pos=createVector(shipPos.x,shipPos.y);this.vel=p5.Vector.fromAngle(angle);this.vel.mult(5);showpush;stroke(255);strokeWeight(4);point(this.pos.x,this.pos.y);pop;movethis.pos.add(this.vel);hits(asteroid)letd=dist(this.pos.x,this.pos.y,asteroid.pos.x,asteroid.pos.y);returndlt;asteroid.r;classAsteroidconstructor(pos,r)if(pos)this.pos=pos.copy;elsethis.pos=createVector(random(width),random(height));if(r)this.r=r*0.5;elsethis.r=random(15,50);this.vel=p5.Vector.random2D;showpush;image(asteroidImg,this.pos.x,this.pos.y,this.r*2,this.r*2);pop;movethis.pos.add(this.vel);hits(ship)letd=dist(this.pos.x,this.pos.y,ship.pos.x,ship.pos.y);returndlt;this.r+ship.r;breakupreturn(newAsteroid(this.pos,this.r),newAsteroid(this.pos,this.r));

原來是丟三落四的 ChatGPT 忘記輸出元件相關的函數了。

補充上之后就好了，結果雖然和 DEMO 有些區別，但也是可玩的，用時的確不到五分鐘。

但我們并不滿足于此，于是接下來又試著讓 ChatGPT 給我們增加一些功能。

這些步驟中我們沒有專門設計 prompt，而是直接用自然語言來描述，結果也很好。

這里我們就不逐步展示代碼和 prompt 了，文末分享了整個制作過程中和 ChatGPT 的聊天記錄

首先是增加計分和計時機制:

細心一些的讀者可能會看到，這里不同大小的小行星得分是相同的。

于是我們要求 ChatGPT 為不同大小的小行星設置不同的分數。

而且，這里的小行星飛出畫面之后就不回來了，我們也修復了一下這個 bug。

是不是已經有那味了？但是這個飛船好像不會轉向，我們接下來就解決這個問題:

最后，我們又加入了暫停功能，至此，這款游戲終于大功告成了。

貪吃蛇、別踩白塊都能做

仿照這位博主的教程，我們試著讓 ChatGPT 做些其他游戲出來。

比如貪吃蛇，除了四周的墻壁是后來單獨要求顯示出來之外，其他直接一步到位！

不過我們要求把食物畫成圓形，ChatGPT 給出的是方形的，但也無傷大雅。

不知道是不是貪吃蛇這個游戲太過經典，導致 ChatGPT 看到名字就知道該怎么做了。

所以我們又試了一下，不給出游戲的名字，只描述玩法，看看 ChatGPT 的表現如何。

這次要做的是“別踩白塊”，我們把玩法描述了一番，結果除了速度有些慢，其他地方都非常不錯。

以上就是對代碼解釋器做游戲的全部測評了，如果你還有什么新的想法，歡迎評論區留言！

參考鏈接:

制作過程

小行星:

貪吃蛇:

別踩白塊:

廣告聲明:文內含有的對外跳轉鏈接，用于傳遞更多信息，節省甄選時間，結果僅供參考，IT之家所有文章均包含本聲明。

鄭重聲明：此文內容為本網站轉載企業宣傳資訊，目的在于傳播更多信息，與本站立場無關。僅供讀者參考，并請自行核實相關內容。