Step-by-Step Guide to Building a Simple WeChat Mini‑Game

The author explains the motivation for creating a small game as a side project, noting prior experience with mini‑programs, the revenue potential from in‑app purchases and ads, and the desire to earn extra income.

To start, a simple demo repository is provided (https://github.com/Jackson0714/minigame-example) and a WeChat mini‑game account must be obtained.

Development proceeds with the following steps:

1. Prepare two airplane images.

2. Create the canvas.

const canvas = wx.createCanvas();
const context = canvas.getContext('2d'); // create a 2d context

3. Create the enemy plane.

// create enemy plane
const enemyImage = wx.createImage();
const enemyImgX = canvas.width / 2 - 60;
let enemyImgY = 0;
enemyImage.onload = function () {
  context.drawImage(image, imgX, imgY);
};
enemyImage.src = 'images/enemy.png';

4. Make the enemy fall.

setInterval(function () {
  context.clearRect(enemyImgX, enemyImgY, 120, 79); // clear previous enemy
  context.drawImage(enemyImage, enemyImgX, ++enemyImgY);
}, 16);

5. Create the player’s plane.

const image = wx.createImage();
const imgX = canvas.width / 2 - 93;
let imgY = 500;
image.onload = function () {
  context.drawImage(image, imgX, imgY);
};
image.src = 'images/hero.png';

6. Enable dragging of the player’s plane.

// store current top‑left coordinates of the plane
let touchX = imgX;
let touchY = imgY;
wx.onTouchMove(function (res) {
  context.clearRect(touchX, touchY, 186, 130); // clear previous plane
  touchX = res.changedTouches[0].clientX - 96; // new x
  touchY = res.changedTouches[0].clientY - 65; // new y
  context.drawImage(image, touchX, touchY);
});

7. Add collision detection.

setInterval(function () {
  context.clearRect(enemyImgX, enemyImgY, 120, 79);
  context.drawImage(enemyImage, enemyImgX, ++enemyImgY);
  if (touchX >= enemyImgX - 186 && touchX <= enemyImgX + 120 &&
      touchY >= enemyImgY - 130 && touchY <= enemyImgY + 79) {
    wx.showModal({
      title: '提示',
      content: '发生碰撞，游戏结束！'
    });
  }
  if (enemyImgY >= canvas.height) {
    // reset enemy position if it goes off screen
    enemyImgY = 0;
  }
}, 16);

wx.onTouchMove(function (res) {
  context.clearRect(touchX, touchY, 186, 130);
  touchX = res.changedTouches[0].clientX - 96;
  touchY = res.changedTouches[0].clientY - 65;
  context.drawImage(image, touchX, touchY);
  if (touchX >= enemyImgX - 186 && touchX <= enemyImgX + 100 &&
      touchY >= enemyImgY - 130 && touchY <= enemyImgY + 100) {
    wx.showModal({
      title: '提示',
      content: '发生碰撞，游戏结束！'
    });
  }
});

The article concludes with a reminder to star the GitHub repo, follow the public account for more architecture resources, and notes that further mini‑game tutorials will be continuously updated.