用pixi.js制作拼图游戏

拼图游戏

这个教程面向已经能简单使用pixi.js的开发者，通过创建一个拼图游戏，来演示怎么完整的开发一款 pixi游戏并最终发布。

在此项目中你可以学会怎么使用ES6+开发，怎么划分模块，怎么提前加载资源，怎么进行屏幕自适应，怎么播放音频和视频，怎么分层，怎么通过继承pixi类来扩展功能，怎么实现多国语言，怎么用webpack进行开发期的调试以及最终怎么构建发布游戏（webpack详细教程可参考之前的文章《使用webpack搭建pixi.js开发环境》）。

前言

在线体验

• 下面将完整讲解所有流程，详细讲解每一个类，请结合源代码一起开始吧。

我们开始吧

• 配置环境

  • 安装nodejs。
  • 选一个编辑器，推荐vscode。
  • chrome浏览器。
  • 图集制作工具texturepacker,免费版本即可。
• 把项目 pixi-jigsaw clone下来。
• 运行npm install安装依赖库。
• 运行npm start启动项目，会自动打开chrome浏览器并启动游戏，玩一把然后跟着下面的讲解开始学习吧。

目录及文件说明

• res: 存放不需要放到游戏里面的源工程文件,例如texturepacker图集项目，字体等等。
• src: 所有的游戏代码和资源。
• dist: 此目录为构建脚本动态生成，存放构建完成的项目文件，每次构建都会重新生成这个目录。
• webpack.common.js文件: webpack公共脚本。
• webpack.dev.js文件: webpack开发配置脚本。
• webpack.prod.js文件: webpack发布配置脚本。
• gulpfile.js文件:gulp构建脚本，用于发布项目时候时候构建和优化整个项目。
• package.json文件: node项目的配置文件。

源码说明

• 游戏主页 src/index.html

• 配置文件 src/js/config.js，用于配置游戏资源和常量。

  //游戏基本信息，游戏名字，版本，宽，高等。
  export const meta = {
    name: 'jigsaw puzzle',
    version: '1.0.0',
    width: 796,
    height: 1280
  }
  
  //多国语言，根据浏览器语言自动加载相应的语言包资源。
  export const i18n = {
    'en': 'assets/i18n/en.json',
    'zh-cn': 'assets/i18n/zh-cn.json'
  }
  
  //游戏视口显示区域，不写的话全屏显示。
  export const viewRect = null
  
  //资源列表
  export const resources = [
    {
      name: 'main',
      url: 'assets/image/main.json'
    }, {
      name: 'sound_bg',
      url: 'assets/audio/bg.mp3'
    }, {
      name: 'sound_win',
      url: 'assets/audio/win.mp3'
    }, {
      name: 'sound_fail',
      url: 'assets/audio/fail.mp3'
    },      
    //如果图片或者音频视频涉及多国语言，在这里配置多国语言资源，程序会按需加载特定语言相关资源。
    {
      name: 'bg',
      i18n: {
        'en': 'assets/image/bg_en.png',
        'zh-cn': 'assets/image/bg_zh-cn.png',
      }
    }]

• 多国语言模块src/js/i18n.js，能让程序根据浏览器语言自动调整程序界面语言。

  import { parseQueryString } from './util'
  import mustache from 'mustache'
  
  export default class I18N {
    //i18n_config就是config.js里面的i18n配置节
    constructor(i18n_config) {
      this.config = i18n_config
      this.words = {}
    }
    
    //维护一个键值对列表，i18n判断完语言后，通过key查询value。
    add(words) {
      Object.assign(this.words, words)
    }
  
    //判断用户语言如果querystring加 ?lang=zh-cn之类的，则按照这个现实，否则判断浏览器语言。
    get language() {
      let lang = parseQueryString().lang
      let languages = Object.keys(this.config)
      if (lang && languages.indexOf(lang) !== -1) {
        return lang
      }
      lang = window.navigator.userLanguage || window.navigator.language
      if (lang && languages.indexOf(lang) !== -1) {
        return lang
      }
      return 'en'
    }
  
    //获取当前语言的配置文件路径，参考config.js i18n配置节
    get file() {
      let uri = this.config[this.language]
      return uri
    }
  
    //根据key获取value
    //注意这里用到了mustache模板
    //例如 get('hello {{ user }}', {user:'jack'})，返回'hello jack'。
    get(key, options) {
      let text = this.words[key]
      if (text) {
        if (options) {
          return mustache.render(text, options)
        }
        return text
      } else {
        console.warn('can not find key:' + key)
        return ''
      }
    }
  }

