变脸游戏5.1

SAP PCC成本收集器实战:从配置到结算的完整流程解析 本文详细解析了SAP PCC成本收集器从配置到结算的完整流程,特别适用于重复制造行业。通过实战案例和配置要点,帮助用户掌握物料分类账管理、成本中心费用归集及差异分析等核心功能,提升企业生产成本控制效率。 阅读详情

、案例需求

本案例是《微信小程序开发》课程案例 5.1 变脸游戏:

  1. 基础功能:页面展示脸谱图片,点击图片随机切换脸谱;摇晃手机触发加速度传感器,弹出提示并随机变脸。
  2. 扩展功能:动态显示累计变脸总次数,每变脸一次,数字 + 1。
  3. 用到核心 API:wx.onAccelerometerChange() 加速度监听、wx.showToast()消息提示。

作业要求:基础变脸 + 累计变脸次数统计,代码打包提交 + 发布技术博客。

二、实现思路

  1. 准备多张脸谱图片资源,放在项目images文件夹;
  2. data 中定义:脸谱数组、当前脸谱下标、变脸计数器count;
  3. 点击脸谱触发changeFace():随机更换下标,计数器 + 1;
  4. 页面加载时开启加速度监听,摇晃幅度达标时,同样调用变脸函数;
  5. 页面销毁时关闭加速度监听,节省性能;
  6. wxml 绑定数据,实时渲染变脸次数。

三、完整代码

1. index.wxml

<view class="container">
  <view class="title">变脸游戏</view>
  <!-- 脸谱图片,点击变脸 -->
  <image class="face" src="{{faces[index]}}" bindtap="changeFace"></image>
  <!-- 扩展:累计变脸次数 -->
  <view class="tip">累计变脸次数:{{count}}</view>
  <view class="desc">点击脸谱或者摇晃手机来变脸</view>
</view>

2. index.wxss

.container {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 40rpx;
}
.face {
  width: 400rpx;
  height: 400rpx;
  border-radius: 16rpx;
}
.tip {
  font-size: 32rpx;
  margin: 30rpx 0;
  color: #e64340;
}
.desc {
  font-size: 28rpx;
  color: #666;
}

3. index.js

Page({
  data: {
    // 脸谱图片路径,自行替换成你的图片
    faces: [
      "/images/face1.png",
      "/images/face2.png",
      "/images/face3.png",
      "/images/face4.png",
      "/images/face5.png"
    ],
    index: 0,
    count: 0 // 扩展:变脸计数
  },

  onLoad() {
    // 监听加速度(摇一摇)
    wx.onAccelerometerChange((res) => {
      // 判断摇晃阈值,x/y/z任意一个变化大于0.8判定摇晃
      if (Math.abs(res.x) > 0.8 || Math.abs(res.y) > 0.8) {
        this.changeFace();
        wx.showToast({
          title: "摇一摇变脸!",
          icon: "none"
        })
      }
    })
  },

  // 变脸函数:随机换脸谱 + 次数+1
  changeFace() {
    const len = this.data.faces.length;
    let randomIdx = Math.floor(Math.random() * len);
    // 防止和当前脸谱一样
    while(randomIdx === this.data.index){
      randomIdx = Math.floor(Math.random() * len);
    }
    this.setData({
      index: randomIdx,
      count: this.data.count + 1
    })
  },

  onUnload() {
    // 页面卸载,关闭加速度监听,防止后台持续监听
    wx.stopAccelerometer()
  }
})

4. index.json

{
  "navigationBarTitleText": "变脸游戏"
}

四、项目目录结构

pages/
└── index/
    ├─ index.js
    ├─ index.wxml
    ├─ index.wxss
    └─ index.json
images/
    ├─ face1.png
    ├─ face2.png
    ├─ face3.png
    ├─ face4.png
    └─ face5.png
app.js
app.json
app.wxss

注意:图片需要自己准备 5 张脸谱放到 images 文件夹,文件名对应代码里的路径。

五、功能测试

  1. 点击脸谱图片:随机切换脸谱,下方次数数字自动 + 1;
  2. 手机模拟器 / 真机摇晃:触发 toast 提示,同时变脸、次数累加;
  3. 不会出现变脸前后图片一模一样的情况;
  4. 离开页面自动停止加速度监听。

六、扩展说明(作业加分点)

原题基础要求只有点击 + 摇晃变脸,我额外增加了: ✅ 累计变脸次数动态统计(本题 20 分扩展项) ✅ 去重逻辑:不会随机到和当前一样的脸谱 ✅ 页面销毁关闭传感器,优化性能 ✅ 友好文字提示

