sprite.js 中的constructor函数中减少:

this.vx = 0this.vy = 0

sprite.js 中的update函数:

this.x += this.vxthis.y += this.vy

这样,只有设置vx或vy,它就能够本人动了。

在Sprite.js中的constructor函数设置:

this.on_update = () => {}

这是一个空办法,就是为了在实例化sprite时去设置update办法

相应地,Sprite.js中:

  update() {    this.x += this.vx    this.y += this.vy    this.on_update()  }

则在更新本身坐标后调用了on_update办法。

在Sprite.js中新增:

  remove_from(arr) {    const index = arr.indexOf(this)    if (index != -1) {      arr.splice(index, 1)    }  }

这样,就能够从update中写判断来从数组中移除本人。

在 game.js 中:

bullet.vy = -5bullet.on_update = () => {    if (bullet.y <= 0 - bullet.height) {        bullet.remove_from(bullets)    }}

即敌机坐标超过屏幕下方,就从敌机数组中移除。

同样,把碰撞检测函数放到Sprite.js里:

collision_with(arr) {    const self = this    return arr.filter(item => {      return item.x + item.width * this.collision_buff > self.x &&        item.x < self.x + item.width * this.collision_buff && self.y + self.height * this.collision_buff > item.y &&        self.y < item.y + item.height * this.collision_buff    })}

这时,对player而言,如果找到产生碰撞的敌机,则游戏完结:

player.on_update = () => {    const arr = player.collision_with(enemys)    if (arr.length > 0) {      gameover = true    }}

对于子弹:

const collisioned = bullet.collision_with(enemys)collisioned.map(item => {    score += 1    item.remove_from(enemys)})if (collisioned.length > 0) {    bullet.remove_from(bullets)}

当初,game.js 全副代码为:

import './libs/weapp-adapter'import './libs/symbol'import {  ResLoader,  Sprite} from './codetyphon/index'const context = canvas.getContext('2d')const {  windowWidth,  windowHeight} = wx.getSystemInfoSync()let time = 0let enemys = []let bullets = []let gameover = falselet score = 0function rand(min, max) {  return Math.round(Math.random() * (max - min) + min);}const loader = new ResLoader()loader.add('player', 'images/player.png')loader.add('enemy', 'images/enemy.png')loader.add('gameover', 'images/gameover.png')loader.add('bullet', 'images/bullet.png')loader.on_load_finish((res) => {  const player = new Sprite(0, 0, res['player'], 0.5)  player.setPosition(windowWidth / 2, windowHeight - player.height)  player.on_update = () => {    const arr = player.collision_with(enemys)    if (arr.length > 0) {      gameover = true    }  }  const update = () => {    player.update()    enemys.map((enemy, enemy_index) => {      enemy.update()    })    bullets.map((bullet, bullet_index) => {      bullet.update()    })  }  const draw = () => {    player.draw(context)    enemys.map(enemy => {      enemy.draw(context)    })    bullets.map(bullet => {      bullet.draw(context)    })    context.font = 'normal 20px sans-serif';    context.fillStyle = '#fff'    context.fillText(score, 10, 30)  }  const step = (timestamp) => {    context.clearRect(0, 0, windowWidth, windowHeight)    //update    if (!gameover) {      time += 1;      if (time % 60 == 0) {        const enemy = new Sprite(0, 0, res['enemy'], 0.5)        enemy.setPosition(rand(0, windowWidth - enemy.width), 0)        enemy.vy = 3        enemy.on_update = () => {          if (enemy.y > windowHeight) {            enemy.remove_from(enemys)          }        }        enemys.push(enemy)      }      update()    }    draw()    if (gameover) {      context.drawImage(res['gameover'], windowWidth / 2 - res['gameover'].width / 4, windowHeight / 2 - res['gameover'].height / 4, res['gameover'].width / 2, res['gameover'].height / 2)    }    window.requestAnimationFrame(step);  }  window.requestAnimationFrame(step);  wx.onTouchMove(function (res) {    if (!gameover) {      const x = res.changedTouches[0].clientX      const y = res.changedTouches[0].clientY      player.setPosition(x, y)    }  })  wx.onTouchEnd((result) => {    if (!gameover) {      const bullet = new Sprite(0, 0, res['bullet'], 0.1)      bullet.setPosition(player.x, player.y)      bullet.vy = -5      bullet.on_update = () => {        if (bullet.y <= 0 - bullet.height) {          bullet.remove_from(bullets)        } else {          const collisioned = bullet.collision_with(enemys)          collisioned.map(item => {            score += 1            item.remove_from(enemys)          })          if (collisioned.length > 0) {            bullet.remove_from(bullets)          }        }      }      bullets.push(bullet)    }  })})