项目介绍
猜拳小游戏是一款基于微信原生小程序开发的石头剪刀布休闲对战小程序,无需后端服务器,全部游戏逻辑运行在前端本地。玩家可以和电脑 AI 进行猜拳对战,系统随机生成 AI 出拳手势,按照经典猜拳规则自动判定每局胜负,实时统计玩家胜利、AI 胜利、平局的对战分数。游戏数据使用小程序本地 Storage 持久保存,关闭小程序再次打开分数记录不会丢失。界面交互简洁,包含手势图标、对战结果提示、计分面板、重置游戏功能。项目代码量少、逻辑清晰,适合微信小程序入门学习,理解事件绑定、数据渲染、本地缓存、游戏胜负判定算法,可作为计算机专业小程序课程设计、作业实战案例。
项目结构目录
项目主要技术框架
3.1核心底层框架
原生微信小程序纯前端架构,不需要后端、不需要数据库。JS 实现 AI 随机出拳、猜拳胜负核心判定算法;使用 wx.setStorageSync/wx.getStorageSync 做本地持久化存储,保存对战统计分数;WXML 负责页面数据绑定渲染,WXSS 完成界面布局;全部逻辑在客户端执行,打开即可游玩,离线也可以正常游戏。结构简单易读,方便二次扩展,例如增加动画音效、排行榜、分享等功能。
3.2后端技术栈
开发语言:JavaScript
页面语法:WXML + WXSS
存储:小程序 LocalStorage 本地缓存
能力:随机算法、事件点击、条件渲染
运行环境:微信客户端
3.3前端技术栈
无 MySQL 数据库,全部游戏分数(玩家胜、AI 胜、平局)存储在小程序本地 Storage;卸载小程序、清除缓存数据会丢失记录,无云端数据。
3.4 数据库
开发工具:微信开发者工具 运行环境:微信客户端 配套资源:完整小程序源码 需要:小程序 AppID(测试号也可以运行)
3.5开发及生产环境
开发工具:微信开发者工具 运行环境:微信客户端 配套资源:完整小程序源码 需要:小程序 AppID(测试号也可以运行)
项目主要功能
4.1 开发者功能
4.1.1 游戏逻辑二次修改
修改 utils 和 index.js,可以调整 AI 随机概率、胜负规则。
4.1.2 界面素材替换
替换 images 目录手势图片,修改 wxss 调整页面布局样式。
4.1.3 功能拓展
可新增游戏音效、出拳动画、分享、轮次限制等扩展功能。
4.1.4 编译预览发布
导入微信开发者工具,填写 AppID,真机调试后上传提交小程序审核。
4.2 普通玩家用户功能
4.2.1AI 猜拳对战
玩家点击石头 / 剪刀 / 布按钮选择手势,电脑 AI 随机生成手势。
4.2.2 自动胜负判定
按照石头赢剪刀、剪刀赢布、布赢石头规则自动判定本局结果:玩家胜利 / AI 胜利 / 平局。
4.2.3 实时计分统计
实时累计记录玩家胜利局数、电脑胜利局数、平局局数,展示计分面板。
4.2.4 本地分数持久化
关闭小程序重新进入,历史对战分数不会丢失。
4.2.5 游戏重置
一键清空全部计分,重新开始新一轮游戏。
4.3 通用功能模块
4.3.1 纯前端离线运行
不需要服务器,没有后端接口,断网也可以玩猜拳游戏。
4.3.2 本地持久缓存
Storage 保存对战统计,重启小程序数据保留。
4.3.3 轻量化
项目体积很小,代码简洁,加载速度快。
4.3.4 简单易二次开发
业务逻辑集中,适合小程序新手学习事件、条件判断、本地存储。
项目安装和部署
5.1 环境准备
安装微信开发者工具,准备小程序 AppID(可以使用测试号)。
5.2 源码导入
克隆或者下载 gitee 源码到本地;
微信开发者工具导入项目文件夹;
project.config.json 中填入自己小程序 AppID。
5.3 本地预览
模拟器直接运行,也可以扫码真机预览游戏效果。
5.4 小程序发布
测试全部游戏功能无误,上传代码,在微信公众平台提交审核发布。