• 音频模块src/js/sound.js，音频模块需要依赖pixi-sound库实现功能。

  import sound from 'pixi-sound'
  
  export default class Sound {
  
    //设置音量大小 volumn  0≤volume≤1
    setVolume(volume) {
      sound.volumeAll = Math.max(0,
        Math.min(1, parseFloat(volume))
      )
    }
  
    //播放音乐，name是音乐名字，config.js文件resources里面音频的name，loop是否循环播放。
    play(name, loop) {
      if (typeof loop !== 'boolean') {
        loop = false
      }
      let sound = app.res[name].sound
      sound.loop = loop
      return sound.play()
    }
  
    //停止播放name
    stop(name) {
      app.res[name].sound.stop()
    }
  
    //开启关闭静音
    toggleMuteAll() {
      sound.toggleMuteAll()
    }
  }

• Application模块src/js/app.js，此类继承PIXI.Application，扩展了自己需要的功能，实现了自适应，资源加载，集成i18n、sound模块功能。

  import * as PIXI from 'pixi.js'
  import Sound from './sound'
  import I18N from './i18n'
  import * as config from './config'
  import {
    throttle
  } from 'throttle-debounce'
  
  export default class Application extends PIXI.Application {
  
     // @param {jsonobject} options 和 PIXI.Application 构造函数需要的参数是一样的
    constructor(options) {
  
      //禁用 PIXI ResizePlugin功能，防止pixi自动自适应.
      //pixi的自适应会修改canvas.width和canvas.height导致显示错误,没法铺满宽或者高。
      options.resizeTo = undefined
  
      super(options)
      PIXI.utils.EventEmitter.call(this)
  
      //canvas显示区域，如果设置了viewRect就显示在viewRect矩形内，没设置的话全屏显示。
      this.viewRect = config.viewRect
  
      //防止调用过快发生抖动，throttle一下
      window.addEventListener('resize', throttle(300, () => {
        this.autoResize(this.viewRect)
      }))
      window.addEventListener('orientationchange', throttle(300, () => {
        this.autoResize(this.viewRect)
      }))
  
      //自适应
      this.autoResize(this.viewRect)
      
      //挂载模块
      this.sound = new Sound()
      this.i18n = new I18N(config.i18n)
    }
  
    //自适应cavas大小和位置，按比例铺满宽或者高。
    autoResize() {
  
      let viewRect = Object.assign({
        x: 0,
        y: 0,
        width: window.innerWidth,
        height: window.innerHeight
      }, this.viewRect)
  
      //游戏宽高比
      const defaultRatio = this.view.width / this.view.height
      
      //视口宽高比
      const windowRatio = viewRect.width / viewRect.height
  
      let width
      let height
  
      //这里判断根据宽适配还是高适配
      if (windowRatio < defaultRatio) {
        width = viewRect.width
        height = viewRect.width / defaultRatio
      } else {
        height = viewRect.height
        width = viewRect.height * defaultRatio
      }
  
      //居中显示canvas
      let x = viewRect.x + (viewRect.width - width) / 2
      let y = viewRect.y + (viewRect.height - height) / 2
  
      //让canvas显示在中心，高铺满的话，两边留黑边，宽铺满的话，上下留黑边
      this.view.style.left = `${x}px`
      this.view.style.top = `${y}px`
  
      //设置canvas的宽高，注意这里千万不要直接设置canvas.width和height。
      this.view.style.width = `${width}px`
      this.view.style.height = `${height}px`
  
      //如果有其他需要自适应的dom一起根据canvas自适应
      let autofitItems = document.querySelectorAll('.autofit')
      autofitItems.forEach(item => {
        item.style.left = `${x}px`
        item.style.top = `${y}px`
        item.style.width = `${width}px`
        item.style.height = `${height}px`
      })
    }
  
    //加载所有的资源
    load(baseUrl) {
  
      let loader = new PIXI.Loader(baseUrl)
      
      //为了解决cdn缓存不更新问题，这里获取资源时候加个版本bust
      loader.defaultQueryString = `v=${config.meta.version}`
      
      //加载当前语言的配置文件
      loader.add(this.i18n.file)
  
      //加载所有游戏资源
      config.resources.forEach(res => {
        if (res.i18n) {
          loader.add({
            name: res.name,
            url: res.i18n[this.i18n.language]
          })
        } else {
          loader.add(res)
        }
      })
  
      loader
        .on('start', () => {
          console.log('loader:start')
          this.emit('loader:start')
        })
        .on('progress', (loader, res) => {
          this.emit('loader:progress', parseInt(loader.progress))
        })
        .on('load', (loader, res) => {
          console.log(`loader:load ${res.url}`)
          // this.emit('load:res', res.url)
        })
        .on('error', (err, loader, res) => {
          console.warn(err)
          this.emit('loader:error', res.url)
        })
        .load((loader, res) => {
          console.log('loader:completed')
          app.res = res
          this.i18n.add(res[this.i18n.file].data)
          delete res[this.i18n.file]
          this.emit('loader:complete', res)
        })
  
      return loader
    }
  }
   //mixinEventEmitter
  Object.assign(Application.prototype,PIXI.utils.EventEmitter.prototype)

