微信小游戏_China_Fighting——runtime类（background、fstart1、fstart2、gameinfo、music）

正文

本文主要讲解background.js、fstart1.js、fstart2.js、gameinfo.js、music.js的内容。这些都是在游戏运行过程中会使用到的背景类。
由于将整个js全部粘贴到博文里过于占位置，只对于一些关键部分以及该js代码实现的功能进行讲解。若想获取整个js文件，可以去目录–>前言–>资源链接里下载，内含超详细注释。

1.background.js

这部分就是编写了游戏整体的背景，背景依旧是一个继承了sprite类的类。也是一幅图片，那么如何实现游戏背景的滚动呢？这就是这部分代码的要讲解重点。
关键代码：

  render(ctx) {
    //绘制上半部分
    ctx.drawImage(
      this.img,
      0,
      0,
      this.width,
      this.height,
      0,
      -screenHeight + this.top,
      screenWidth,
      screenHeight
    )
    //绘制下半部分
    ctx.drawImage(
      this.img,
      0,
      0,
      this.width,
      this.height,
      0,
      this.top,
      screenWidth,
      screenHeight
    )
  }

答案：就是绘制两个图片，两张图片大小和屏幕一致，第一张漏出高度为top部分，其余的隐藏在屏幕上面，第二张补全除了top高度之外的部分，其余的隐藏在屏幕下面。这也是大部分小游戏的惯用方法，肯定还有一些其他的绘制背景的方法，小伙伴们可以自己去探索。

2.fstart1.js 及 fstart2.js

这两个文件是游戏一开始的引导页，告诉玩家游戏规则和游戏背景。也是继承sprite的图片绘制，每一个都有一个自己的button区域方便被在被触摸时判断。

3.gameinfo.js

这部分代码实现的游戏分数的绘制，以及游戏结束时背景的绘制。

这里有一个新的函数 filltext('text-content',x,y)
是一个填充文字的函数，参数1是填充的文字，参数2，3是填充文字起始位置的横纵坐标。

4.music.js

这部分实现的是音效的管理：背景音，按键音等等。

	//新建一个背景音
    this.bgmAudio = new Audio()
    this.bgmAudio.loop = true
    this.bgmAudio.src  = 'audio/piano.mp3'
    //Audio是一个音频对象。loop是表示是否循环播放，src是音频文件路径。
    //当需要播放这个音频的时候调用audio对象的play()方法即可。

注意：音效管理器还使用了很简单的单例模式

let instance
if ( instance )
  return instance

instance = this

若有错误或者不解，欢迎评论区留言！