# Modular

The Mini Game provides CommonJS style module API. Modules can be exported through module.exports and exports, and can be introduced through require function. Assume that the code package has the following structure: The src/util directory contains methods that are used repeatedly in the game, and the res/image directory contains pictures that are used in the game.

├── game.js
├── game.json
├── src
|   └── util
|       ├── drawLogo.js
|       └── ...
└── res
    ├── image
    |   ├── logo.png
    |   └── ...
    └── music
        └── bgm.mp3

Among them, the drawLogo.js module encapsulates a method which can be used to draw the logo on a specified location.

module.exports = function (canvas, x, y) {
    var image = new Image()
    image.onload = function () {
        var context = canvas.getContext('2d')
        context.drawImage(image, x, y)
    }
    image.src = 'res/image/logo.png'
}

Note that when loading local picture, audio, and video resources, you must write the absolute path starting from the root directory of the code package. If you write a relative path to the directory where drawLogo.js is located, the system will not be able to find the resource file and the loading will fail.

image.src = '../../res/image/logo.png'

Requiring drawLogo in game.js can call the method of exporting drawLogo module.

var drawLogo = require('./src/util/drawLogo')
var canvas = wx.createCanvas()
drawLogo(canvas, 40, 40)