GJB 5000B二级-II实施基础 本文主要描述GJB 5000B二级II实施基础与GJB 5000A的变化情况,以及过程域各条款的实施要点 阅读详情

相关推荐

别再折腾环境了!Windows 11 + VSCode + CMake 3.31.4 + MinGW-w64 一键式配置指南(附常见报错解决)

本文提供Windows 11下VSCode、CMake 3.31.4和MinGW-w64的一键式配置指南,帮助开发者快速搭建高效C++开发环境。涵盖工具链选型、环境变量配置、项目初始化及常见报错解决方案,大幅提升开发效率。

weixin_28841265的博客 186

5.1 变脸游戏

本次实验使用微信小程序加速计 API,实现变脸小游戏。实现两种切换脸谱方式:点击图片切换、摇晃手机切换脸谱;扩展功能:统计并展示累计变脸总次数。开发环境:微信开发者工具,基础库 3.7.5。

ZeroT_Too的博客 161

Vivado ILA调试全攻略:从HDL实例化到Block Design的5个实战技巧

本文全面解析了Vivado集成逻辑分析仪(ILA)的五种核心调试方法,涵盖从HDL代码实例化到Block Design集成的实战技巧。详细对比了不同方法的优缺点与适用场景,并重点介绍了如何利用Debug Hub高效管理多时钟域复杂调试,旨在帮助FPGA开发者精准定位问题,显著提升板级调试效率。

weixin_29214199的博客 376

5.1变脸游戏

监听加速度数据。回调参数分别代表手机 x/y/z 三个轴加速度。当用力摇晃手机,轴的绝对值会变大,我们判断大于 0.5 就视为摇晃动作。加速计传感器功能,微信模拟器无法模拟,需要手机真机调试。

2401_88527522的博客 192

S7-1200与KINCO伺服通信实战:CM CANopen模块配置避坑指南(附完整PDO映射表)

本文详细解析了西门子S7-1200 PLC通过CM CANopen模块与KINCO伺服驱动器的通信配置全流程,重点解决PDO映射混乱、心跳报文配置错误等常见问题。提供硬件组态、参数设置、PDO映射模板及故障排查方案,助力工业自动化系统实现稳定高效的多轴运动控制。

2y3u4i5o6p的博客 1101

102、栅极驱动芯片选型与设计

文章摘要 本文分享了栅极驱动芯片选型与设计的实战经验。通过一次因驱动芯片选型不当导致的炸管事故,作者总结了栅极驱动芯片选型的五个关键参数:峰值驱动电流、驱动电压范围、传播延迟匹配、欠压锁定和隔离等级。文章详细分析了自举电路设计中的常见陷阱,以及栅极电阻对开关特性的影响,并强调了PCB布局布线的重要性。最后,作者提供了七条实用建议,包括避免通用型驱动芯片、关注CMTI参数、使用插件电阻等。核心观点是:栅极驱动设计需要综合考虑参数匹配、电路布局和实际调试,示波器实测波形是验证设计的唯一标准。

2401_88858637的博客 44

案例 5.1 变脸游戏

变脸游戏虽然体量不大,但完整覆盖了“数据定义 → 状态管理 → 事件绑定 → 视图渲染 → 样式过渡”的开发闭环。掌握这个案例后,可以把它迁移到更复杂的场景,例如角色切换、主题切换、多步骤表单等。“变脸游戏”是一个典型的交互式小案例:用户点击按钮或切换选项,页面上的表情(或角色形象)随之变化。把需求拆成“数据”和“视图”两部分,是后续实现的关键:数据决定当前是哪种表情,视图负责把这种表情渲染出来。核心逻辑围绕“当前索引”展开:点击按钮时索引加一,越界后回到 0,然后统一调用渲染函数。

Xuruoluosifen的博客 84

实现电脑同时上内网和外网(或通过外网访问到该电脑通过该电脑访问内网)

一、需求描述 目前使用的公司网络只能够上内网,但是又有上外网查资料的需求: ①想要实现电脑既能上内网的同时也可以上外网; ②想要使用其他外网电脑使用外网连接到该电脑,通过该电脑访问内部的网络内容。 二、准备内容 电脑必须具备两个网卡,即:可以同时连接内网和外网(比如我的笔记本就可以:使用网线连接笔记本网口与内网通讯,使用WIFI连接手机热点访问外部网络); 注意:如果只有一个网口,可以另外购买USB的无线网卡来实现上网卡。 三、实现电脑同时上内网和外网的操作步骤 3.1、网络拓扑图 ..

提供C#相关开发 、云计算、运维测试、网络安全相关技术分享与服务,有意向可联系。 2万+

