00002-微信小游戏--触摸事件

响应用户与屏幕的交互是游戏中必不可少的部分，小游戏参照 DOM 中的 TouchEvent 提供了以下监听触摸事件的 API：

wx.onTouchStart()wx.onTouchMove()wx.onTouchEnd()wx.onTouchCancel()

实例代码：
onTouchStart、onTouchEnd、onTouchCancel执行一次
onTouchMove每帧执行一次

let ctx = canvas.getContext('2d')
export default class Main{constructor(){this.TouchEvent();}TouchEvent(){wx.onTouchStart(function (e) {console.log(e.touches);console.log("移动开始"+e.touches[0].clientX +" "+e.touches[0].clientY)})wx.onTouchMove(function (e) {let x = e.touches[0].clientX;let y = e.touches[0].clientY;console.log("移动中"+e.touches[0].clientX +" "+e.touches[0].clientY)})wx.onTouchEnd(function (e) {console.log(e.touches)//移动结束的时候触摸点列表长度为0})wx.onTouchCancel(function (e) {//移动取消的时候触摸点列表长度为0console.log("取消移动")console.log(e.touches)})}
}

我们结合上一篇博客可以实现让一张图片跟随这鼠标或者手指的移动而移动

let ctx = canvas.getContext('2d')let image = wx.createImage();
image.onload=function(){ctx.drawImage(image,0,0,53,33)
}
image.src = "images/Unity.jpg"export default class Main{constructor(){this.TouchEvent();}TouchEvent(){wx.onTouchStart(function (e) {console.log(e.touches);console.log("移动开始"+e.touches[0].clientX +" "+e.touches[0].clientY)})wx.onTouchMove(function (e) {let x = e.touches[0].clientX;let y = e.touches[0].clientY;//每次清除一下画布ctx.clearRect(0, 0, canvas.width, canvas.height)//重新绘制一张图片并指定位置ctx.drawImage(image,x,y,53,33)console.log("移动中"+e.touches[0].clientX +" "+e.touches[0].clientY)})wx.onTouchEnd(function (e) {console.log(e.touches)//移动结束的时候触摸点列表长度为0})wx.onTouchCancel(function (e) {//移动取消的时候触摸点列表长度为0console.log("取消移动")console.log(e.touches)})}
}

效果如下：

00002-微信小游戏--触摸事件相关推荐

cocos微信小游戏开发-http请求-使用微信云函数-toast-loading-动态加载图片-添加触摸事件-微信分享-label点击事件-背景音乐音效-程序活动状态判断-性能优化
cocos开发微信小游戏相关-<益智推箱> 扫码查看功能,有需要可直接提问 Cocos Creator 3.4 用户手册 cocos creator基本操作微信开发文档|云函数 1. h ...
微信小游戏 demo 飞机大战代码分析（四）(enemy.js， bullet.js, index.js)
微信小游戏 demo 飞机大战代码分析(四)(enemy.js, bullet.js, index.js) 微信小游戏 demo 飞机大战代码分析(一)(main.js) 微信小游戏 demo 飞 ...
用微信小游戏实现龙舟大战-打粽子
用微信小游戏实现龙舟大战-打粽子端午节来啦!各位c粉有没有吃粽子啊! 前言端午节来啦!今天沉默带大家来做个关于端午节的小游戏,我的设计思路是用龙舟打粽子,类似于飞机大战,只不过我们的场景是在河中. ...
微信小游戏SDK，全方位解读
01 前言先上个活动,晓衡下定决心,开始学习英语了,从零开始的那种. 关注晓衡视频号,并在评论区留言,选出一名走心老铁,赠送 Cocos 定制体恤1件! 本周三(4月12日)中午12点,公布获奖名单 ...
微信小游戏——贪吃蛇
博客简介本篇博客介绍的是微信小游戏贪吃蛇的案例,详细的开发过程,并且提供代码压缩包下载. 案例简介布局构建对象响应事件蛇头对象的移动蛇身的移动食物刷新绘制得分碰撞检验开始界面和结束 ...
【微信小游戏】排行榜概念篇
一.前提微信小游戏主打社交玩法,为了丰富社交玩法我们肯定会用到关系链数据来做好友排行帮,群排行榜等功能.本篇主要介绍概念同时划重点,下一篇Cocos Creator中实战. 二.概念 1.1)关系链 ...
菜鸟| 微信小游戏好友排行榜教程
写在前面:随着越来越多的新人开始接触白鹭引擎,创作属于自己的游戏.考虑到初学者会遇到一些实际操作问题,我们近期整理推出"菜鸟"系列技术文档,以便更好的让这些开发者们快速上手,Egr ...
CocosCreator3D微信小游戏入门RunningBall（一）: 物理
CocosCreator3D微信小游戏入门:RunningBall(一) 在CocosCreator3D发布之前,虽然CocosCreator2.x版本已经有了3D的功能,但是这些3D功能并不能完全支 ...
基于Laya游戏引擎实现微信小游戏排行榜
我们都知道,微信小游戏和小程序目前风头十足,很多公司都逐渐增加了相关业务线来迅速推广自己的产品和抢占用户群.说到微信小游戏,就不得不提到排行榜这个功能,就目前游戏行业,似乎都离不开排行榜这个重要功能, ...
微信小游戏排行榜页滚动查看排行榜（canvas指定区域溢出滚动，懒渲染）
在微信小游戏中,好友排名数据是能在关系数据域操作,整个关系数据域只会返回一个最终的sharedCanvas,并且这个canvas不能调用toDataURL()方法,所以要展示好友排行榜的话只能在关系数 ...

00002-微信小游戏--触摸事件

00002-微信小游戏--触摸事件相关推荐

最新文章

热门文章