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) } })})