VUE+WebPack精美游戏设计:实现微信红包铜钱转动特性和页面数据的本地存储

export default { 
    data () { 
      return { 
      .... 
      buttonsMap: {} 
      } 
    }, 
   .... 
   decideWhetherButtonDisableOrNot () { 
        // 判断当前是否有足够的钱币,电量和人口去建造建筑物 
        for (var i = 0; i < 3; i++) { 
          var b = this.buildings[i] 
          var hasEnoughPowerSupplies = Constant[b.name].needPopulations === 0 || (this.gameSceneComponent.powerSupplies - this.gameSceneComponent.populations >= Constant[b.name].needPopulations) 

          var hasEnoughCoins = (this.gameSceneComponent.coins >= Constant[b.name].needCoins) 
          var button = this.buttonsMap[b.name].enableButton 
          var buttonDisabled = this.buttonsMap[b.name].disableButton 

          if (hasEnoughPowerSupplies && hasEnoughCoins) { 
            button.visible = true 
            buttonDisabled.visible = false 
          } else { 
            button.visible = false 
            buttonDisabled.visible = true 
          } 
        } 
      }, 
      setupBuildingButton (i) { 
      .... 
     // change here 
      var buttons = {} 
      var _this = this 
      // change here 
      buttons['enableButton'] = button 
      .... 
      // change here 
      buttons['disableButton'] = buttonDisabled 
      this.buttonsMap[b.name] = buttons 
      } 
}

export default { 
    data () { 
      return { 
      .... 
      // change here 
        // 经过800时间单位能创造一个钻石 
        // change here for test 
        tickCountForMerchantDiamond: 800, 
        // 200金币换一个钻石 
        coinsNeededForDiamond:  200, 
        // 每隔90个时间单位增加一个金币 
        coinGenerationCountDown: 90, 
        // 当前总共增加几个金币 
        coinGenerationCount: 0 
        } 
    } 
    .... 
    tick () { 
    .... 
    this.coinsTick() 
    .... 
    } 
    .... 
    calculateBuildingsEffects () { 
        // 根据当前建筑物，计算金币，钻石和人口数量 
        this.powerSupplies = 10 
        this.populations = 0 
        this.coinGenerationCountDown = 90 

        for (var i = 0, len = this.buildingList.length; i < len; i++) { 
          var b = this.buildingList[i] 
          var data = Constant[b.name] 
          // 计算总人口 
          this.evaluatePopulation(data.needPopulations) 

          if (b.isConstructionDone) { 
            this.evaluatePowerSupply(data.power) 
            if (b.name === 'CoinsGenerator') { 
              this.evaluateCoinsGeneration() 
            } 

            if (b.name === 'Merchant') { 
              this.evaluateMerchant(b) 
            } 
          } 
        } 
      }, 
      evaluatePopulation (value) { 
        this.populations += value 
      }, 
      evaluatePowerSupply (value) { 
        this.powerSupplies += value 
      }, 
      evaluateCoinsGeneration () { 
        this.coinGenerationCountDown -= 3 
      }, 
      evaluateMerchant (building) { 
        var b = building 
        if (!b.diamonTick) { 
          b.diamonTick = 0 
        } 

        b.diamonTick += 1 
        if (b.diamonTick >= this.tickCountForMerchantDiamond) { 
          if (this.coins >= this.coinsNeededForDiamond) { 
            this.coins -= this.coinsNeededForDiamond 
            this.popDiamond(b) 
            b.diamondTick = 0 
          } 
        } 
      }, 
      coinsTick () { 
        this.coinGenerationCount += 1 
        if (this.coinGenerationCount >= this.coinGenerationCountDown) { 
          this.coins += 1 
          this.coinGenerationCount = 0 
        } 

        this.calculateBuildingsEffects() 
      },

diamondSprite () { 
        var container = new this.cjs.Container() 
        var data = { 
          framerate: 16, 
          images: ['../../static/images/diamond-spritesheet.png'], 
          frames: {width: 90, height: 90} 
        } 
        var spriteSheet = new this.cjs.SpriteSheet(data) 
        var diamondSprite = new this.cjs.Sprite(spriteSheet) 
        diamondSprite.gotoAndPlay(0) 
        diamondSprite.scaleX = diamondSprite.scaleY = 0.5 
        container.addChild(diamondSprite) 
        container.on('click', function () { 
          this.diamonds += 1 
          this.stage.removeChild(container) 
        }.bind(this)) 

        return container 
      }, 
      // 在页面上弹出一个钻石 
      popDiamond (building) { 
        var screenCoord = this.isoToScreenCoord(building.x, building.y) 
        var globalScreenCoord = this.cityLayer.localToLocal(screenCoord.x, screenCoord.y, this.stage) 
        var diamond = this.diamondSprite() 
        diamond.x = globalScreenCoord.x 
        diamond.y = globalScreenCoord.y 
        this.stage.addChild(diamond) 
      },

init () { 
    .... 
// change here 
        if (localStorage['city.buildinglist']) { 
          this.buildingList = JSON.parse(localStorage['city.buildinglist']) 
        } else { 
          this.buildingList = [] 
        } 
        // *1 将字符强行转换成数字 
        this.coins = localStorage['city.coins'] * 1 || 10 
        this.diamonds = localStorage['city.diamonds'] * 1 || 0 
        .... 
} 
.... 
tick () { 
.... 
 // change here 
  this.autoSave() 
} 
autoSave () { 
        if (this.cjs.Ticker.getTicks() % 100 === 0) { 
          localStorage['city.coins'] = this.coins 
          localStorage['city.diamond'] = this.diamonds 
          localStorage['city.buildinglist'] =       JSON.stringify(this.buildingList) 
        }