tencent cloud

All product documents
Tencent Cloud Super App as a Service
DocumentationTencent Cloud Super App as a ServiceGuildlines for Mini Game DevelopmentGuideBasic CapabilityGame Interaction
Game Interaction
Download PDF
Last updated: 2025-03-25 18:15:55
Game Interaction
Last updated: 2025-03-25 18:15:55
Download PDF
Below are some common interaction methods used in games. For a complete list of device interaction-related APIs, refer to the API-Device documentation.

Touch event

The most common interactions in games are tapping, dragging, and holding, all of which are related to touch. The mini game API provides basic touch event listeners:
Listen for touch start events:onTouchStart
Listen for touch move events:onTouchMove
Listen for touch end events:onTouchEnd
Listen for touch cancel events:offTouchCancel

To implement more complex touch-related effects, you need to handle them yourself. Below is an example of handling tap and swipe events:
const touchHandler = {
  startX: 0, // Record the starting X coordinate
  startY: 0, // Record the starting X coordinate
  startTime: 0, // Record the start time
  isMoving: false, // Track if the touch is moving
  longPressTimeout: null, // Timer for press and hold
  thresholdDistance: 10, // Threshold distance for movement
  thresholdTime: 300, // Threshold time for tap (milliseconds)
  longPressTime: 500, // Threshold time for press and hold (milliseconds)
  longPressTriggered: false, // Flag to indicate if press and hold was triggered
  onTouchStart: function(event) {
    this.startX = event.touches[0].clientX;
    this.startY = event.touches[0].clientY;
    this.startTime = Date.now(); // Record the start time
    this.isMoving = false; // Reset moving state

    // Set press and hold timer
    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
    ) {
      // Handle tap event
      this.handleClick(event);
    } else if (
      this.isMoving &&
      !this.longPressTriggered &&
      moveDistance > this.thresholdDistance
    ) {
      // Handle swipe event
      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("Tap", event);
    // Handle tap event here
  },
  handleLongPress: function(event) {
    console.log("Press and hold", event);
    this.longPressTriggered = true;
    // Handle press and hold event here
  },
  handleSwipe: function(startX, startY, endX, endY) {
    const deltaX = endX - startX;
    const deltaY = endY - startY;

    if (Math.abs(deltaX) > Math.abs(deltaY)) {
      // Horizontal swipe
      if (deltaX > 0) {
        console.log("Swipe right");
        // Handle swipe right event here
      } else  {
        console.log("Swipe left");
        // Handle swipe left event here
      }
    } else  {
      // Vertical swipe
      if (deltaY > 0) {
        console.log("Swipe down");
        // Handle swipe down event here
      } else  {
        console.log("Swipe up");
        // Handle swipe up event here
      }
    }
  }
};

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

Text input

In some game scenarios, such as logging in or chatting, text input is required. The mini game API provides the following APIs to show and listen to the virtual keyboard:
Show text input keyboard:showKeyboard
Hide text input keyboard:hideKeyboard
Listening for text input keyboard:onKeyboardInput
Listens for the event where the user taps the Done button on the keyboard onKeyboardConfirm
Listens for the event when the keyboard is hidden onKeyboardComplete
Listens for keyboard height change event onKeyboardHeightChange
Example:
wx.onKeyboardConfirm(result => {
  console.warn("User input:", result.value);
...

wx.onTouchStart(result => {
  wx.showKeyboard({
    defaultValue: "",
    maxLength: 100,
    multiple: false,
    confirmHold: false,
    confirmType: "done",
    success: res => {
      console.warn("Keyboard shown successfully", res);
    },
    fail: err,
      console.warn("Failed to show keyboard", err);
    }
  });
});

Device sensors

On mobile devices, you can create unique gameplay experiences by listening to changes in device sensors:
startDeviceMotionListening Listens for device orientation changes, useful for features like panoramic maps.
startAccelerometer Listens for accelerometer changes, typically used to measure acceleration applied to the device, enabling features like gravity sensing.
startGyroscope Listens for gyroscope changes, typically used to detect the device's rotation rate in radians per second, useful for controlling the view.
startCompass Listens for device orientation (in the plane), useful for implementing compass features.
Example:
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 };

// Start device motion listening
wx.startDeviceMotionListening({
  success: () => {
    wx.onDeviceMotionChange(res => {
      deviceMotionData = res;
    });
  },
  fail: err => {
    console.error("Failed to start device motion listening:", err);
  }
});

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

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

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


Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No

Feedback

Contact Us

Contact our sales team or business advisors to help your business.

Contact Us
Technical Support

Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

Submit a Ticket
7x24 Phone Support
Hong Kong, China
+852 800 906 020 (Toll Free)
United States
+1 844 606 0804 (Toll Free)
United Kingdom
+44 808 196 4551 (Toll Free)
Canada
+1 888 605 7930 (Toll Free)
Australia
+61 1300 986 386 (Toll Free)
EdgeOne hotline
+852 300 80699
More local hotlines coming soon