首页/新闻资讯/正文详情

5.1 变脸游戏

发布时间:2026/11/3 19:22:21 来源:云帆数科 栏目:资讯中心
5.1 变脸游戏
实验简介本次实验使用微信小程序加速计 APIwx.onAccelerometerChange实现变脸小游戏。实现两种切换脸谱方式点击图片切换、摇晃手机切换脸谱扩展功能统计并展示累计变脸总次数。 开发环境微信开发者工具基础库 3.7.5✅实现功能点击脸谱图片随机切换脸谱变脸次数 1真机摇晃手机触发加速计监听自动切换脸谱弹出提示变脸次数 1页面实时展示累计变脸总次数⚠️注意模拟器无法模拟摇晃摇一摇功能需要手机真机预览测试核心 API 说明表格API作用wx.onAccelerometerChange(cb)监听加速度数据手机晃动时持续回调拿到 x/y/z 三轴加速度wx.offAccelerometerChange()取消加速计监听页面销毁 / 隐藏时调用节约性能wx.showToast()弹出轻提示摇晃成功时弹窗提醒用户Math.random()生成随机数随机选取脸谱下标原理手机摇晃时三轴加速度数值会明显变化本实验判断任意轴绝对值大于 0.5 即判定为摇晃动作。项目文件结构MINIPROGRAM-3 ├── images │ ├ 1.png │ ├ 2.png │ ... │ └ 14.png ├── pages │ └── index │ ├ index.js │ ├ index.wxml │ ├ index.wxss │ └ index.json ├── app.json └── app.wxss完整代码1. app.json{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationBarTitleText: 变脸游戏, navigationBarBackgroundColor: #ffffff, navigationStyle: default }, style: v2, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }2. pages/index/index.wxmlview classbox view classtitlewx.onAccelerometerChange示例/view image src{{faces[index]}} modewidthFix bindtapchangeFace/image view classcount-text累计变脸总次数{{totalCount}}/view /view3. pages/index/index.wxsspage { height: 100vh; background-color: #ffffff; } .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid purple; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: rebeccapurple; } image { margin: 20rpx; width:100%; } .count-text { font-size: 40rpx; color: blue; text-align: center; margin-top:30rpx; }4. pages/index/index.jsPage({ data: { index: 0, faces: [ /images/1.png, /images/2.png, /images/3.png, /images/4.png, /images/5.png, /images/6.png, /images/7.png, /images/8.png, /images/9.png, /images/10.png, /images/11.png, /images/12.png, /images/13.png, /images/14.png ], totalCount:0 }, createRandomIndex(n) { return Math.floor(Math.random() * n) }, changeFace() { let newIdx this.createRandomIndex(this.data.faces.length) this.setData({ index: newIdx, totalCount: this.data.totalCount 1 }) }, onShow() { wx.onAccelerometerChange((res) { if (res.x 0.5 || res.y 0.5 || res.z 0.5) { this.changeFace() wx.showToast({ title: 摇一摇成功, icon: success, duration: 1000 }) } }) }, onHide() { wx.offAccelerometerChange() } })实验踩坑记录坑 1图片加载失败控制台报 500 资源加载错误原因图片路径写错、文件夹名称不匹配代码写/images/1.png但是没有images文件夹或者图片放错目录 ✅解决项目根目录新建images文件夹全部脸谱图片放入路径严格一致修改后清缓存重新编译。坑 2模拟器摇晃手机没有反应原因模拟器不支持加速度传感器wx.onAccelerometerChange在模拟器无法触发 ✅解决使用真机预览扫码在手机上摇晃测试摇一摇变脸功能。坑 3页面离开之后摇晃还会触发变脸原因只开启监听没有取消加速计事件监听监听持续后台运行 ✅解决在onHide生命周期调用wx.offAccelerometerChange()关闭监听。坑 4顶部出现黑色状态栏、标题栏消失原因navigationStyle设置为custom自定义导航 ✅解决app.json中设置navigationStyle:default启用小程序原生导航栏。✨实验收获掌握小程序设备传感器 API加速计wx.onAccelerometerChange可以感知手机姿态、摇晃动作。理解页面生命周期onShow、onHide页面显示时开启监听页面隐藏时释放监听避免资源浪费。学会随机数实现随机切换素材使用data数据绑定实现页面动态更新。图片资源路径是小程序高频报错点绝对路径/images/xxx.png从项目根目录开始查找资源。区分模拟器和真机能力差异传感器类 API 大多需要真机调试。

相关推荐

V. V. Prasolov. Intuitive Topology
V. V. Prasolov. Intuitive Topology

V. V. Prasolov 所著的《Intuitive Topology》是拓扑学领域口碑极佳的低门槛入门经典,属于美国数学会《Mathematical World》系列第4卷,全书仅93页,完全以直观可视化的方式讲解初等拓扑核心内容,零基础友好。 📖 基础… · 2026/11/3 19:22:21

ESP32-S3 呼微信接通后没声音之解决办法
ESP32-S3 呼微信接通后没声音之解决办法

ESP32-S3 呼微信接通后没声音之解决办法 上一篇:移芯 EC718PM 上说话一卡一卡之解决办法 本文代码来自开源仓库 github.com/tangeai/xiaotai-esp32(主工程 lckfb-szpi-esp32s3-tirtc/)。代码有节选,常量和结构没改。 把微信语音通… · 2026/11/3 19:22:21

中亚跨境物流避坑指南:渠道选型、密度计费与清关实操全拆解
中亚跨境物流避坑指南:渠道选型、密度计费与清关实操全拆解

中亚跨境物流避坑指南:渠道选型、密度计费与清关实操全拆解 做跨境供应链这几年,接触过上百位发中亚、俄线的卖家和采购商,发现 90% 的新手第一次发货都会踩同一个坑:只看单价,忽略计费规则、清关能力和渠道稳定性&… · 2026/11/3 19:22:21

智算中心网络架构演进与Border Leaf设计解析
智算中心网络架构演进与Border Leaf设计解析

1. 智算中心网络架构的演进挑战智算中心作为新一代算力基础设施,其网络架构设计正面临前所未有的流量模型变革。传统数据中心以"南北向"流量为主(客户端到服务器),而智算中心中服务器间"东西向"流量占比已超过… · 2026/11/3 19:59:36

Gemini与Consul:AI与分布式服务的开发效率革命
Gemini与Consul:AI与分布式服务的开发效率革命

1. Gemini与Consul技术解析:现代开发中的黄金组合在当今快速迭代的软件开发领域,两个名字频繁出现在技术讨论中:Gemini作为谷歌推出的新一代AI开发工具,Consul则是HashiCorp旗下成熟的分布式服务网格解决方案。这对看似不相关的技… · 2026/11/3 19:59:36

电动汽车充电负荷预测系统:交通与电网数据融合技术
电动汽车充电负荷预测系统:交通与电网数据融合技术

1. 项目背景与核心价值这个项目瞄准了电动汽车普及过程中的关键痛点——充电需求与电网负荷的时空匹配问题。随着新能源车辆保有量激增,无序充电导致的局部电网过载、充电桩利用率失衡现象日益突出。我们团队开发的这套预测系统,通过融合实时交通流数据与… · 2026/11/3 19:59:36

Python四大核心数据结构实战与性能优化指南
Python四大核心数据结构实战与性能优化指南

1. Python核心数据结构实战指南作为Python开发者,我们每天都要和列表、元组、字典、集合这四大数据结构打交道。记得我刚学Python时,总是分不清什么时候该用列表,什么时候该用字典。直到做了几个实际项目后,才真正理解它们各自的特… · 2026/11/3 19:59:36

Hugo静态博客实现AJAX搜索功能的技术方案
Hugo静态博客实现AJAX搜索功能的技术方案

1. 项目概述:Hugo静态博客的AJAX搜索功能实现在Ubuntu系统下用Hugo搭建的静态博客,默认不具备内容搜索功能——这是很多从WordPress迁移过来的用户最不习惯的点。传统动态博客通过后端数据库查询实现搜索,而静态站点需要另辟蹊径。AJAX技术在… · 2026/11/3 19:59:36

机器学习模型部署:从开发到生产的Web API实践
机器学习模型部署:从开发到生产的Web API实践

1. 项目概述:为什么需要将机器学习模型转化为Web API?在真实业务场景中,机器学习模型的价值在于解决实际问题。想象一个电商推荐系统:当用户浏览商品页面时,后端需要实时调用推荐模型生成个性化推荐。这种场景下&#… · 2026/11/3 19:58:36

双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试
双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/2 13:10:28

STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 6:04:24

DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 5:52:46

STM32F411RE与MAX14431实现SPI隔离:工业现场抗共模干扰实战
STM32F411RE与MAX14431实现SPI隔离:工业现场抗共模干扰实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 1:01:59

ESP32+大模型AI硬件开发:从Demo到产品的8个工程问题
ESP32+大模型AI硬件开发:从Demo到产品的8个工程问题

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 1:01:59

基于MAX14431BAEE+与PIC18F85J10的SPI隔离方案设计与实践
基于MAX14431BAEE+与PIC18F85J10的SPI隔离方案设计与实践

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 1:01:59

双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试
双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/2 13:10:28

STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 6:04:24

DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 5:52:46

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码