目录
微信小游戏_China_Fighting——前言
微信小游戏_China_Fighting——基础支撑类(sprite、animation、pool)
微信小游戏_China_Fighting——npc类(enemy、mask、sars)
微信小游戏_China_Fighting——player类(hero、button)
微信小游戏_China_Fighting——runtime类(background、fstart1、fstart2、gameinfo、music)
微信小游戏_China_Fighting——lib类(symbol、weapp-adapter)及databus
微信小游戏_China_Fighting——main.js及index.js
微信小游戏_China_Fighting——game.js、game.json、project.config.json
微信小游戏_China_Fighting——后记
正文
本文主要讲解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
若有错误或者不解,欢迎评论区留言!