首先新建一个微信小游戏我的项目。删掉我的项目初始化后的代码。建设一个game.js的文件：

const canvas = wx.createCanvas()const context = canvas.getContext('2d')context.fillStyle = '#1aad19'context.fillRect(0, 0, 50, 50)

成果如下：

接下来，让它动起来。

把上面的代码删掉

context.fillRect(0, 0, 50, 50)

而后，定义屏幕宽高，及设置2个变量x和y：

const {  windowWidth,  windowHeight} = wx.getSystemInfoSync()let x=0let y=0

再定义一个绘制的办法

function draw(x, y) {  context.clearRect(0, 0, windowWidth, windowHeight)  context.fillRect(x, y, 50, 50)}

当执行draw(x,y)时，成果是一样的：

接下来，要让它动起来。简略一点，从左往右，出屏幕后再从右边从新开始。

const step=(timestamp)=>{  x+=1  if(x>=windowWidth){    x=0  }  draw(x,y)  window.requestAnimationFrame(step);}window.requestAnimationFrame(step);

成果如下：

动是动起来了，然而这并不是引擎。所以，要用引擎的形式。

先建设一个codetyphon文件夹。外面新建一个sprite.js：

export default class Sprite {  constructor(x = 0, y = 0) {    this.x=x    this.y=y  }  draw(context){    context.fillStyle = '#1aad19'    context.fillRect(this.x, this.y, 50, 50)  }}

其中，constructor是初始化，定义了x和y默认为0.
draw办法调用context绘制了一个矩形。

接下来，在codetyphon中新建一个index.js文件：

import Sprite from './sprite'export {  Sprite}

回到game.js，当初把sprite引入进来。

import {Sprite} from './codetyphon/index'

而后，new出一个player对象：

const player = new Sprite()

接着，把requestAnimationFrame改为：

const step = (timestamp) => {  context.clearRect(0, 0, windowWidth, windowHeight)  player.x += 1  if (player.x >= windowWidth) {    player.x = 0  }  player.draw(context)  window.requestAnimationFrame(step);}window.requestAnimationFrame(step);

这时，之前let的x，y什么的都能够删掉了。

当初 game.js 代码如下：

import {  Sprite} from './codetyphon/index'const canvas = wx.createCanvas()const context = canvas.getContext('2d')const {  windowWidth,  windowHeight} = wx.getSystemInfoSync()const player = new Sprite()const step = (timestamp) => {  context.clearRect(0, 0, windowWidth, windowHeight)  player.x += 1  if (player.x >= windowWidth) {    player.x = 0  }  player.draw(context)  window.requestAnimationFrame(step);}window.requestAnimationFrame(step);

同样，还是这个成果：

接下来持续革新，在sprite.js中减少一个update办法：

export default class Sprite {  constructor(x = 0, y = 0) {    this.x=x    this.y=y  }  update(){      }  draw(context){    context.fillStyle = '#1aad19'    context.fillRect(this.x, this.y, 50, 50)  }}

这里update是个空办法。

而后，建设一个player.js的文件：写一个Player类去继承Sprite类：

import Sprite from './codetyphon/sprite'const {  windowWidth,  windowHeight} = wx.getSystemInfoSync()export default class Player extends Sprite {  constructor(x=0,y=0) {    super(x,y)  }  update(){    this.x+=1    if (this.x >= windowWidth) {      this.x = 0    }  }}

接下来，引入Player

import Player from './player'

用Player去new一个player对象:

const player = new Player()

相应地，requestAnimationFrame局部则变为：

const step = (timestamp) => {  context.clearRect(0, 0, windowWidth, windowHeight)  player.update()  player.draw(context)  window.requestAnimationFrame(step);}window.requestAnimationFrame(step);

当初，整个game.js是这样的：

import Player from './player'const canvas = wx.createCanvas()const context = canvas.getContext('2d')const {  windowWidth,  windowHeight} = wx.getSystemInfoSync()const player = new Player()const step = (timestamp) => {  context.clearRect(0, 0, windowWidth, windowHeight)  player.update()  player.draw(context)  window.requestAnimationFrame(step);}window.requestAnimationFrame(step);

成果还是这样的：

尽管动的成果还是一样，然而代码曾经不一样了。当初，一个引擎最根本的货色曾经打造好了。