我用AI写了个小程序,却被人说没有底线…

大家好!

今天想和大家分享一下我用AI开发的一款微信小程序------【破冰神器】。

作为一个喜欢和朋友聚会但又经常面临"冷场"尴尬的i人,我一直在寻找一款能够活跃聚会氛围的小程序。但市面上的应用要么做工粗糙功能单一,要么一堆广告没法玩。于是,我决定自己动手(其实只动了嘴,是AI动的手),开发一款好用、功能丰富的"破冰神器"。

先扣一下文章标题,为什么会被人说没有底线,主要还是一些人对真心话大冒险的刻板印象吧,是添加了一些亲密互动和情侣模式,不过也是大家各取所需,物尽其用吧。


好了,先给大家展示一下这款小程序的主要界面

可惜掘金这里发视频不是很方便,感兴趣的朋友可以移步微信小程序体验一下。

💡 开发初衷

在朋友聚会、团建破冰或者KTV唱歌时,我们经常需要一些小道具来活跃气氛。比如:

  • 想玩真心话大冒险,但想不出好题目?
  • 想玩摇骰子,但找不到实体骰子?
  • 想抽扑克牌比大小,但没带牌?
  • 喝酒时想玩个简单的猜数字游戏? 【破冰神器】就是为了解决这些场景而生的。

🚀 功能亮点介绍

1. 真心话大冒险 (Truth or Dare)

这是小程序的核心功能。为了保证题目的趣味性和多样性,我接入了 LeanCloud 作为后端数据库,这样可以动态更新题目库,而不需要频繁发版。(已经录入了几百道题了)

  • 多模式支持 :不仅有传统的"真心话"和"大冒险",我还加入了"谁来喝"、"好运卡"、"亲密互动"以及"情侣模式"。
  • 自定义概率 :为了满足不同场合的诉求差异,可以自由调整每种模式的出现概率。
  • 交互体验 :卡片切换使用了平滑的动画效果,配合手机的震动反馈,抽卡的感觉非常真实。

2. 摇骰子 (Dice)

模拟真实的骰子体验。

  • 多骰子支持 :最多支持 5 颗骰子同时摇动。
  • 真实手感 :支持"长按蓄力"和"点击"两种模式,配合震动反馈,还原真实的博弈感。
  • 遮罩模式 :摇完后默认可以覆盖结果,增加神秘感,大家猜完后再揭晓。

3. 扑克牌 (Poker)

一个极简的抽牌工具。

  • 自定义张数 :默认抽3张,也可以根据规则调整。
  • 大小王开关 :支持配置是否包含大小王。

4. 猜数字 (Guess Number)

经典的"高低猜"游戏,非常适合作为酒桌惩罚游戏。

  • 范围设定 :支持 1-99 和 1-999 两种难度。
  • 胜利特效 :猜中数字后会有全屏烟花特效,庆祝胜利(或者迎接惩罚)。

🛠 技术实现分享

0. 开发工具选择

  • AI开发工具我选用了TRAE,确实在国内用起来方便太多了。
  • 大模型我选择谷歌的gemini3pro,它实现UI的能力让我眼前一亮,已经离不开了。

1. 技术栈选择

  • 前端 :原生微信小程序 (WXML, WXSS, JS)。原生开发虽然繁琐,但在性能和体验上是最优的,特别是对于需要频繁动画交互的游戏类应用。
  • 后端 : LeanCloud (Serverless) 。对于这种轻量级的小程序,Serverless 是绝佳选择。我不需要维护服务器,只需要通过 API 获取题目数据,省心省力。
  • 国际化 :内置了 i18n 模块,为未来的多语言支持做好了准备。

2. 沉浸式 UI 设计

为了打造"夜间模式"的聚会氛围,我将整体 UI 风格定调为深色系。

  • 自定义导航栏 :为了最大化可视面积和统一视觉风格,我取消了原生导航栏,实现了自定义 Navigation Bar,完美适配各种刘海屏机型。
  • 触感反馈 :在用户交互的关键节点(如抽卡、摇骰子、按钮点击)都加入了 wx.vibrateShort的轻微震动反馈,提升操作的确认感。

3. 动画与性能

  • Canvas 烟花 :猜数字胜利时的烟花效果使用了 Canvas 绘制,保证了流畅度。
  • CSS3 动画 :卡片的翻转、入场动画主要依赖 CSS3 transform 和 transition ,减少 JS 线程的压力。
  • 粒子爆炸效果:引入了three.js的库,太好用了只能说!

🔮 未来展望

目前的【破冰神器】已经能满足基础的聚会需求,但我还有很多想法:

  • 更多游戏 :比如"谁是卧底"、"你画我猜"等多人在线互动游戏。
  • 题库共建 :允许用户提交自己的真心话大冒险题目、审核题目、自定义卡组等。
  • 联机模式 :不仅仅是线下传手机玩,未来希望能支持面对面建房,大家在自己的手机上操作。
感谢大家使用【破冰神器】,如果你有任何建议或发现了 Bug,欢迎在小程序里给我留言!
相关推荐
梵尔纳多2 小时前
打包 Electron 程序
前端·javascript·electron
接着奏乐接着舞。2 小时前
3D地球可视化教程 - 第6篇:蜂巢网格与自定义几何体
前端·vue.js·3d·threejs
GISer_Jing2 小时前
Taro打造电商项目实战
前端·javascript·人工智能·aigc·taro
KLW752 小时前
vue watch监听
前端·javascript·vue.js
晴殇i2 小时前
🎉 TRAE 一年使用的过程体验 🎉
前端
GDAL3 小时前
Tailwind CSS Flex 布局深入全面教程
前端·css·tailwindcss
qq. 28040339843 小时前
react --> redux
前端·react.js·前端框架
前端不太难3 小时前
用 RN 的渲染模型,反推 Vue 列表的正确拆分方式
前端·javascript·vue.js
JS_GGbond3 小时前
防抖与节流:前端性能优化“双剑客”
前端