整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
<from></form>標簽對用來創(chuàng)建一個表單，即定義表單的開始和結(jié)束位置，<form>標簽具有下面等屬性。
屬性：size、value、maxlength、readonly、disabled
屬性：checked
如何在列表中實現(xiàn)取消選項
屬性：cols、rows
屬性：for、accesskey
家都知道AI現(xiàn)在功能強大，能幫我們完成很多事情，甚至有人用ChatGPT自己寫APP的都有。拿換個思路，如果用AI來開發(fā)一款游戲，應該如何實現(xiàn)呢？
前幾天，我用 ChatGPT 的 GPT-4o 開發(fā)了一個 H5小游戲「龍舟接粽子大賽」。
從技術(shù)實現(xiàn)上，這個游戲只是一個靜態(tài)頁面，對程序員來說，非常容易實現(xiàn)，但是，對不會寫代碼的產(chǎn)品經(jīng)理而言，還是很有難度的。
說實話，作為產(chǎn)品經(jīng)理，我不懂編程，一個人+ AI，1 天內(nèi)上線一個 H5小游戲，還是挺有成就感的。
在 AI 時代，產(chǎn)品經(jīng)理有創(chuàng)意、有想法，完全可以用 AI 快速開發(fā)產(chǎn)品 Demo，進行市場驗證。
今天做個復盤，分享下如何用 ChatGPT 開發(fā) H5小游戲？
內(nèi)容有點多，相信你看完，可以更好理解做一個產(chǎn)品的全過程，以及每個環(huán)節(jié)如何使用 AI 輔助工作。（文末附AI工具清單）
做一個產(chǎn)品，除了想法，還要明確需求細節(jié)、功能與流程、邏輯規(guī)則、界面UI等等，開發(fā)完了，還要通過測試，才能發(fā)布上線。
因此，我把這個游戲當做小型產(chǎn)品來做，包括：需求、設計、開發(fā)、測試和發(fā)布，這 5 個環(huán)節(jié)。
這個過程，AI 扮演了產(chǎn)品的程序員、設計師，還有產(chǎn)品經(jīng)理導師，我們一起協(xié)作完成任務。
你看，開發(fā)一個看似簡單的小游戲，也是在做一個完整的產(chǎn)品，也能積累實踐經(jīng)驗。
剛開始，我還不確定要做什么游戲，只有個模糊的想法，更別說需求。于是，我先跟 GPT 聊，它給出了兩個不錯的方案，還直接生成代碼。
上下滾動查看更多可是，我不懂運行呀，繼續(xù)問，讓它教我操作。
果然在電腦上成功運行，效果還行吧？
不得不感嘆 GPT 代碼能力真強大，完全可以用 GPT 來開發(fā) H5小游戲。
在驗證了技術(shù)可行性后，要明確需求，我更希望做跟賽龍舟有關(guān)的游戲，問 GPT ，賽龍舟的游戲能直接用html來生成嗎？（為了讓它更好地幫我干活，還得多夸夸它）
都怪我這個產(chǎn)品經(jīng)理，沒講清楚需求，只能讓它再改一次。
新版本出來，試玩了一會，效果還不錯，不過，障礙物太多，難度太大，用戶可能玩不下去。
于是，我得寸進尺，讓 GPT 給優(yōu)化建議。
沒想到，它給了幾個靠譜的改進方向后，又直接就秒改出新代碼。
經(jīng)過多輪討論和試玩后，需求基本明確，讓 GPT 根據(jù)我們的對話總結(jié)游戲規(guī)則和邏輯，我再檢查補充。
上下滾動查看更多考慮到要在端午節(jié)發(fā)布，時間比較緊，按照MVP（最小可行化產(chǎn)品）的思路，暫時不搞復雜功能和數(shù)據(jù)統(tǒng)計，只實現(xiàn)核心功能。至此，這個游戲的功能需求基本明確，后面就相對簡單了。
你發(fā)現(xiàn)沒？
在需求環(huán)節(jié)，尤其在「需求不明確」，或者「不知選哪個方案好」的情況下，AI 的作用巨大，它能幫我們理清思路、明確需求，還能分析方案的利弊，幫我們把方案實現(xiàn)出來，讓我們體驗和對比。
這個環(huán)節(jié)，產(chǎn)品經(jīng)理通常要拿產(chǎn)品原型，跟設計師溝通，設計師理解需求后，設計UI。
由于界面簡單，需要的 UI 也少，我直接用 GPT 的 DALL.E 來設計（浮標在網(wǎng)上找的）。
還是先讓 GPT 給建議，它的回答很美好，生成的圖片卻有點尷尬，不太符合我的預期，只能調(diào)整提示詞，最后選了個人比較滿意方案。
有了素材，再用 AI 摳圖工具「魔力筆刷」摳圖，去掉背景，用 PS 合成圖片。看看這最終效果如何？
游戲有了 UI皮膚，還要有背景音樂，玩起來才有感覺。
照例先讓 GPT 給建議，然后，用最近很火的 Suno AI 生成背景音樂，在網(wǎng)上下載常見的吃金幣和游戲結(jié)束音效。
看到這，你也許會發(fā)現(xiàn)，開發(fā)變簡單、高效了。因為整個溝通過程，GPT 一直在輸出代碼，可以立即驗證。真是比敏捷開發(fā)，還敏捷。為了讓它先跟我討論需求，還得專門告訴它，不用輸出代碼，等要輸出代碼再告訴它。
當然，AI 寫代碼，也有會 bug，這也是整個開發(fā)過程中，我最花時間的環(huán)節(jié)——測試。
測試是比較費時間的，產(chǎn)品經(jīng)理要模擬用戶實際的使用場景，不斷地用產(chǎn)品，看看有沒有 bug。
期間，GPT 還真遇到一個 bug ，我們折騰了好久。
本來游戲運行好好的，我讓它調(diào)整龍舟和粽子圖片尺寸的計算方式，新版本運行時沒顯示粽子。
我反饋給 GPT ，它自己就加了調(diào)試信息，告訴我在瀏覽器控制臺看日志，并把日志反饋給它。
我調(diào)試后，直接發(fā)截圖給它，它找到一個問題，又開始一頓瘋狂輸出代碼。可惜，還是沒解決。
我考慮到時間較緊，果斷讓它換一種方式計算圖片尺寸，這個 bug 就沒了。
所以，遇到問題，有時得從其他角度想辦法，也許換一種方式，原來的問題就不存在了。
實際工作中，通常由開發(fā)同事部署發(fā)布產(chǎn)品。我沒研究過部署，只能請教 GPT，它推薦了 Github。
我先把代碼上傳到 Github，生成頁面鏈接，確實免費又方便。可是，國內(nèi)訪問 Github 的速度實在太慢，而且不穩(wěn)定。
幾經(jīng)折騰研究，對比了好幾個云平臺后，選擇騰訊云。
終于，自己一個人完成了產(chǎn)品從構(gòu)思到部署上線的全部事情。
最后，做點總結(jié)。
第一，這個項目不是要做一個很多人用的酷炫游戲，而是驗證一個人不懂編程在 AI 的協(xié)助下獨立開發(fā)一個產(chǎn)品的可能性。
從產(chǎn)品角度，這個游戲有很多地方可以完善。比如，加入微信好友排行榜、加數(shù)據(jù)埋點完善統(tǒng)計等等。
有了這次實踐，后續(xù)開發(fā)其他的產(chǎn)品 Demo，可以更有經(jīng)驗、更高效。
第二，GPT 真是一個非常強大、耐心的好搭檔，能配合我的想法，提出建議和優(yōu)化方向，還能隨時快速生成代碼，幫我驗證想法。
比如，測試中發(fā)現(xiàn) bug，AI 沒有任何情緒，一次又一次，根據(jù)我的調(diào)試反饋去排查問題，修改代碼。
第三，這樣的實踐，也可以鍛煉我們產(chǎn)品經(jīng)理在每個環(huán)節(jié)需要的能力。
比如，在需求環(huán)節(jié)，跟 GPT 討論需求，就像我們跟業(yè)務方溝通需求、跟程序員探討技術(shù)可行性，鍛煉了我們思考、溝通表達需求的能力。
又比如，在開發(fā)環(huán)節(jié)，跟 GPT 反饋問題和調(diào)試效果，就像跟開發(fā)溝通遇到的問題，鍛煉了我們溝通協(xié)作、處理問題的能力。
希望你有所收獲，玩的愉快哦！
工具清單：
1、代碼開發(fā)、UI設計、答疑：ChatGPT
網(wǎng)址：https://chatgpt.com/
2、游戲音樂生成：Suno AI
網(wǎng)址：https://suno.com/
3、圖片合成：稿定設計的在線 PS
網(wǎng)址：https://ps.gaoding.com/#/
4、AI 摳圖：魔力筆刷
網(wǎng)址：https://www.remove.bg/zh/
5、代碼倉庫：Github
網(wǎng)址：https://github.com/
6、云服務器：騰訊云
網(wǎng)址：https://cloud.tencent.com/
本文由人人都是產(chǎn)品經(jīng)理作者【產(chǎn)品經(jīng)理四月】，微信公眾號：【產(chǎn)品經(jīng)理四月】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于 CC0 協(xié)議。
過去的幾年中，CSS布局以及我們開發(fā)網(wǎng)站前端的方式發(fā)生了巨大變化。現(xiàn)在，在CSS用于開發(fā)站點的布局方法方面，我們有了真正的選擇，這意味著我們經(jīng)常需要選擇采用哪種方法。在本文中，我將通過解釋如何使用它們以及如何使用它們的基礎(chǔ)知識，介紹您可以使用的各種布局方法。
通過確保文檔以結(jié)構(gòu)良好的方式開始，您可以利用正常的流程。想象一下，如果不是瀏覽器這種正常流動的概念，而是瀏覽器將所有盒子堆疊在彼此的角上，直到創(chuàng)建布局。那意味著您將必須將所有單個內(nèi)容放置在頁面上。而是，瀏覽器以立即可讀的方式顯示我們的內(nèi)容。
如果您的CSS無法加載，則用戶仍然可以閱讀內(nèi)容，而完全不獲取CSS的用戶（例如，使用屏幕閱讀器的用戶）將按照文檔中的順序?qū)?nèi)容交付給他們。從可訪問性的角度來看，使HTML文檔井井有條地開始生活至關(guān)重要。但是，這也將使您作為Web開發(fā)人員的生活更加輕松。如果您的內(nèi)容符合用戶希望閱讀的順序，則無需對布局進行大量更改即可將其放置在正確的位置。使用更新的布局方法，您可能會驚訝于您要做的事很少。
因此，在考慮布局之前，請考慮文檔結(jié)構(gòu)和您希望從文檔頂部到底部閱讀內(nèi)容的順序。
有了結(jié)構(gòu)合理的文檔后，我們需要決定如何采用該文檔并將其轉(zhuǎn)換為所需的布局。對于我們文檔的某些部分，這將涉及偏離正常流程。我們有整套的布局方法可供使用。我們將要研究的第一種方法是float，因為浮點數(shù)很好地說明了從正常流中取出元素的含義。
浮動框用于將框向左或向右移動，以使內(nèi)容圍繞它顯示。
為了浮動項目，請使用CSS屬性float和一個left或right值。float的默認值為none。
值得注意的是，當您浮動一個項目并用文本環(huán)繞時，會縮短該內(nèi)容的行框。如果您浮動某個項目，并且以下包含您的文本的框應用了背景色，則可以看到該背景色將在該浮動項下運行。
在縮短行框以在浮動文本和自動換行文本之間留出空間時，必須在浮動項目上設置邊距。文本上的邊距只是將文本從容器的邊緣移入。對于向左浮動的圖像，假設您希望圖像與容器的頂部和左側(cè)齊平，則應在右側(cè)和底部添加邊距。
內(nèi)容的背景色在浮動下運行
浮動元素后，以下所有元素將環(huán)繞該浮動元素，直到它們包裹在下面，并且正常流程繼續(xù)進行。如果要防止這種情況，則需要清除浮點數(shù)。
在要在浮動之后開始顯示的元素上，添加clear值為left 的屬性以指示清除向左浮動的項目，向右以清除向右浮動的項目，或同時清除所有浮動。
如果希望元素在浮點后開始，則上述方法有效。如果您發(fā)現(xiàn)自己的狀態(tài)是盒子里有一個漂浮的物品，并且旁邊有一些文字，那將無濟于事。如果文本比浮動項目短，則將在內(nèi)容下方繪制該框，而忽略浮動項目。正如我們已經(jīng)了解的那樣，浮點數(shù)會縮短線框，其余的布局將繼續(xù)正常流動。
為了防止這種情況，我們需要清除包裝箱內(nèi)的東西。我們可以添加一個空元素并將其設置為清除所有元素。這涉及將空div粘貼到我們的文檔中，這并不理想，如果您的頁面是由CMS生成的，則可能無法實現(xiàn)。因此，典型的清除浮動方法是所謂的清除修補程序。此方法通過添加CSS生成的內(nèi)容并將其設置為清除兩者來起作用。
清除框內(nèi)浮點數(shù)的另一種方法是在容器上調(diào)用塊格式化上下文（BFC）。塊格式上下文包含其中的所有內(nèi)容，其中將包括無法再戳出框底部的浮動項目。有幾種強制BFC的方法，清除浮點數(shù)時最常見的方法是將溢出屬性設置為具有默認可見值以外的值。
以這種方式使用溢出通常會起作用，但是，在某些情況下，您最終可能會在項目上留下陰影或不必要的滾動條。在樣式表中看起來也有些混亂：您是否設置了溢出是因為需要滾動條還是只是為了獲得這種清除功能？
為了使意圖更清晰并防止創(chuàng)建BFC引起不必要的副作用，可以將其flow-root用作該display屬性的值。唯一要做的display: flow-root就是創(chuàng)建一個BFC，從而清除浮標而不會引起其他問題。
在使用較新的布局方法來創(chuàng)建列布局之前，浮動技術(shù)一直通過為一組項目提供一定的寬度并將它們設置為彼此相鄰浮動來起作用。仔細管理這些浮動框的百分比大小可能會產(chǎn)生網(wǎng)格效果。
我不建議立即開始新設計并使用此方法。但是，它將在現(xiàn)有站點中保留很多年。因此，如果遇到幾乎所有東西都漂浮的設計，那么這就是使用的技術(shù)。
要從普通流中刪除元素或?qū)⑵鋸钠胀髦械奈恢靡崎_，可以使用positionCSS中的屬性。正常流動時，元素position的static。這些項目在“塊”維度中一個接一個地顯示，如果滾動頁面，它們也會隨之滾動。
更改位置值時，通常還會使用偏移值將框從特定參考點移開。使用的參考點取決于您使用的位置值。
如果項目具有position: relative參考點，則該參考點通常是正常流動的地方。然后，您可以使用偏移的屬性值top，left，bottom和right移動從那里通常會顯示框。
請注意，頁面上的其他項目不會響應元素的新位置。保留了它在正常流程中的位置，因此您需要自己管理所有重疊部分。
設置position: absolute的一個項目，它完全從正常流程中移除。剩下的空間將被刪除。然后，將相對于其包含的塊定位該項目，除非將其嵌套在另一個定位的元素內(nèi)，否則它將為視口。
因此，如果position: absolute在項目上進行設置，將會發(fā)生的第一件事是，它通常最終會卡在視口的頂部和左側(cè)。然后，您可以使用偏移的屬性值top，left，bottom并right從該位置移動框，你希望它是。
通常，您不希望根據(jù)視口放置盒子，但是在引用包含元素時，它位于內(nèi)部。在這種情況下，您需要為包含該元素的位置賦予默認靜態(tài)值以外的位置值。
由于設置position: relative不會從正常流程中刪除該項目，因此這是通常的選擇。給您希望設置偏移的父元素，position: relative然后從該元素的邊界偏移絕對定位的塊。
position: fixed在大多數(shù)情況下，帶有的東西將相對于視口放置，并從文檔流中刪除，因此不會為其保留任何空間。滾動頁面時，固定元素將相對于視口保持在適當?shù)奈恢茫驗檎Ａ髦械钠溆鄡?nèi)容照常滾動。
這有助于啟用固定的導航面板，該面板在屏幕上（例如，在內(nèi)容滾動時）保持在屏幕上。與其他定位值一樣，這樣做可能會導致重疊，因此應注意所有內(nèi)容都可以讀取并且不會以固定項目結(jié)尾。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
