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

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