00003-微信小游戏--代码封装

在前面的内容我们已经可以让图片随着手指或者鼠标的移动而移动了。但是我们的一个main.js脚本不能写所有的内容，我们应该让每一张图片自己管理自己的行为。为此我们做了第一次代码的封装。
sprite.js 游戏基础的精灵类

/**
 * 游戏基础的精灵类
 */
export default class Sprite {
  constructor(imgSrc = '', width=  0, height = 0, x = 0, y = 0) {
    this.img     = new Image()
    this.img.src = imgSrc

    this.width  = width
    this.height = height

    this.x = x
    this.y = y

    this.visible = true
  }

  /**
   * 将精灵图绘制在canvas上
   */
  drawToCanvas(ctx) {
    if ( !this.visible )
      return

    ctx.drawImage(
      this.img,
      this.x,
      this.y,
      this.width,
      this.height
    )
  }

接下我们在写一个图片脚本Unity.js，我们在此脚本中控制图片的移动。

import Sprite from "../base/sprite.js"

const screenWidth = window.innerWidth
const screenHeight = window.innerHeight

const BG_IMG_SRC = "images/Unity.jpg"
const BG_WIDTH = 150
const BG_HEIGHT = 90


export default class Unity extends Sprite{
	constructor(ctx){
		super(BG_IMG_SRC,BG_WIDTH,BG_HEIGHT)
		this.render(ctx)
		this.initEvent()
	}
	//渲染图片
	render(ctx) {
		ctx.drawImage(this.img,this.x,this.y,53,33)
	}
	//触摸监听
	initEvent(){
		canvas.addEventListener('touchmove',((e)=>{
			e.preventDefault()
			let x = e.touches[0].clientX
			let y = e.touches[0].clientY
			console.log(x+"   "+y)
			this.x = x
			this.y =y
		}).bind(this))
	}
}

main.js

import Unity from "./runtime/unity";

require("../js/runtime/unity")

let ctx = canvas.getContext('2d')
export default class Main{
	constructor(){
		this.aniId = 0;
		this.restart();
	}

	restart(){
		this.unity = new Unity(ctx)
		//以下连个步骤实现了让图片显示
		this.bindLoop = this.loop.bind(this)
		this.aniId = window.requestAnimationFrame(
			this.bindLoop,
			canvas
		)
	}
	render(){
		ctx.clearRect(0, 0, canvas.width, canvas.height)
		this.unity.drawToCanvas(ctx)
	}
	loop(){
		this.render()
		this.aniId = window.requestAnimationFrame(
			this.bindLoop,
			canvas
		)
	}
}