整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
<from></form>标签对用来创建一个表单，即定义表单的开始和结束位置，<form>标签具有下面等属性。
属性：size、value、maxlength、readonly、disabled
属性：checked
如何在列表中实现取消选项
属性：cols、rows
属性：for、accesskey
家都知道AI现在功能强大，能帮我们完成很多事情，甚至有人用ChatGPT自己写APP的都有。拿换个思路，如果用AI来开发一款游戏，应该如何实现呢？
前几天，我用 ChatGPT 的 GPT-4o 开发了一个 H5小游戏「龙舟接粽子大赛」。
从技术实现上，这个游戏只是一个静态页面，对程序员来说，非常容易实现，但是，对不会写代码的产品经理而言，还是很有难度的。
说实话，作为产品经理，我不懂编程，一个人+ AI，1 天内上线一个 H5小游戏，还是挺有成就感的。
在 AI 时代，产品经理有创意、有想法，完全可以用 AI 快速开发产品 Demo，进行市场验证。
今天做个复盘，分享下如何用 ChatGPT 开发 H5小游戏？
内容有点多，相信你看完，可以更好理解做一个产品的全过程，以及每个环节如何使用 AI 辅助工作。（文末附AI工具清单）
做一个产品，除了想法，还要明确需求细节、功能与流程、逻辑规则、界面UI等等，开发完了，还要通过测试，才能发布上线。
因此，我把这个游戏当做小型产品来做，包括：需求、设计、开发、测试和发布，这 5 个环节。
这个过程，AI 扮演了产品的程序员、设计师，还有产品经理导师，我们一起协作完成任务。
你看，开发一个看似简单的小游戏，也是在做一个完整的产品，也能积累实践经验。
刚开始，我还不确定要做什么游戏，只有个模糊的想法，更别说需求。于是，我先跟 GPT 聊，它给出了两个不错的方案，还直接生成代码。
上下滚动查看更多可是，我不懂运行呀，继续问，让它教我操作。
果然在电脑上成功运行，效果还行吧？
不得不感叹 GPT 代码能力真强大，完全可以用 GPT 来开发 H5小游戏。
在验证了技术可行性后，要明确需求，我更希望做跟赛龙舟有关的游戏，问 GPT ，赛龙舟的游戏能直接用html来生成吗？（为了让它更好地帮我干活，还得多夸夸它）
都怪我这个产品经理，没讲清楚需求，只能让它再改一次。
新版本出来，试玩了一会，效果还不错，不过，障碍物太多，难度太大，用户可能玩不下去。
于是，我得寸进尺，让 GPT 给优化建议。
没想到，它给了几个靠谱的改进方向后，又直接就秒改出新代码。
经过多轮讨论和试玩后，需求基本明确，让 GPT 根据我们的对话总结游戏规则和逻辑，我再检查补充。
上下滚动查看更多考虑到要在端午节发布，时间比较紧，按照MVP（最小可行化产品）的思路，暂时不搞复杂功能和数据统计，只实现核心功能。至此，这个游戏的功能需求基本明确，后面就相对简单了。
你发现没？
在需求环节，尤其在「需求不明确」，或者「不知选哪个方案好」的情况下，AI 的作用巨大，它能帮我们理清思路、明确需求，还能分析方案的利弊，帮我们把方案实现出来，让我们体验和对比。
这个环节，产品经理通常要拿产品原型，跟设计师沟通，设计师理解需求后，设计UI。
由于界面简单，需要的 UI 也少，我直接用 GPT 的 DALL.E 来设计（浮标在网上找的）。
还是先让 GPT 给建议，它的回答很美好，生成的图片却有点尴尬，不太符合我的预期，只能调整提示词，最后选了个人比较满意方案。
有了素材，再用 AI 抠图工具「魔力笔刷」抠图，去掉背景，用 PS 合成图片。看看这最终效果如何？
游戏有了 UI皮肤，还要有背景音乐，玩起来才有感觉。
照例先让 GPT 给建议，然后，用最近很火的 Suno AI 生成背景音乐，在网上下载常见的吃金币和游戏结束音效。
看到这，你也许会发现，开发变简单、高效了。因为整个沟通过程，GPT 一直在输出代码，可以立即验证。真是比敏捷开发，还敏捷。为了让它先跟我讨论需求，还得专门告诉它，不用输出代码，等要输出代码再告诉它。
当然，AI 写代码，也有会 bug，这也是整个开发过程中，我最花时间的环节——测试。
测试是比较费时间的，产品经理要模拟用户实际的使用场景，不断地用产品，看看有没有 bug。
期间，GPT 还真遇到一个 bug ，我们折腾了好久。
本来游戏运行好好的，我让它调整龙舟和粽子图片尺寸的计算方式，新版本运行时没显示粽子。
我反馈给 GPT ，它自己就加了调试信息，告诉我在浏览器控制台看日志，并把日志反馈给它。
我调试后，直接发截图给它，它找到一个问题，又开始一顿疯狂输出代码。可惜，还是没解决。
我考虑到时间较紧，果断让它换一种方式计算图片尺寸，这个 bug 就没了。
所以，遇到问题，有时得从其他角度想办法，也许换一种方式，原来的问题就不存在了。
实际工作中，通常由开发同事部署发布产品。我没研究过部署，只能请教 GPT，它推荐了 Github。
我先把代码上传到 Github，生成页面链接，确实免费又方便。可是，国内访问 Github 的速度实在太慢，而且不稳定。
几经折腾研究，对比了好几个云平台后，选择腾讯云。
终于，自己一个人完成了产品从构思到部署上线的全部事情。
最后，做点总结。
第一，这个项目不是要做一个很多人用的酷炫游戏，而是验证一个人不懂编程在 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 协议。
过去的几年中，CSS布局以及我们开发网站前端的方式发生了巨大变化。现在，在CSS用于开发站点的布局方法方面，我们有了真正的选择，这意味着我们经常需要选择采用哪种方法。在本文中，我将通过解释如何使用它们以及如何使用它们的基础知识，介绍您可以使用的各种布局方法。
通过确保文档以结构良好的方式开始，您可以利用正常的流程。想象一下，如果不是浏览器这种正常流动的概念，而是浏览器将所有盒子堆叠在彼此的角上，直到创建布局。那意味着您将必须将所有单个内容放置在页面上。而是，浏览器以立即可读的方式显示我们的内容。
如果您的CSS无法加载，则用户仍然可以阅读内容，而完全不获取CSS的用户（例如，使用屏幕阅读器的用户）将按照文档中的顺序将内容交付给他们。从可访问性的角度来看，使HTML文档井井有条地开始生活至关重要。但是，这也将使您作为Web开发人员的生活更加轻松。如果您的内容符合用户希望阅读的顺序，则无需对布局进行大量更改即可将其放置在正确的位置。使用更新的布局方法，您可能会惊讶于您要做的事很少。
因此，在考虑布局之前，请考虑文档结构和您希望从文档顶部到底部阅读内容的顺序。
有了结构合理的文档后，我们需要决定如何采用该文档并将其转换为所需的布局。对于我们文档的某些部分，这将涉及偏离正常流程。我们有整套的布局方法可供使用。我们将要研究的第一种方法是float，因为浮点数很好地说明了从正常流中取出元素的含义。
浮动框用于将框向左或向右移动，以使内容围绕它显示。
为了浮动项目，请使用CSS属性float和一个left或right值。float的默认值为none。
值得注意的是，当您浮动一个项目并用文本环绕时，会缩短该内容的行框。如果您浮动某个项目，并且以下包含您的文本的框应用了背景色，则可以看到该背景色将在该浮动项下运行。
在缩短行框以在浮动文本和自动换行文本之间留出空间时，必须在浮动项目上设置边距。文本上的边距只是将文本从容器的边缘移入。对于向左浮动的图像，假设您希望图像与容器的顶部和左侧齐平，则应在右侧和底部添加边距。
内容的背景色在浮动下运行
浮动元素后，以下所有元素将环绕该浮动元素，直到它们包裹在下面，并且正常流程继续进行。如果要防止这种情况，则需要清除浮点数。
在要在浮动之后开始显示的元素上，添加clear值为left 的属性以指示清除向左浮动的项目，向右以清除向右浮动的项目，或同时清除所有浮动。
如果希望元素在浮点后开始，则上述方法有效。如果您发现自己的状态是盒子里有一个漂浮的物品，并且旁边有一些文字，那将无济于事。如果文本比浮动项目短，则将在内容下方绘制该框，而忽略浮动项目。正如我们已经了解的那样，浮点数会缩短线框，其余的布局将继续正常流动。
为了防止这种情况，我们需要清除包装箱内的东西。我们可以添加一个空元素并将其设置为清除所有元素。这涉及将空div粘贴到我们的文档中，这并不理想，如果您的页面是由CMS生成的，则可能无法实现。因此，典型的清除浮动方法是所谓的清除修补程序。此方法通过添加CSS生成的内容并将其设置为清除两者来起作用。
清除框内浮点数的另一种方法是在容器上调用块格式化上下文（BFC）。块格式上下文包含其中的所有内容，其中将包括无法再戳出框底部的浮动项目。有几种强制BFC的方法，清除浮点数时最常见的方法是将溢出属性设置为具有默认可见值以外的值。
以这种方式使用溢出通常会起作用，但是，在某些情况下，您最终可能会在项目上留下阴影或不必要的滚动条。在样式表中看起来也有些混乱：您是否设置了溢出是因为需要滚动条还是只是为了获得这种清除功能？
为了使意图更清晰并防止创建BFC引起不必要的副作用，可以将其flow-root用作该display属性的值。唯一要做的display: flow-root就是创建一个BFC，从而清除浮标而不会引起其他问题。
在使用较新的布局方法来创建列布局之前，浮动技术一直通过为一组项目提供一定的宽度并将它们设置为彼此相邻浮动来起作用。仔细管理这些浮动框的百分比大小可能会产生网格效果。
我不建议立即开始新设计并使用此方法。但是，它将在现有站点中保留很多年。因此，如果遇到几乎所有东西都漂浮的设计，那么这就是使用的技术。
要从普通流中删除元素或将其从普通流中的位置移开，可以使用positionCSS中的属性。正常流动时，元素position的static。这些项目在“块”维度中一个接一个地显示，如果滚动页面，它们也会随之滚动。
更改位置值时，通常还会使用偏移值将框从特定参考点移开。使用的参考点取决于您使用的位置值。
如果项目具有position: relative参考点，则该参考点通常是正常流动的地方。然后，您可以使用偏移的属性值top，left，bottom和right移动从那里通常会显示框。
请注意，页面上的其他项目不会响应元素的新位置。保留了它在正常流程中的位置，因此您需要自己管理所有重叠部分。
设置position: absolute的一个项目，它完全从正常流程中移除。剩下的空间将被删除。然后，将相对于其包含的块定位该项目，除非将其嵌套在另一个定位的元素内，否则它将为视口。
因此，如果position: absolute在项目上进行设置，将会发生的第一件事是，它通常最终会卡在视口的顶部和左侧。然后，您可以使用偏移的属性值top，left，bottom并right从该位置移动框，你希望它是。
通常，您不希望根据视口放置盒子，但是在引用包含元素时，它位于内部。在这种情况下，您需要为包含该元素的位置赋予默认静态值以外的位置值。
由于设置position: relative不会从正常流程中删除该项目，因此这是通常的选择。给您希望设置偏移的父元素，position: relative然后从该元素的边界偏移绝对定位的块。
position: fixed在大多数情况下，带有的东西将相对于视口放置，并从文档流中删除，因此不会为其保留任何空间。滚动页面时，固定元素将相对于视口保持在适当的位置，因为正常流中的其余内容照常滚动。
这有助于启用固定的导航面板，该面板在屏幕上（例如，在内容滚动时）保持在屏幕上。与其他定位值一样，这样做可能会导致重叠，因此应注意所有内容都可以读取并且不会以固定项目结尾。
*请认真填写需求信息，我们会在24小时内与您取得联系。