案例5.1_变脸游戏

本案例演示加速度计 API的使用方法。点击脸谱,画面随机切换成另一张脸谱;摇晃手机,显示一个消息框(Toast),同时画面也随机切换成另一张脸谱;扩展功能:页面底部实时显示"累计变脸总次数",每变一次脸数字加 1。image组件通过绑定图片数组;用生成随机下标,实现随机切换;监听加速度数据,实现"摇一摇";显示消息提示框;用data中的count记录变脸次数,setData动态更新页面。

2602_96911805的博客 43

3、数据导入与清洗:Excel、SQL、SPSS、Stata和SAS数据处理

本文详细介绍了如何从Excel文件、SQL数据库以及SPSS、Stata和SAS等统计软件中导入和清洗数据。针对不同数据来源的特点,提供了具体的处理方法,包括跳过无用行、重命名列、处理缺失值、转换数据类型、保留元数据等关键步骤。同时,通过实际应用案例展示了如何整合多源数据,并总结了数据导入和清洗的最佳实践,帮助读者高效完成数据预处理工作,为后续的数据分析打下坚实基础。

134

SpringBoot项目搭建

SpringBoot项目搭建

私信可回答各种问题~ 1024

5.1变脸游戏开发实践

本项目为微信小程序变脸游戏,结合川剧文化设计,通过点击或摇晃手机实现脸谱切换,并实时统计变脸次数。基于加速计传感器API实现摇一摇功能,利用setData完成数据绑定与视图更新,掌握页面路由、事件处理、随机逻辑及传感器监听的开启与释放。开发中解决路径错误、模拟器不支持传感器、重复变脸等问题,最终实现流畅交互。项目兼顾技术学习与传统文化传播,具备良好扩展性。

2601_96878919的博客 117

STM32G431的 FDCAN使用5M加速时,出现奇葩问题,如何解决?

🏆 本文收录于《全栈Bug调优(实战版)》专栏,致力于分享我在项目实战过程中遇到的各类Bug及其原因,并提供切实有效的解决方案。无论你是初学者还是经验丰富的开发者,本文将为你指引出一条更高效的Bug修复之路,助你早日登顶,迈向财富自由的梦想🚀!同时,欢迎大家关注、收藏、订阅本专栏,更多精彩内容正在持续更新中。让我们一起进步,Up!Up!Up!    备注: 部分问题/难题源自互联网,经过精心筛选和整理,结合数位十多年大厂实战经验资深大佬经验总结所得,数条可行方案供所需之人参考。

**My Coding Family** 1638

微信小程序案例5.1 变脸游戏

本案例基于微信小程序开发趣味变脸游戏,结合加速度传感器wx.onAccelerometerChange实现摇一摇变脸,同时支持点击图片手动变脸。通过setData动态更新页面,利用Math.random()随机切换脸谱,并新增计数器实时统计累计变脸次数。代码复用changeFace函数,确保两种交互方式均有效计数,界面美观,功能完整,拓展性强。

2601_96878943的博客 159

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

微信小程序《案例 5.1 变脸游戏》

wxml 渲染变量实时展示次数。控制提示停留毫秒数。

Lin_nggg的博客 203

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

微信小程序案例 5.1 变脸游戏实践

本案例是变脸小游戏,利用图片切换实现变脸效果,在基础功能上扩展了累计变脸次数统计。点击按钮切换图片索引,通过 setData 更新视图,同时对计数变量自增,动态展示变脸次数。该案例练习小程序数据绑定、事件绑定以及 setData 更新页面的基础用法,适合理解小程序单向数据渲染机制。

2601_97005795的博客 173

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

# 微信小程序开发实战:案例 5.1 变脸游戏(含“累计变脸次数“功能扩展)

小程序运行后显示一张京剧脸谱,点击脸谱会随机切换成另一张脸谱;:在基本功能的基础上,动态显示累计变脸次数——每变脸一次(无论是点击还是摇晃触发),页面上显示的次数就自动加 1。// 产生[0,n)之间的随机数,其中 Math.random() 产生[0,1)之间的随机数。:摇晃手机,弹出"摇一摇成功"提示框,同时脸谱随机切换,累计次数也自动加 1。时,显示一个消息框,同时画面也随机切换成另一张脸谱,从而实现"变脸"效果。// 当前显示的脸谱在 faces 数组中的下标,初始为 0(第一张脸谱)

Lu985520_的博客 224

微信小程序案例 5.1:摇一摇变脸游戏完整实现

