利用deepseek做了一个网上火爆的刮刮乐小游戏,真的太快了,我的截屏速度还赶不上它生成代码的速度。
以下 是我发出指令的过程和它生成代码的截图:
写一个HTML页面,总体的功能是“刮刮乐”(鼠标点击),界面上放着N个方块,里面随机放着奖品列表中的奖品,广场数量和奖品,用户可以完全自定义。最开始这个方块是被灰色的遮住的,用户用手刮了之后才展示真正的内容。注意整体界面风格要卡通、可爱请把设置界面变得可以收起来,让设置的人在设置时展示,活动开始后,要收缩起来,免得参与者在活动过程中还能看到奖品信息。
以下是一个实现 “刮刮乐” 功能的 HTML 页面代码,支持自定义方块数量和奖品列表,界面风格卡通可爱,设置界面可以收起:
代码说明:
- HTML 结构:包含一个标题 卡通刮刮乐。一个 “设置” 按钮,用于展开或收起设置界面。设置界面包含输入方块数量和奖品列表的输入框,以及一个 “开始活动” 按钮。刮刮乐区域用于显示刮刮卡方块。
- CSS 样式:使用 Comic Sans MS 字体,营造卡通可爱的风格。设置背景颜色、边框、圆角等样式,使界面更加美观。#settings.collapsed 类用于隐藏设置界面。.scratchCard 类定义刮刮卡方块的样式,.scratchCard.revealed 类用于显示刮开后的效果。
- JavaScript 功能:toggleSettings 按钮点击事件用于展开或收起设置界面。generateScratchCards 函数用于根据用户输入的方块数量和奖品列表生成刮刮卡方块,并将奖品随机分配到方块中。点击刮刮卡方块时,添加 revealed 类,显示奖品信息。
使用方法:
- 打开页面后,在设置界面输入方块数量和奖品列表(每行一个奖品)。
- 点击 “开始活动” 按钮,生成刮刮卡方块,设置界面自动收起。
- 点击刮刮卡方块,查看奖品信息。
- 点击 “设置” 按钮可以再次展开设置界面。
分享
在页面中添加音乐或音效。
如何增加更多的奖品动画效果?
如何调整刮刮乐方块的样式?