AI應用實踐:不懂編程,如何用ChatGPT開發H5小游戲?

0 評論 3567 瀏覽 21 收藏 12 分鐘

大家都知道AI現在功能強大,能幫我們完成很多事情,甚至有人用ChatGPT自己寫APP的都有。拿換個思路,如果用AI來開發一款游戲,應該如何實現呢?

前幾天,我用 ChatGPT 的 GPT-4o 開發了一個 H5小游戲「龍舟接粽子大賽」。

從技術實現上,這個游戲只是一個靜態頁面,對程序員來說,非常容易實現,但是,對不會寫代碼的產品經理而言,還是很有難度的。

說實話,作為產品經理,我不懂編程,一個人+ AI,1 天內上線一個 H5小游戲,還是挺有成就感的。

在 AI 時代,產品經理有創意、有想法,完全可以用 AI 快速開發產品 Demo,進行市場驗證。

今天做個復盤,分享下如何用 ChatGPT 開發 H5小游戲?

內容有點多,相信你看完,可以更好理解做一個產品的全過程,以及每個環節如何使用 AI 輔助工作。(文末附AI工具清單)

做一個產品,除了想法,還要明確需求細節、功能與流程、邏輯規則、界面UI等等,開發完了,還要通過測試,才能發布上線。

因此,我把這個游戲當做小型產品來做,包括:需求、設計、開發、測試和發布,這 5 個環節。

這個過程,AI 扮演了產品的程序員、設計師,還有產品經理導師,我們一起協作完成任務。

你看,開發一個看似簡單的小游戲,也是在做一個完整的產品,也能積累實踐經驗。

01 需求環節

剛開始,我還不確定要做什么游戲,只有個模糊的想法,更別說需求。于是,我先跟 GPT 聊,它給出了兩個不錯的方案,還直接生成代碼。

上下滾動查看更多可是,我不懂運行呀,繼續問,讓它教我操作。

果然在電腦上成功運行,效果還行吧?

不得不感嘆 GPT 代碼能力真強大,完全可以用 GPT 來開發 H5小游戲。

在驗證了技術可行性后,要明確需求,我更希望做跟賽龍舟有關的游戲,問 GPT ,賽龍舟的游戲能直接用html來生成嗎?(為了讓它更好地幫我干活,還得多夸夸它)

都怪我這個產品經理,沒講清楚需求,只能讓它再改一次。

新版本出來,試玩了一會,效果還不錯,不過,障礙物太多,難度太大,用戶可能玩不下去。

于是,我得寸進尺,讓 GPT 給優化建議。

沒想到,它給了幾個靠譜的改進方向后,又直接就秒改出新代碼。

經過多輪討論和試玩后,需求基本明確,讓 GPT 根據我們的對話總結游戲規則和邏輯,我再檢查補充。

上下滾動查看更多考慮到要在端午節發布,時間比較緊,按照MVP(最小可行化產品)的思路,暫時不搞復雜功能和數據統計,只實現核心功能。至此,這個游戲的功能需求基本明確,后面就相對簡單了。

你發現沒?

在需求環節,尤其在「需求不明確」,或者「不知選哪個方案好」的情況下,AI 的作用巨大,它能幫我們理清思路、明確需求,還能分析方案的利弊,幫我們把方案實現出來,讓我們體驗和對比。

02 設計環節

這個環節,產品經理通常要拿產品原型,跟設計師溝通,設計師理解需求后,設計UI。

由于界面簡單,需要的 UI 也少,我直接用 GPT 的 DALL.E 來設計(浮標在網上找的)。

還是先讓 GPT 給建議,它的回答很美好,生成的圖片卻有點尷尬,不太符合我的預期,只能調整提示詞,最后選了個人比較滿意方案。

有了素材,再用 AI 摳圖工具「魔力筆刷」摳圖,去掉背景,用 PS 合成圖片??纯催@最終效果如何?

游戲有了 UI皮膚,還要有背景音樂,玩起來才有感覺。

照例先讓 GPT 給建議,然后,用最近很火的 Suno AI 生成背景音樂,在網上下載常見的吃金幣和游戲結束音效。

03 開發環節

看到這,你也許會發現,開發變簡單、高效了。因為整個溝通過程,GPT 一直在輸出代碼,可以立即驗證。真是比敏捷開發,還敏捷。為了讓它先跟我討論需求,還得專門告訴它,不用輸出代碼,等要輸出代碼再告訴它。

當然,AI 寫代碼,也有會 bug,這也是整個開發過程中,我最花時間的環節——測試。

04 測試環節

測試是比較費時間的,產品經理要模擬用戶實際的使用場景,不斷地用產品,看看有沒有 bug。

期間,GPT 還真遇到一個 bug ,我們折騰了好久。

本來游戲運行好好的,我讓它調整龍舟和粽子圖片尺寸的計算方式,新版本運行時沒顯示粽子。

我反饋給 GPT ,它自己就加了調試信息,告訴我在瀏覽器控制臺看日志,并把日志反饋給它。

我調試后,直接發截圖給它,它找到一個問題,又開始一頓瘋狂輸出代碼??上?,還是沒解決。

我考慮到時間較緊,果斷讓它換一種方式計算圖片尺寸,這個 bug 就沒了。

所以,遇到問題,有時得從其他角度想辦法,也許換一種方式,原來的問題就不存在了。

05 發布環節

實際工作中,通常由開發同事部署發布產品。我沒研究過部署,只能請教 GPT,它推薦了 Github。

我先把代碼上傳到 Github,生成頁面鏈接,確實免費又方便??墒?,國內訪問 Github 的速度實在太慢,而且不穩定。

幾經折騰研究,對比了好幾個云平臺后,選擇騰訊云。

終于,自己一個人完成了產品從構思到部署上線的全部事情。

06 總結

最后,做點總結。

第一,這個項目不是要做一個很多人用的酷炫游戲,而是驗證一個人不懂編程在 AI 的協助下獨立開發一個產品的可能性。

從產品角度,這個游戲有很多地方可以完善。比如,加入微信好友排行榜、加數據埋點完善統計等等。

有了這次實踐,后續開發其他的產品 Demo,可以更有經驗、更高效。

第二,GPT 真是一個非常強大、耐心的好搭檔,能配合我的想法,提出建議和優化方向,還能隨時快速生成代碼,幫我驗證想法。

比如,測試中發現 bug,AI 沒有任何情緒,一次又一次,根據我的調試反饋去排查問題,修改代碼。

第三,這樣的實踐,也可以鍛煉我們產品經理在每個環節需要的能力。

比如,在需求環節,跟 GPT 討論需求,就像我們跟業務方溝通需求、跟程序員探討技術可行性,鍛煉了我們思考、溝通表達需求的能力。

又比如,在開發環節,跟 GPT 反饋問題和調試效果,就像跟開發溝通遇到的問題,鍛煉了我們溝通協作、處理問題的能力。

希望你有所收獲,玩的愉快哦!

工具清單:

1、代碼開發、UI設計、答疑:ChatGPT

網址:https://chatgpt.com/

2、游戲音樂生成:Suno AI

網址:https://suno.com/

3、圖片合成:稿定設計的在線 PS

網址:https://ps.gaoding.com/#/

4、AI 摳圖:魔力筆刷

網址:https://www.remove.bg/zh/

5、代碼倉庫:Github

網址:https://github.com/

6、云服務器:騰訊云

網址:https://cloud.tencent.com/

本文由人人都是產品經理作者【產品經理四月】,微信公眾號:【產品經理四月】,原創/授權 發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基于 CC0 協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!