• loading页面src/js/loading.js

  

  import {
    TextStyle,
    Container,
    Text,
    Graphics
  } from 'pixi.js'
  import {
    meta
  } from './config'
  
  //这是加载等待界面，菊花转。可用于加载，网络延迟时候显示加载中。
  export default class Loading extends Container {
  
     //@param {object} options   
     //@param {boolean} options.progress 是否显示加载进度文本
    constructor(options) {
      super()
  
      this.options = Object.assign({
        progress: true
      }, options)
  
      //一段弧的弧度
      let arcAngle = Math.PI * 0.2
  
      //弧之间的间距弧度
      let gapAngle = Math.PI * 0.05
  
      //pixi.js 里面 graphics 从3点钟方向开始为0°，这里为了好看往回移动半个弧的距离。
      let offsetAngle = -arcAngle * 0.5
  
      //菊花的半径
      let radius = 80
  
      //背景遮罩，一层灰色的遮罩，阻挡底层ui和操作
      let bg = new Graphics()
      bg.moveTo(0, 0)
      bg.beginFill(0x000000, 0.8)
      bg.drawRect(-meta.width / 2, -meta.height / 2, meta.width, meta.height)
      bg.interactive = true
      this.addChild(bg)
  
      //创建8个弧
      for (let i = 0; i < 8; i++) {
        let arc = new Graphics()
        arc.lineStyle(16, 0xffffff, 1, 0.5)
        let startAngle = offsetAngle + gapAngle * i + arcAngle * i
        let endAngle = startAngle + arcAngle
        arc.arc(0, 0, radius, startAngle, endAngle)
        this.addChild(arc)
      }
  
      //创建旋转的弧，加载时候，有个弧会一直转圈，顺序的盖在八个弧之上。
      let mask = new Graphics()
      this.addChild(mask)
      if (this.options.progress) {
        this.indicatorText = new Text('0%', new TextStyle({
          fontFamily: 'Arial',
          fontSize: 20,
          fill: '#ffffff',
        }))
        this.indicatorText.anchor.set(0.5)
        this.addChild(this.indicatorText)
      }
  
      //旋转的弧当前转到哪个位置了，一共八个位置。
      let maskIndex = 0
  
      //启动timer让loading转起来
      this.timer = setInterval(() => {
        mask.clear()
        mask.lineStyle(16, 0x000000, 0.5, 0.5)
        let startAngle = offsetAngle + gapAngle * maskIndex + arcAngle * maskIndex
        let endAngle = startAngle + arcAngle
        mask.arc(0, 0, radius, startAngle, endAngle)
        maskIndex = (maskIndex + 1) % 8
      }, 100)
    }
  
    //设置进度
    set progress(newValue) {
      if (this.options.progress) {
        this.indicatorText.text = `${newValue}%`
      }
    }
  
    destroy() {
      clearInterval(this.timer)
      super.destroy(true)
    }
  }