和前几个案例一样,在下建 4 个文件(navigation-bar.js/.json/.wxml/.wxss),然后在<image>组件用{{数组[下标]}}动态切换图片生成随机下标监听加速度计实现摇一摇弹出提示用data.countsetData实现累计次数统计(作业考点)

Ct010的博客 162

微信小程序实战:案例 5.1 变脸游戏(含累计变脸次数扩展)

通过本次《变脸游戏》案例,我深入学习了微信小程序中加速计接口的使用方法。同时,通过扩展累计次数功能,复习了setData更新视图层数据的原理,以及如何通过点击事件和硬件传感事件共同驱动页面的数据刷新。

2401_88277689的博客 217

微信小程序实战:变脸游戏(案例 5.1)学习笔记

本案例通过一个「变脸游戏」小程序,演示微信小程序 API 函数的功能与使用方法。程序运行后,页面上显示一张脸谱图片;点击脸谱时,画面随机切换为另一张脸谱;摇晃手机时,弹出消息框,同时画面也随机切换为另一张脸谱,从而实现「变脸」效果。学习目标:掌握 image 组件的数据绑定、点击事件绑定,以及加速计 API 的监听与回调处理。

QiXna1103的博客 148

微信小程序案例5.1:变脸游戏——加速度计监听与摇一摇换脸

本案例演示微信小程序加速度计 API的使用方法,实现"摇一摇换脸"的小游戏:点击图片或摇动手机,页面上的表情图片随机切换为另一张。功能扩展:在页面顶部实时显示"累计变脸次数",每次换脸计数加 1。页面显示"wx.onAccelerometerChange示例"标题和一张卡通表情图片;点击图片,图片立即随机换成另一张表情;把手机摇一摇,图片同样随机切换,并弹出"摇一摇成功"的 Toast 提示;标题下方显示"累计变脸次数:N",每次换脸 N 加 1。本案例的两个知识点:一是。

2402_87499293的博客 195

变脸游戏1

变脸游戏是一个趣味互动小程序:页面中央显示一张京剧脸谱,点击脸谱或摇动手机即可随机切换到另一张脸谱,同时通过 Toast 提示"摇一摇成功"。页面实时显示累计变脸次数,每点击一次或摇动一次,次数自动 +1,让游戏更有"养成感"。Page页面生命周期与datasetData数据绑定随机数生成与数组索引驱动的视图切换加速度传感器监听实现"摇一摇"轻提示的使用自定义导航栏组件与滚动容器结合setData实现动态计数功能(作业拓展)

2601_97270417的博客 183

变脸游戏实验报告

本案例基于微信小程序实现变脸小游戏,通过wx.onAccelerometerChange监听手机摇晃,结合点击图片随机切换脸谱,并扩展累计变脸次数统计功能。页面使用防抖机制避免频繁触发,真机测试方可体验摇晃效果。项目涵盖设备传感器、数据绑定、生命周期管理与事件处理,强化了小程序开发中交互逻辑与资源优化的实践能力。

2601_96878920的博客 114

变脸游戏-技术博客

小程序image组件的使用与数据绑定;触摸事件bind:tap的绑定与处理函数;设备 API wx.onAccelerometerChange的调用方式与三轴加速度判摇逻辑;消息提示框的使用;通过setData实现动态累计计数的扩展功能。变脸游戏虽然小,但涵盖了"界面绑定 + 用户交互 + 硬件传感器 + 状态更新"四个小程序开发的核心环节,是入门设备 API 的一个很好的练手案例。

2401_87970507的博客 99

变脸游戏实践

前面我们做了那么多项目,列表渲染、条件渲染、Picker、WXML 文件引用、slider、scroll-view、Canvas 2D、map 地图……这次来点“体感”的——加速度计(Accelerometer)。本文通过一个“变脸游戏”来演示:利用手机的加速度传感器,当用户“摇一摇”手机时,随机切换一张京剧脸谱图片,并记录变脸次数。同时,点击图片也可以手动变脸,兼顾没有传感器的场景。:监听三轴加速度,回调参数x/y/z单位是 g,范围约[-1, 1]。摇动判断。

2601_96878931的博客 239

微信小程序实战|变脸游戏(手机加速计API,摇一摇变脸+统计变脸次数)

本案例学习小程序。摇一摇成功重要提醒:加速计属于硬件传感器,。项目环境:不使用云服务、不使用模板原生小程序。

2601_97252141的博客 157
上一篇: 扩展三个 marker 标记点,微信小程序地图开发
下一篇: Canvas 实现自由绘图|附扩展切换画笔颜色完整实战
zcmdcsdn_
博客等级 码龄72天 0粉丝 29原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值