Getting Started

In this document, we will try out various Mini Program capabilities to create a simple Mini Game where the player controls an aircraft and has to avoid falling blocks. This instructional guide will show you to how to develop a Mini Game from scratch.

Register a Mini Game Account

Go to the Mini Program Registration page. There, follow the instructions to enter and submit the relevant information to register a Mini Game account. Select "Game" as the service category and "Casual Game" as the subcategory.

Install and Launch WeChat DevTools

After registering a Mini Game account, download WeChat DevTools and install it on your computer.

Open the WeChat DevTools client and log in using the Mini Game account you just registered. Then, scan the barcode using the "Scan" feature to enter the Mini Game development environment.

Select the Mini Game Tab from the Mini Program Project list on the left side. Then, click + to start creating a Mini Game project.

Enter a suitable project name and select a suitable empty directory on your local device. Then, log in to the previously registered Mini Program management platform. Find the Mini Program AppID in the image below and enter it in the "AppId" text box in the form.

After entering all the required information, click Create in the lower-right corner to create the Mini Game.

In WeChat DevTools, you can see that the Mini Program only has two required files:

|--game.js
|--game.json
  1. game.js is the Mini Game entry file.
  2. game.json is the configuration file.

Double-click on the "game.json" file in the directory tree to begin editing the code.

(If you cannot find the directory tree, note that you must first select the "Editor" switch in the upper-left corner.)

Edit the Code

In the Mini Game environment, you can only use JavaScript to write the Mini Game. However, unlike browser environments, the Mini Game environment only has wx APIs, not the BOM and DOM APIs. In what follows, we will use the wx API to perform basic functions, such as creating canvases, drawing graphics, displaying images, and responding to user interactions.

Create a canvas

const canvas = wx.createCanvas()

In game.js, input the above code an save it to immediately create an on-screen canvas. Our subsequent code will be based on this canvas object.

Draw a rectangle

const context = canvas.getContext('2d') // Create a 2D context.
context.fillStyle = '#1aad19' // The rectangle color.
context.fillRect(0, 0, 100, 100) // The vertex of the top-left corner of the rectangle is (0, 0) and the vertex of the bottom-right corner is (100, 100).

Continue to enter the above code and save it. You will see a green square appear at the top-left corner of the simulator.

Next, we perform a simple calculation on the rectangle to horizontally center it by changing context.fillRect(0, 0, 100, 100) to:

context.fillRect(canvas.width / 2 - 50, 0, 100, 100)

After saving, you will see the rectangle has been horizontally centered:

To simplify the movement logic when drawing rectangles, we encapsulate the code of context.fillRect in the drawRect function and then call this function:

function drawRect(x, y) {
  context.clearRect(x, y - 1, 100, 100)
  context.fillRect(x, y, 100, 100)
}
drawRect(canvas.width / 2 - 50, 0)

Here, we add more lines to context.clearRect, which act to erase the original rectangle each time a new one is drawn. This makes it easier to implement falling rectangles as described below. After saving the changes, the simulator should look the same as in the previous step, with one horizontally-centered green rectangle.

Implement falling rectangles

Modify drawRect(canvas.width / 2 - 50, 0) to the following code:

const rectX = canvas.width / 2 - 50
let rectY = 0
setInterval(function(){
  drawRect(rectX, rectY++)
}, 16)

Here, we have added a timer function that is executed once every 16ms. This function draws a new rectangle each time, with the y-coordinate of the top-left corner increased by 1 compared to the original rectangle. After saving the above code, you will see that the green rectangle falls from the top to the bottom on the simulator.

Add an aircraft image

In the directory of the created project, create an img directory and add the image plane.png to the directory. You can use any image you like, but we suggest a size of 100px100px. In what follows, we assume the size of the image is 100px100px.

After adding the image, you can see the img directory and plane.png media in the directory tree.

Add the following code to add the aircraft image to the canvas.

const image = wx.createImage()
const imgX = canvas.width / 2 - 50
let imgY = 500
image.onload = function () {
  context.drawImage(image, imgX, imgY)
}
image.src = 'img/plane.png'

After saving, you will see the aircraft image appear at the bottom of the simulator once the image is loaded.

Implement touch control for the aircraft

Add the following code to enable the player to move the aircraft by touch.

// Saves the coordinates of the aircraft’s top-left corner.
let touchX = imgX
let touchY = imgY

wx.onTouchMove(function (res) {
  context.clearRect(touchX, touchY, 100, 100); // Erases the original aircraft from the canvas.
  touchX = res.changedTouches[0].clientX // Redetermines the x-coordinate of the current touchpoint.
  touchY = res.changedTouches[0].clientY // Redetermines the x-coordinate of the current touchpoint.
  context.drawImage(image, touchX, touchY);
})

wx.onTouchMove is the API the Mini Game uses to listen on touchpoint movement events and get the touchX and touchY coordinates of the touchpoint. These coordinates are then used to redraw the aircraft image so that the aircraft is moved by touch control.

After saving the code, use the mouse to drag on the simulator. You will see that the aircraft moves with the mouse.

Determine if the aircraft has collided with a falling rectangle

Add the following code at the end of the wx.onTouchMove callback function:

if (touchX >= rectX - 100 && touchX <= rectX + 100 && touchY >= rectY - 100 && touchY <= rectY + 100) { // The aircraft has collided with a falling rectangle.
  wx.showModal({
    title: 'Prompt',
    content: 'You crashed. Game over!'
  })
}

After saving, if you collide with a falling block when dragging the aircraft in the simulator, the Game Over prompt will pop up.

Preview on a mobile phone

Click Preview in WeChat DevTools and scan the QR code with a mobile phone. Now you can preview the Mini Game on the mobile phone.

Upload a test version

When developing a Mini Game, you may want to let other members of the project team test it. In this case, you can submit a test version. To do this, first click Upload in the upper-right corner of WeChat DevTools.

In the pop-up window, enter the version number and project remarks and then click Upload.

After uploading the version, log in to the Mini Program management platform and click Version Management. On the right of the page, select the version just submitted and click Set as Test Version.

After selecting the test version, you can click the QR code icon under the version number to get the Mini Game test version QR code.

You must note that, if individuals other than admins and project members need to use the Mini Game "Test Version", you must add their WeChat accounts to the "Test Member" list on the "Member Management" interface of the management platform. You can find more information about Mini Program member management here.

Test versions can be uploaded multiple times in the development process, and the test versions uploaded by different developers are mutually independent. The effective test version is the version selected for "Set as Test Version" in the management platform. If the same developer uploads more than one test version, the most recent version overwrites the original version. If you access a test version by scanning the QR code or from the existing test version entry in the mobile client, the latest test version will appear.

Submit the Mini Game for review

After completing Mini Game development, you must submit it for review before it can be released externally.

In the Mini Program management system, go to "Version Management" and click Submit for Review to the right of the test version you want to release. Then, fill in the form to submit the Mini Game for review.

Confirm release

After the Mini Game version passes review, you can click Submit for Release in the "Reviewed Version" to release the Mini Game.