• piece模块，一张大拼图中得一块图，src/js/piece.js

  

  import {
    Sprite,
    utils
  } from 'pixi.js'
  
  //一张大拼图中得一块图，可拖拽。
  export default class Piece extends Sprite {
  
     // @param {texture} 块显示的图片
     // @param {currentIndex} 块当前的索引
     // @param {targetIndex} 块的正确位置
     // 当块的 targetIndex == currentIndex 说明块在正确的位置了
     // piece 的索引（以3*3为例）
     // 0  1  2
     // 3  4  5
     // 6  7  8
    constructor(texture, currentIndex, targetIndex) {
      super(texture)
      
      //mixin EventEmitter
      utils.EventEmitter.call(this)
  
      this.currentIndex = currentIndex
      this.targetIndex = targetIndex
  
      //让块相应触摸事件
      this.interactive = true
  
      //监听拖拽事件
      this
        .on('pointerdown', this._onDragStart)
        .on('pointermove', this._onDragMove)
        .on('pointerup', this._onDragEnd)
        .on('pointerupoutside', this._onDragEnd)
    }
  
    //开始拖拽
    _onDragStart(event) {
      this.dragging = true
      this.data = event.data
      
      //拖拽中得快设置成半透明
      this.alpha = 0.5
  
      //当前鼠标位置（相对于父节点的位置）
      let pointer_pos = this.data.getLocalPosition(this.parent)
  
      //鼠标点击位置和piece位置的偏移量，用于移动计算，防止鼠标点击后块中心点瞬间偏移到鼠标位置。
      this.offset_x = pointer_pos.x - this.x
      this.offset_y = pointer_pos.y - this.y
  
      //块原来的位置，用于交换两个块时候位置设置
      this.origin_x = this.x
      this.origin_y = this.y
       
      //发射拖拽开始事件
      this.emit('dragstart', this)
    }
  
    //拖拽移动中
    _onDragMove() {
      if (this.dragging) {
        const pos = this.data.getLocalPosition(this.parent)
        
        //根据鼠标位置，计算块当前位置。
        this.x = pos.x - this.offset_x
        this.y = pos.y - this.offset_y
        this.emit('dragmove', this)
      }
    }
  
    //拖拽完成，松开鼠标或抬起手指
    _onDragEnd() {
      if (this.dragging) {
        this.dragging = false
        
        //恢复透明度
        this.alpha = 1
        this.data = null
        this.emit('dragend', this)
      }
    }
  
    //块的中心点
    get center() {
      return {
        x: this.x + this.width / 2,
        y: this.y + this.height / 2
      }
    }
  }
  
  //mixin EventEmitter
  Object.assign(Piece.prototype, utils.EventEmitter.prototype)

