专栏首页极乐技术社区小程序重力感应-加速度计的使用

小程序重力感应-加速度计的使用

小程序的加速度计是个很有意思的东西,可以用来做一些手机动作或3D场景。比如手机QQ上的附近的红包活动就是采用加速度计做的。这里写个demo初步做一下加速度计的使用方法。

主要步骤: 1、在页面onLoad的时候检测加速度计是否可用。 2、监听加速度计的返回参数(x,y,z)三轴。 3、根据不同的场景去处理数据。

index.wxml

<canvas canvas-id='canvas1' style='width: {{ww}}px;height: {{hh}}px;'>

</canvas>

index.js

const app = getApp()

const ctx = wx.createCanvasContext('canvas1')

const ww = app.globalData.ww

const hh = app.globalData.hh

Page({

data: {

ww: ww,

hh: hh

},

onLoad() {

var that = this;

wx.startAccelerometer({

success(res) {

that.start()

}

});

this.hf_w = ww / 2;

this.hf_h = hh / 2;

this.x = 0;

this.y = 0;

this.ax = 0;

this.ay = 0;

this.vx = 0;

this.vy = 0;

this.draw();

},

start() {

var vt = 5, that = this;

wx.onAccelerometerChange(function (res) {

that.ax = res.x * vt;

that.ay = res.y * vt;

});

setInterval(function () {

var lo = ww / hh > 1;

if (lo) {

that.vx = that.vx + that.ay;

that.vy = that.vy + that.ax;

} else {

that.vy = that.vy - that.ay;

that.vx = that.vx + that.ax;

}

that.vx = that.vx * 0.98;

that.vy = that.vy * 0.98;

that.y = parseInt(that.y + that.vy / 50);

that.x = parseInt(that.x + that.vx / 50);

that.boundingBoxCheck();

that.draw();

}, 100 / 6)

},

end() {

wx.stopAccelerometer()

},

draw() {

console.log(this.x);

ctx.clearRect(0, 0, ww, hh);

ctx.fillRect(0, 0, ww, hh)

ctx.fill()

ctx.beginPath();

ctx.arc(this.x, this.y, 20, 0, Math.PI * 2);

ctx.setFillStyle('#FFFFFF');

ctx.fill()

ctx.draw();

},

boundingBoxCheck() {

if (this.x < 0) { this.x = 0; this.vx = -this.vx; }

if (this.y < 0) { this.y = 0; this.vy = -this.vy; }

if (this.x > ww - 20) { this.x = ww - 20; this.vx = -this.vx; }

if (this.y > hh - 20) { this.y = hh - 20; this.vy = -this.vy; }

}

})

app.js

//app.js

App({

onLaunch: function () {

var that = this;

wx.getSystemInfo({

success(res) {

that.globalData.ww = res.windowWidth;

that.globalData.hh = res.windowHeight;

}

})

},

globalData: {

userInfo: null

}

})

小程序社区版主 x837195936(熊晨沣):在canvas中绘制了一个小球,根据手机的倾斜小球在屏幕上滚动,碰触到边沿则回弹。具体效果有兴趣的下载demo自己玩玩吧(点击原文即可获取下载地址),过段时间准备拓展一下改成一个小游戏。

本文分享自微信公众号 - 极乐技术社区(wxapp-union),作者:熊晨沣

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-04-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序开发日记:重要的var that=this

    什么是微信小程序 关于什么是微信小程序在网络上已经有很多文章介绍,这里就不再阐述了。简单来说微信小程序应该是嵌套在微信里面的应用,这个应用体现“用完即走”的理念...

    极乐君
  • 微信小游戏初体验

    前言 上周【跳一跳】小游戏刷遍了朋友圈,也代表了微信小程序拥有了搭载游戏的功能(早该往这方面发展了,这才是应该有的形态嘛)。作为一个前端er,我的大刀早已经饥渴...

    极乐君
  • 小游戏入门

    极乐君
  • react入门(三):state、ref & dom简解

    作用:组件内部的状态重新更新时,可以控制组件内部重新渲染(不需要重新调取组件也可以重新渲染)

    柴小智
  • Mybatis深入源码分析之SqlSessionFactoryBuilder源码分析

    通过上述代码可知:使用了门面模式:定义了Resource类,把复杂过程封装起来,方便用户使用,返回reader为InputStreamReader,指的是读取的...

    须臾之余
  • this类型_TypeScript笔记11

    返回类型是this,表示所属类或接口的子类型(称之为有界多态性(F-bounded polymorphism)),例如:

    ayqy贾杰
  • PHP添加文字水印或图片水印的水印类完整源代码与使用示例

    PHP实现的给图片添加水印功能,可添加文字水印或图片水印,使用文字水印时需要提供字体文件,使用图片水印时需要提供水印图片,水印图片不能比要添加水印的图片大,请使...

    砸漏
  • 一个全能的挖孔 Shader

    TouchBlocker 是用来限制可点击的节点的独立组件,完整文件在 eazax-ccc/component 目录下。

    白玉无冰
  • 腾讯原生小程序框架 OMIX 2.0 发布

    ? 好的设计只有一种,我们认为 OMIX 2.0 的设计刚刚好。 OMIX 2.0 是 WeStore 的进化版,WeStore 使用的是数据变更前后的 d...

    腾讯开源
  • SpringFramework之@Configuration/@Import注解如何解析的

        Spring版本是5.0.9.release,Springboot版本是2.0.3.release

    克虏伯

扫码关注云+社区

领取腾讯云代金券