21天徒手撸一个游戏引擎(1)先让它动起来

codetyphon

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

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

效果如下:

image

接下来,让它动起来。

把下面的代码删掉

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)时,效果是一样的:

image

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

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

效果如下:
image

动是动起来了,但是这并不是引擎。所以,要用引擎的方式。

先建立一个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);

同样,还是这个效果:
image

接下来继续改造,在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);

效果还是这样的:
image

虽然动的效果还是一样,但是代码已经不一样了。现在,一个引擎最基本的东西已经打造好了。

阅读 635

17 声望
0 粉丝
0 条评论
17 声望
0 粉丝
文章目录
宣传栏