• 拼图类src/js/jigsaw.js，控制拼图逻辑。

  import {
    Texture,
    Container,
    Rectangle
  } from 'pixi.js'
  import Piece from './piece'
  
  //piece之间的空隙
  const GAP_SIZE = 2
  
  //拼图类，控制拼图逻辑，计算块位置，检查游戏是否结束。
  export default class Jigsaw extends Container {
  
    //level难度，比如level=3，则拼图切分成3*3=9块，可尝试换成更大的值调高难度。
    //texture 拼图用的大图
    constructor(level, texture) {
      super()
      this.level = level
      this.texture = texture
  
      //移动步数
      this.moveCount = 0
  
      //所有块所在的container（层级）
      this.$pieces = new Container()
      this.$pieces.y = 208
      this.$pieces.x = -4
      this.addChild(this.$pieces)
  
      //前景层，将拖拽中得块置于此层，显示在最前面
      this.$select = new Container()
      this.$select.y = 208
      this.$select.x = -4
      this.addChild(this.$select)
  
      this._createPieces()
    }
  
    //洗牌生成一个长度为level*level的数组，里面的数字是[0,level*leve)随机值
    //例如level=3,返回[0,3,2,5,4,1,8,7,6]
    _shuffle() {
      let index = -1
      let length = this.level * this.level
      const lastIndex = length - 1
      const result = Array.from({
        length
      }, (v, i) => i)
      while (++index < length) {
        const rand = index + Math.floor(Math.random() * (lastIndex - index + 1))
        const value = result[rand]
        result[rand] = result[index]
        result[index] = value
      }
      return result
    }
  
    // 创建拼图用的所有的块(piece)
    _createPieces() {
    
      //每个piece的宽和高
      this.piece_width = this.texture.orig.width / this.level
      this.piece_height = this.texture.orig.height / this.level
      
      //块位置的偏移量，因为是以屏幕中心点计算的，所有所有块向左偏移半张大图的位置。
      let offset_x = this.texture.orig.width / 2
      let offset_y = this.texture.orig.height / 2
  
      let shuffled_index = this._shuffle()
  
      for (let ii = 0; ii < shuffled_index.length; ii++) {
  
        //从大图中选一张小图生成块(piece)，以level=3为例，将大图切成3*3=9块图
        // 0  1  2
        // 3  4  5
        // 6  7  8
        //然后根据shuffled_index从大图上的位置取一个图
        let row = parseInt(shuffled_index[ii] / this.level)
        let col = shuffled_index[ii] % this.level
        
        let frame = new Rectangle(col * this.piece_width, row * this.piece_height, this.piece_width, this.piece_height)
        
        //注意，这里currentIndex=ii,targetIndex=shuffled_index[ii]
        let piece = new Piece(new Texture(this.texture, frame), ii, shuffled_index[ii])
        
        //将块放在currentIndex所指示的位置位置
        let current_row = parseInt(ii / this.level)
        let current_col = ii % this.level
        piece.x = current_col * this.piece_width - offset_x + GAP_SIZE * current_col
        piece.y = current_row * this.piece_height - offset_y + GAP_SIZE * current_row
  
        piece
          .on('dragstart', (picked) => {
            //当前拖拽的块显示在最前
            this.$pieces.removeChild(picked)
            this.$select.addChild(picked)
          })
          .on('dragmove', (picked) => {
            //检查当前拖拽的块是否位于其他块之上
            this._checkHover(picked)
          })
          .on('dragend', (picked) => {
  
            //拖拽完毕时候恢复块层级
            this.$select.removeChild(picked)
            this.$pieces.addChild(picked)
  
            //检查是否有可以交换的块
            let target = this._checkHover(picked)
            if (target) {
              //有的话增加步数，交换两个块
              this.moveCount++
              this._swap(picked, target)
              target.tint = 0xFFFFFF
            } else {
              //没有的话，回归原位
              picked.x = picked.origin_x
              picked.y = picked.origin_y
            }
          })
        this.$pieces.addChild(piece)
      }
    }
  
    // 交换两个块的位置
    // @param {*} 当前拖拽的块
    // @param {*} 要交换的块
    _swap(picked, target) {
    
      //互换指示当前位置的currentIndex和位置
      let pickedIndex = picked.currentIndex
      picked.x = target.x
      picked.y = target.y
      picked.currentIndex = target.currentIndex
  
      target.x = picked.origin_x
      target.y = picked.origin_y
      target.currentIndex = pickedIndex
    }
  
    //游戏是否成功
    get success() {
  
      //所有的piece都在正确的位置
      let success = this.$pieces.children.every(piece => piece.currentIndex == piece.targetIndex)
  
      if (success) {
        console.log('success', this.moveCount)
      }
  
      return success
    }
  
    //当前的拖拽的块是否悬浮在其他块之上
    _checkHover(picked) {
  
      let overlap = this.$pieces.children.find(piece => {
        //拖拽的块中心点是否在其它块矩形边界内部
        let rect = new Rectangle(piece.x, piece.y, piece.width, piece.height)
        return rect.contains(picked.center.x, picked.center.y)
      })
  
      this.$pieces.children.forEach(piece => piece.tint = 0xFFFFFF)
  
      //改变底下块的颜色，显示块可被交换
      if (overlap) {
        overlap.tint = 0x00ffff
      }
  
      return overlap
    }
  }

