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