tencent cloud

腾讯云超级应用服务

动态与公告
【2025年1月2日】关于腾讯云小程序平台更名为腾讯云超级应用服务的公告
控制台更新动态
Android SDK 更新动态
iOS SDK 更新动态
Flutter 更新动态
IDE 更新动态
基础库更新动态
产品简介
产品概述
产品优势
应用场景
购买指南
计费概述
按量计费(后付费)
续费指引
停服说明
快速入门
套餐管理
概述
控制台账号管理
存储配置
加速配置
品牌化配置
平台功能
控制台登录
用户和权限体系
小程序管理
小游戏管理
应用管理
商业化
平台管理
用户管理
团队管理
运营管理
安全中心
代码接入指引
Demo 及 SDK 获取
Android
iOS
Flutter
App 服务端接入指南
GUID 生成规则
小程序开发指南
小程序介绍与开发环境
小程序代码组成
指南
框架
组件
API
服务端
JS SDK
基础库
IDE 使用指南
小游戏开发指南
指南
API
服务端
实践教程
小程序登录实践教程
小程序订阅消息实践教程
支付相关实践教程
广告接入实践教程
小游戏订阅消息实践教程
相关协议
数据处理和安全协议

游戏交互

PDF
Focus Mode
Font Size
Last updated: 2025-02-24 17:10:39
下列展示几个游戏中常用的交互方式,完整的设备交互相关 API,可以查看API-设备列表。

触摸事件

游戏中最常见的交互方式是点击,拖动,按住等等,这些交互都和触摸相关。小游戏 API 提供了最基础的触摸事件监听接口:
监听开始触摸事件wx.onTouchStart()
监听触点移动事件wx.onTouchMove()
监听触摸结束事件wx.onTouchEnd()
监听触点失效事件wx.onTouchCancel()

如果要实现更其他触摸相关的效果,需要自行实现,下文展示实现点击和滑动的示例代码:
const touchHandler = {
startX: 0, // 记录按下的坐标
startY: 0, // 记录按下的坐标
startTime: 0, // 记录按下的时间
isMoving: false, // 记录是否移动
longPressTimeout: null, // 用于长按的定时器
thresholdDistance: 10, // 移动距离阈值
thresholdTime: 300, // 点击的时间阈值(毫秒)
longPressTime: 500, // 长按的时间阈值(毫秒)
longPressTriggered: false, // 用于标记长按是否已触发
onTouchStart: function(event) {
this.startX = event.touches[0].clientX;
this.startY = event.touches[0].clientY;
this.startTime = Date.now(); // 记录按下的时间
this.isMoving = false; // 重置移动状态

// 设置长按定时器
this.longPressTimeout = setTimeout(() => {
this.handleLongPress(event);
}, this.longPressTime);
},
onTouchMove: function(event) {
this.isMoving = true;
},
onTouchEnd: function(event) {
clearTimeout(this.longPressTimeout);

const endX = event.changedTouches[0].clientX;
const endY = event.changedTouches[0].clientY;
const endTime = Date.now();
const moveX = endX - this.startX;
const moveY = endY - this.startY;
const moveDistance = Math.sqrt(moveX * moveX + moveY * moveY);
const timeDiff = endTime - this.startTime;

if (
timeDiff < this.thresholdTime &&
moveDistance < this.thresholdDistance
) {
// 处理点击事件
this.handleClick(event);
} else if (
this.isMoving &&
!this.longPressTriggered &&
moveDistance > this.thresholdDistance
) {
// 处理滑动事件
this.handleSwipe(this.startX, this.startY, endX, endY);
}

this.isMoving = false;
this.longPressTriggered = false;
},
onTouchCancel: function(event) {
clearTimeout(this.longPressTimeout);
this.isMoving = false;
this.longPressTriggered = false;
},
handleClick: function(event) {
console.log("点击", event);
// 在这里处理点击事件
},
handleLongPress: function(event) {
console.log("长按", event);
this.longPressTriggered = true;
// 在这里处理长按事件
},
handleSwipe: function(startX, startY, endX, endY) {
const deltaX = endX - startX;
const deltaY = endY - startY;

if (Math.abs(deltaX) > Math.abs(deltaY)) {
// 水平滑动
if (deltaX > 0) {
console.log("往右滑");
// 在这里处理往右滑事件
} else {
console.log("左滑");
// 在这里处理往左滑事件
}
} else {
// 垂直滑动
if (deltaY > 0) {
console.log("往下滑");
// 在这里处理往下滑事件
} else {
console.log("往上滑");
// 在这里处理往上滑事件
}
}
}
};

wx.onTouchStart(touchHandler.onTouchStart.bind(touchHandler));
wx.onTouchMove(touchHandler.onTouchMove.bind(touchHandler));
wx.onTouchEnd(touchHandler.onTouchEnd.bind(touchHandler));
wx.onTouchCancel(touchHandler.onTouchCancel.bind(touchHandler));

文本输入

游戏中有时会用到输入文字的场景,例如登录账号,聊天等场景。小游戏 API 提供了以下接口用于拉起和监听虚拟键盘。
显示文字输入键盘wx.showKeyboard
隐藏文字输入键盘wx.hideKeyboard
监听键盘输入事件wx.onKeyboardInput
监听用户点击键盘 Confirm 按钮时的事件wx.onKeyboardConfirm
监听键盘收起的事件wx.onKeyboardComplete
监听键盘高度变化事件wx.onKeyboardHeightChange
示例代码:
wx.onKeyboardConfirm(result => {
console.warn("用户输入了:", result.value);
});

wx.onTouchStart(result => {
wx.showKeyboard({
defaultValue: "",
maxLength: 100,
multiple: false,
confirmHold: false,
confirmType: "done",
success: res => {
console.warn("拉起成功", res);
},
fail: err => {
console.warn("拉起失败", err);
}
});
});

设备传感器

在移动设备上,有时候可以通过监听设备的传感器变化来做一些很特别的玩法:
wx.startDeviceMotionListening可以监听设备朝向,可以用于实现全景地图等功能。
wx.startAccelerometer可以监听加速计的变化,通常用于测量施加到设备上的加速度,可以用于实现重力感应等功能。
wx.startGyroscope可以监听陀螺仪的变化,通常用于检测设备的旋转速率,单位为弧度/秒,可以用于实现视角的控制等功能。
wx.startCompass可以监听设备朝向(平面),可以用于实现指南针等功能。
示例代码:
const deviceMotionData = { alpha: 0, beta: 0, gamma: 0 };
const accelerometerData = { x: 0, y: 0, z: 0 };
const gyroscopeData = { x: 0, y: 0, z: 0 };
const compassData = { direction: 0, accuracy: 0 };

// 启动设备运动监听
wx.startDeviceMotionListening({
success: () => {
wx.onDeviceMotionChange(res => {
deviceMotionData = res;
});
},
fail: err => {
console.error("Failed to start device motion listening:", err);
}
});

// 启动加速计
wx.startAccelerometer({
success: () => {
wx.onAccelerometerChange(res => {
accelerometerData = res;
});
},
fail: err => {
console.error("Failed to start accelerometer:", err);
}
});

// 启动陀螺仪
wx.startGyroscope({
success: () => {
wx.onGyroscopeChange(res => {
gyroscopeData = res;
});
},
fail: err => {
console.error("Failed to start gyroscope:", err);
}
});

// 启动罗盘
wx.startCompass({
success: () => {
wx.onCompassChange(res => {
compassData = res;
});
},
fail: err => {
console.error("Failed to start compass:", err);
}
});


Help and Support

Was this page helpful?

Help us improve! Rate your documentation experience in 5 mins.

Feedback