• 结果页src/js/result.js，这个页面平淡无奇，唯一值得注意的是里面用到了i18n用于根据当前语言调整ui显示的语言，具体查看代码app.i18n.get处。

  import {
    TextStyle,
    Container,
    Sprite,
    Text,
    Graphics
  } from 'pixi.js'
  import {
    meta
  } from './config'
  
  export default class Result extends Container {
    constructor() {
      super()
      this.visible = false
  
      let bg = new Graphics()
      bg.moveTo(0, 0)
      bg.beginFill(0x000000, 0.8)
      bg.drawRect(-meta.width / 2, -meta.height / 2, meta.width, meta.height)
      bg.interactive = true
      this.addChild(bg)
  
      //成功时候显示
      this.$win = new Container()
      let win_icon = new Sprite(app.res.main.textures.win)
      win_icon.anchor.set(0.5)
      win_icon.y = -160
  
      this.$win.addChild(win_icon)
  
      let win_text = new Text(app.i18n.get('result.win', { prize: app.i18n.get('prize.win') }), new TextStyle({
        fontFamily: 'Arial',
        fontSize: 40,
        fontWeight: 'bold',
        fill: '#ffffff',
      }))
      win_text.anchor.set(0.5)
      this.$win.addChild(win_text)
  
      let win_button = new Sprite(app.res.main.textures.button_get)
      win_button.anchor.set(0.5)
      win_button.y = 80
      win_button.interactive = true
      win_button.buttonMode = true
      win_button.on('pointertap', () => {
        console.log('win')
        location.href = location.href.replace(/mobile(\d)/, 'mobile0')
      })
      this.$win.addChild(win_button)
  
      this.$fail = new Container()
  
      let fail_icon = new Sprite(app.res.main.textures.fail)
      fail_icon.y = -200
      fail_icon.anchor.set(0.5)
      fail_icon.interactive = true
      fail_icon.buttonMode = true
      fail_icon.on('pointertap', () => {
        console.log('fail')
        location.href = location.href.replace(/mobile(\d)/, 'mobile0')
      })
      this.$fail.addChild(fail_icon)
  
      //失败时候显示
      let fail_text = new Text(app.i18n.get('result.fail', { prize: app.i18n.get('prize.fail') }), new TextStyle({
        fontFamily: 'Arial',
        fontSize: 40,
        fontWeight: 'bold',
        fill: '#ffffff',
      }))
      fail_text.anchor.set(0.5)
      this.$fail.addChild(fail_text)
  
      this.addChild(this.$fail)
      this.addChild(this.$win)
    }
  
    //显示成功
    win() {
      this.visible = true
      this.$win.visible = true
      this.$fail.visible = false
    }
  
    //显示失败
    fail() {
      this.visible = true
      this.$win.visible = false
      this.$fail.visible = true
    }
  }

