乐趣区

关于小游戏:21天徒手撸一个游戏引擎1先让它动起来

首先新建一个微信小游戏我的项目。删掉我的项目初始化后的代码。建设一个 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=0
let 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);

成果还是这样的:

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

退出移动版