网页里的团圆味,AI 包饺子小游戏上线

举报
码喽 发表于 2026/02/13 17:01:04 2026/02/13
【摘要】 复制文中的Prompt,即可前往华为云码道(CodeArts)代码智能体 IDE中生成开启你的AI创作

复制下方指令,前往华为云码道(CodeArts)代码智能体 体验。模型生成有随机性,期待你做出的不同效果。

使用前端skill,生成一个HTML春节合家欢游戏演示页,要求如下: 核心需求: 主题: 红金配色,融入灯笼、福字元素,营造春节氛围。 玩法: 双模式(饺子/汤圆),核心操作为拖拽食材,有倒计时机制。 体验: 操作极简,大按钮大字体,设置操作指南包含了1、不同食材分数不一样:比如虾仁15分、猪肉12分,想赢就得多拿高分食材。 还要加上面粉,牛肉,鸡肉,羊肉等选项 2、包着包着还会蹦出惊喜彩蛋:第5个触发“五福临门”,第10个“财源滚滚”。3、从左边拖拽食材到右边时加个成功的提示或者数量的提示。反馈: 包含搞笑失误台词(如“馅漏啦!”)和春节彩蛋(如集齐五福)。 适配: 响应式设计,适配PC与移动端。 技术栈: 使用 Phaser.js 实现游戏核心逻辑与动画。 使用 Tailwind CSS 进行响应式布局与样式构建。 使用 WebSocket 模拟 展示跨设备对战提示。 页面内容需包含: 模式选择界面(饺子/汤圆大按钮)。 游戏主界面:包含拖拽区(食材)、目标区(面皮/锅)、计时器、得分/进度显示。 明显的操作反馈区域,用于显示成功/搞笑失误台词。 彩蛋触发提示区域(如“五福集齐!”特效提示)。 输出要求: 生成一个独立的、可运行的HTML文件,内嵌必要的Phaser游戏代码、样式与逻辑。

页面生成效果预览

然后根据自己的兴趣选择时包饺子还是包汤圆,选择以后将材料拽入锅中就可以获取积分

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。