• 游戏场景src/js/scene.js，这个类负责整个游戏世界的显示，控制游戏的开始和结束。

  import {TextStyle,Container,Sprite,Text} from 'pixi.js'
  import Jigsaw from './jigsaw'
  import Result from './result'
  
  const STYLE_WHITE = new TextStyle({
    fontFamily: 'Arial',
    fontSize: 46,
    fontWeight: 'bold',
    fill: '#ffffff',
  })
  
  //游戏时间显示，30秒内没完成，则游戏失败
  const TOTAL_TIME = 30 //second
  
  //倒计时
  let _countdown = TOTAL_TIME
  
  export default class Scene extends Container {
  
    constructor() {
      super()
  
      let bg = new Sprite(app.res.bg.texture)
      bg.anchor.set(0.5)
      this.addChild(bg)
  
      //提示图
      let idol = new Sprite(app.res.main.textures.puzzle)
      idol.y = -198
      idol.x = -165
      idol.anchor.set(0.5)
      idol.scale.set(0.37)
      this.addChild(idol)
  
      //倒计时显示
      this.$time = new Text(_countdown + '″', STYLE_WHITE)
      this.$time.anchor.set(0.5)
      this.$time.x = 170
      this.$time.y = -156
      this.addChild(this.$time)
  
      //拼图模块
      this.$jigsaw = new Jigsaw(3, app.res.main.textures.puzzle)
      this.addChild(this.$jigsaw)
    }
  
    //开始游戏
    start() {
      
      //创建结果页面
      let result = new Result()
      this.addChild(result)
  
      //播放背景音乐
      app.sound.play('sound_bg', true)
      
      //启动倒计时timer，判断游戏成功还是失败。
      let timer = setInterval(() => {
        if (this.$jigsaw.success) {
          //成功后停止timer，停止背景音乐，播放胜利音乐，显示胜利页面。
          clearInterval(timer)
          app.sound.stop('sound_bg')
          app.sound.play('sound_win')
          result.win()
        } else {
          _countdown--
          this.$time.text = _countdown + '″'
          if (_countdown == 0) {
           //失败后停止timer，停止背景音乐，播放失败音乐，显示失败页面。
            clearInterval(timer)
            app.sound.stop('sound_bg')
            app.sound.play('sound_fail')
            result.fail()
          }
        }
      }, 1000)
    }
  }

• 游戏入口类src/js/main.js

  import {
    Container
  } from 'pixi.js'
  import * as config from './config'
  import Application from './app'
  import Loading from './loading'
  import VideoAd from './ad'
  import Scene from './scene'
  import swal from 'sweetalert'
  
  //游戏分层
  const layers = {
    back: new Container(),
    scene: new Container(),
    ui: new Container()
  }
  
  //启动项目
  async function boot() {
  
    document.title = config.meta.name
  
    window.app = new Application({
      width: config.meta.width,
      height: config.meta.height,
      view: document.querySelector('#scene'),
      transparent: true
    })
  
    //把层加入场景内，并将层位置设置为屏幕中心点.
    for (const key in layers) {
      let layer = layers[key]
      app.stage.addChild(layer)
      layer.x = config.meta.width / 2
      layer.y = config.meta.height / 2
    }
  }
  
  //预加载游戏资源
  function loadRes() {
  
    let promise = new Promise((resolve, reject) => {
  
      //显示loading进度页面
      let loading = new Loading()
      layers.ui.addChild(loading)
      
      //根据application事件更新状态
      app.on('loader:progress', progress => loading.progress = progress)
      app.on('loader:error', error => reject(error))
      app.on('loader:complete', () => {
        resolve()
        loading.destroy()
      })
      app.load()
    })
    return promise
  }
  
  //创建游戏场景
  function setup() {
  
    let scene = new Scene()
    layers.scene.addChild(scene)
  
    //这里注释掉了播放视频模块，你可以打开这部分，游戏开始前将播放一个视频，视频播放完毕后才会显示游戏。
    // let ad = new VideoAd()
    // layers.ui.addChild(ad)
    // ad.on('over', () => {
    scene.start()
    // })
  }
  
  window.onload = async () => {
    //启动application
    boot()
    
    //加载资源，出错的话就显示错误提示
    try {
      await loadRes()
    } catch (error) {
      let reload = await swal({
        title: 'load resource failed',
        text: error,
        icon: 'error',
        button: 'reload'
      })
      if (reload) {
        location.reload(true)
      }
      return
    }
    
    //加载成功后显示游戏界面
    setup()
  }

• 恭喜，至此游戏代码部分已经完全讲解完毕，给坚持下来的自己比个心，ღ( ´･ᴗ･` )。

项目构建

• 运行npm run build可发布项目，最终所有文件会拷贝到dist目录下，会合并所有的js文件并混淆和去除无用引用，优化图片资源。