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

微信小程序练习:变脸游戏

发布时间:2026/11/6 7:46:32 来源:云帆数科 栏目:资讯中心
微信小程序练习:变脸游戏
一、案例描述设计一个小程序演示wx.onAccelerometerChange的功能和使用方法。小程序运行后页面上出现一张脸谱画面点击脸谱时画面随机切换摇晃手机时显示消息框同时画面也随机切换实现变脸效果。二、实现思路用image src{{faces[index]}} bind:tapchangeFace /展示当前脸谱点击触发changeFace让 index 变为随机下标。data.faces存储多张脸谱图片路径课件用 14 张createRandomIndex(n)工具函数生成[0, n)的随机整数。在onShow中注册wx.onAccelerometerChange监听器当加速度x/y/z任一方向绝对值大于 0.5 时触发变脸并wx.showToast提示。扩展新增count字段记录累计变脸次数changeFace每次自增页面view显示{{count}}实时更新。三、核心代码index.wxmlviewclasstitlewx.onAccelerometerChange示例/viewimagesrc{{faces[index]}}modewidthFixbind:tapchangeFace/!-- 功能扩展动态显示累计变脸次数 --viewclasscount-text累计变脸总次数{{count}}/viewindex.jsPage({data:{index:0,faces:[/images/01.png,/images/02.png,/images/03.png,/images/04.png,/images/05.png,/images/06.png,/images/07.png,/images/08.png,/images/09.png,/images/10.png,/images/11.png,/images/12.png,/images/13.png,/images/14.png],count:0// 功能扩展},createRandomIndex(n){returnMath.floor(Math.random()*n)},changeFace(){this.setData({index:this.createRandomIndex(this.data.faces.length),count:this.data.count1// 功能扩展次数累加})},onShow(){wx.onAccelerometerChange((res){if(res.x0.5||res.y0.5||res.z0.5){this.changeFace()wx.showToast({title:摇一摇成功,icon:success,duration:5000})}})}})四、关键知识点wx.onAccelerometerChange监听加速度数据变化回调参数res含x/y/z三个方向的加速度值单位 g。Math.random()产生[0, 1)的随机数结合Math.floor得到随机整数下标。事件绑定image的bind:tap绑定点击事件onShow中注册加速计监听。setData 响应式更新变脸时同时更新index和count视图自动刷新。五、功能扩展在课件基础上data 中新增count: 0changeFace中同时做count: this.data.count 1WXML 中新增view classcount-text累计变脸总次数{{count}}/view。运行时每次点击或摇一摇触发变脸次数同步自增并实时显示与课件中累计变脸总次数5的效果一致。六、总结本案例把点击变脸和摇一摇变脸两种交互方式串在一起展示了wx.onAccelerometerChange这个设备 API 的典型用法并通过累计变脸次数的实时显示完成了功能扩展。

相关推荐

FMCW信号处理-(4)速度处理(RD图)
FMCW信号处理-(4)速度处理(RD图)

1、查看数据clc; %清空命令行 clear; %清空工作区 close all; %关闭绘图窗口dataFile C:\Users\wfh\Desktop\毫米波雷达实测\Radar_Processing\data\000003.mat; %对文件路径赋值whos(-file,dataFile) %查看数据 data load(dataFile); %读取数据复数,双精度… · 2026/11/6 7:46:32

手把手教你C++——string(上)
手把手教你C++——string(上)

1.为什么学习string类 文章目录1.为什么学习string类1.3 C语言中的字符串2. 标准库中的string类2.1 string类的了解2.2 string类的常用接口说明2.3 auto和范围for2.3.1 auto关键字:2.3.2 范围for1.3 C语言中的字符串 C语言中,字符串是以‘\0’结尾的一些… · 2026/11/6 7:45:32

提示词修炼手册-10-从聊天到委派
提示词修炼手册-10-从聊天到委派

从聊天到委派:Agent时代的提示词思维转变《提示词修炼手册:从会问到会用》第10篇 | 系列共14篇 🔧 进阶篇:本篇面向使用Agent/自动化工具的读者,日常简单问答可跳过。摘要 使用AI Agent时,提示词思维需要从… · 2026/11/6 7:45:32

电工证有扣分的吗千万别踩坑
电工证有扣分的吗千万别踩坑

电工证有扣分的吗千万别踩坑 你是不是正愁没电工证,找不到工作?现在不少工地、工厂、项目单位都要求必须有特种作业操作证,特别是电工证, 没有证就不能上岗 ,这已经成了行业潜规则。但很多人对电工证的细节并不清楚,比如 电工证有扣分的吗… · 2026/11/6 19:15:58

延边低压电工证怎么考才能不白交培训费?考前押题是关键
延边低压电工证怎么考才能不白交培训费?考前押题是关键

延边低压电工证怎么考才能不白交培训费?考前押题是关键 怕考不过白交培训费,这几乎是每个准备考延边低压电工证的人心里最担心的事。尤其是像你这样已经在南阳卧龙区从事房建工程的电工,时间紧、任务重,一旦考试失败,培训费打水漂不说,还得重新安排时间… · 2026/11/6 19:15:58

电工证审核到哪里查询电子证书怎么查最靠谱
电工证审核到哪里查询电子证书怎么查最靠谱

电工证审核到哪里查询电子证书怎么查最靠谱 怕考不过白交培训费?电工证审核到哪里查询电子证书?别急,我这有实操经验,教你一步步查证,省心又靠谱! 一、电工证审核到哪里查询?这些渠道必须知道… · 2026/11/6 19:15:58

电工证河南去哪里考 2026河南最新政策你必须知道
电工证河南去哪里考 2026河南最新政策你必须知道

电工证河南去哪里考 2026河南最新政策你必须知道 你是不是也遇到过这种情况?找电工证河南去哪里考的时候,被各种培训机构搞得晕头转向,不知道哪个是靠谱的,哪个是骗子?2026河南最新政策出台后,很多考生又担心报名流程、费用和地点变了,怕自己… · 2026/11/6 19:15:58

职校的电工证怎么考?学历不高怕报不上名?含金量高到能改命运
职校的电工证怎么考?学历不高怕报不上名?含金量高到能改命运

职校的电工证怎么考?学历不高怕报不上名?含金量高到能改命运 你是不是也这样想:自己学历不高,考个证能行吗?是不是只有那些本科毕业的人才能拿电工证?其实不是! 职校的电工证… · 2026/11/6 19:15:58

东明电工证培训内部消息:学历不高也能报,看懂这些就对了
东明电工证培训内部消息:学历不高也能报,看懂这些就对了

东明电工证培训内部消息:学历不高也能报,看懂这些就对了 你是不是觉得学历不高,报东明电工证培训肯定不行?其实不然,很多学员都是从零基础起步,照样考下了电工证。今天我就来聊聊,关于 东明电工证培训 的 内部消息… · 2026/11/6 19:14:56

双极步进电机控制实战: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/5 10:27:59

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/5 10:28:03

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/6 10:29:23

三菱PLC数据采集到数据库的时序设计:Python+MC协议实战
三菱PLC数据采集到数据库的时序设计:Python+MC协议实战

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

ASIC主模式RTL设计:状态机与三态驱动的流片级实现
ASIC主模式RTL设计:状态机与三态驱动的流片级实现

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

STM32嵌入式C++开发:GDB调试与Renode仿真实战指南
STM32嵌入式C++开发:GDB调试与Renode仿真实战指南

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

双极步进电机控制实战: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/5 10:27:59

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/5 10:28:03

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/6 10:29:23

了解更多?预约专属演示

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

企业微信二维码