我们用Box2D绘制了很多几何图形,例如圆形,矩形,复杂一点就是两个矩形交叉的合在一起,中间再加个圆形。显然这种界面“太素”了,一个丰富多彩,五彩斑斓的游戏世界显然不可能那么简陋,本节我们就看看如何让我们当前看似极简的游戏变得“声色犬马”起来。
我们将使用上面的图案替换掉原来单调的集合图形,例如十字交叉的旋转障碍物将会被上图右下角的十字架给替换掉。我们看看代码是如何实现的:
// change 1
addSpriteToBody (body, spriteName, index) {
var SpriteObj = this.assetsLib[spriteName]
if (SpriteObj === undefined) {
console.log('sprite obj: ' + SpriteObj + 'name:' + spriteName)
}
var sprite = new SpriteObj()
sprite.x = -99
if (index !== undefined) {
this.stage.addChildAt(sprite, index)
} else {
this.stage.addChild(sprite)
}
body.SetUserData(sprite)
}
上面函数根据物体名字将物体对应的图片资源加入到页面,接下来我们在创建各个物体的地方调用该函数,把物体对应的图片资源加载进来:
createObstacles (level) {
...
// change 2
is.addSpriteToBody(body, o.graphicName)
}
createCross (obstacle) {
// change 3
this.addSpriteToBody(cross, obstacle.graphicName)
}
createHoop (level) {
....
var body = this.world.CreateBody(bodyDef)
body.CreateFixture(fixDef)
// change 3
this.addSpriteToBody(body, 'HoopSquare')
....
body = this.world.CreateBody(bodyDef)
body.CreateFixture(fixDef)
// change 4
this.addSpriteToBody(body, 'HoopSquare')
....
var board = this.world.CreateBody(bodyDef)
board.CreateFixture(fixDef)
// change 5
this.addSpriteToBody(board, 'HoopBoard')
....
// change 6
this.addSpriteToBody(body, 'HoopSensor', 0)
}
spawnBall () {
....
// change 7
this.addSpriteToBody(this.ball, ball.className
}
update () {
....
// change 8
var body = this.world.GetBodyList()
while (body) {
var sprite = body.GetUserData()
if (sprite) {
var position = body.GetWorldCenter()
sprite.x = position.x * this.pxPerMeter
sprite.y = position.y * this.pxPerMeter
sprite.rotation = body.GetAngle() * 180 / Math.PI
}
body = body.GetNext()
}
},
上面代码完成后,我们可以看到界面变得丰富起来:
接着我们实现关卡选择界面,我们要完成的功能如下,一旦游戏页面加载后,会有一个关卡选择界面,用户通关点击左右箭头选择他想玩的关卡:
我们看看相关代码的实现
start () {
....
// change 14
var levelSelection = new this.assetsLib.LevelSelection()
this.stage.addChild(levelSelection)
levelSelection.levels.stop()
levelSelection.rightButton.on('click', this.levelRightButton)
levelSelection.leftButton.on('click', this.levelLeftButton)
this.isPlaying = false
levelSelection.playButton.on('click', this.playButtonClick)
this.levelSelection = levelSelection
}
LevelSelection对应的正是上图所示的窗口,它有两个箭头按钮,以及一个中间按钮,代码分别实现了三个按钮点击时的响应函数,其实现如下:
levelRightButton () {
console.log('right button: ', this.levelSelection.levels)
var next = this.levelSelection.levels.currentFrame + 1
this.levelSelection.levels.gotoAndStop(next)
},
levelLeftButton () {
var prev = this.levelSelection.levels.currentFrame - 1
this.levelSelection.levels.gotoAndStop(prev)
},
playButtonClick () {
this.levelSelection.parent.removeChild(this.levelSelection)
this.score = 0
this.currentLevel = this.levels[this.levelSelection.levels.currentFrame]
console.log('play button click: ', this.levelSelection.levels.currentFrame)
this.showScoreBoard()
this.isPlaying = true
this.createGameLevel()
},
最后,我们还需要把关卡界面窗口中使用到的图片给加载到页面中,因此像上一个项目那样启动一个图片加载函数:
load () {
var loader = new this.cjs.LoadQueue(false)
loader.addEventListener('fileload', function (e) {
if (e.item.type === 'image') {
this.images[e.item.id] = e.result
}
}.bind(this))
loader.addEventListener('complete', this.start)
loader.loadManifest(this.assetsLib.properties.manifest)
}
完成上面代码后,我们整个游戏的设计基本就完成了。