08、开源游戏

Wesley13
• 阅读 429

资源加载器 resourceloader.js

初始化

资源加载器用于读取图片和音乐,在前面的代码(main.js)中,我们初始化了它,下面我们详细说下,因为它在以后中会经常用到,游戏中所有的资源都由它来读取。

$(window).load(function() {
    resourceloader.init();
    sounds.init();
    if (resourceloader.loaded){
        sounds.bgMusic();
    } else {
        resourceloader.onload = sounds.bgMusic;
    }
    if(store.get('data')){
        $("#checkbullet").css({"top":store.get('data').checkbullety});
    }else{
        store.set('data',{hero:"hero1",checkbullety:"160px",task:0});
    }
});

资源加载器都干什么事情呢?读取资源,这个是最终我们想要干的事,我们还得考虑下,读取完了之后怎么办?图片也分很多类型,音乐同样如此,常用的.mp3也不是所有的浏览器都能直接播放的,下面是几种流行的音频格式被浏览器支持的情况(来源于网络,未全部测试,也许最新版本中已经有所变化,也说不定)。

08、开源游戏

虽然可以在

    init:function(){
        var mp3,ogg,wav;
        var audio = document.createElement('audio');
        if (audio.canPlayType) {
              mp3 = "" != audio.canPlayType('audio/mpeg');
              ogg = "" != audio.canPlayType('audio/ogg; codecs="vorbis"');
        wav = "" != audio.canPlayType('audio/wav');
        } else {
            mp3 = false;
            ogg = false;
        wav = false;
        }
        resourceloader.audioExt = ogg?".ogg":mp3?".mp3":wav?".wav":undefined;
    },

我们通过audio.canPlayType方法检查支持的情况,然后保存该音频的扩展名,以后要读取某音频,只需通过该文件的名称就可以了(需要我们准备多格式文件)。

canPlayType() 方法可返回下列值之一(来源http://www.w3school.com.cn/tags/av\_met\_canplaytype.asp):"probably" - 浏览器最可能支持该音频/视频类型;"maybe" - 浏览器也许支持该音频/视频类型;"" - (空字符串)浏览器不支持该音频/视频类型。

加载图片音频

这里我不在详细说明了,在js中使用new Image(),然后加载完后,他调用onload,我实现自己的onload方法就可以了。音频类似使用new Audio();然后我们监听canplaythrough事件,然后指定我们自己的方法就可以了。

        var image = new Image();
        image.src = url;
        image.onload = resourceloader.itemLoaded;

var audio = new Audio();
    audio.src = url+resourceloader.audioExt;
    audio.addEventListener("canplaythrough", resourceloader.itemLoaded, false);

加载完毕,resourceloader.itemLoaded方法

通常我们加载完毕后,可能要执行某一操作,所以这里我们实现一个钩子方法,只要定义了这个方法,我们就执行一下,这个我感觉很强大,呵呵,以前在开发开源eternal框架时,在框架初始化时也定义了类似的方法,这样就可以动态的扩展这个框架。对于我们来说,资源加载器他有这样一个回调函数,如果ajax的回调一样。在图片和音频加载完后都调用itemLoaded方法。我们看下代码:

        if (resourceloader.loadedCount >= resourceloader.totalCount){
            resourceloader.loaded = true;
            if(resourceloader.onload){
                resourceloader.onload();
                resourceloader.onload = undefined;
            }
        }

这里边有2个变量,已经加载的资源数目loadedCount和总资源数据totalCount,全部加载完后,我们就调用钩子方法,如果有的话。在我们播放背景音乐时就是使用它的,main.js中的:

if (resourceloader.loaded){
        sounds.bgMusic();
    } else {
        resourceloader.onload = sounds.bgMusic;
    }

如果音乐已经全部加载完,则播放背景音乐:bgMusic,没有则把播放方法赋给钩子,让资源加载去调用。还有singlegame.js中的初始化,同样如此:

 if (resourceloader.loaded){
        singlegame.start();
     } else {
        resourceloader.onload = singlegame.start;
     }

小结

我们把资源加载器设计成一个通用的功能,并主要分成3个功能:初始化、加载、完毕后处理。这样我们不必操心各浏览器的音频兼容问题,而且也体验到了回调函数的强大,如做等待场景的退出功能,都可以用到。

声音处理

我们开发了一个专门的对象来播放声音,sounds.js。看一下代码:

var sounds = {
    list:{
        "background":["desolate"]
    },
    loaded:{},
    init: function(){
        for(var soundName in sounds.list){
            var sound = {};
            sound.audioObjects = [];
            for (var i=0; i < sounds.list[soundName].length; i++) {
                sound.audioObjects.push(resourceloader.loadSound('audio/' + sounds.list[soundName][i]));
            };            
            this.loaded [soundName] = sound;
        }        
    },
    bgMusic:function(){
        var sound = sounds.loaded["background"];
        if(sound && sound.audioObjects && sound.audioObjects.length>0){
            var n = Math.floor(Math.round(sound.audioObjects.length));
            sound.audioObjects[n-1].play();
        }
    }
};

list音乐列表,init使用资源加载器加载音乐,bgMusic播放背景音乐。大家可能会想,游戏中的声音太多了,要都放在list里,然后加载?这里我想有2种情况,1、音频真的不多;2、音频真的很多,对于1那就把音频都放这,没什么问题啊,对于2肯定不行,胡子就属于2的情况。这里的list只是一些通用的音频,如背景音乐、抢声、大炮声、坦克声等,其他的音频则放到task.js中,即每个任务(可以理解为游戏的关卡)中,当然也有个问题就是,最大的任务,也许也有很多的音频,不知道大家有没有好的办法?我的想法是把这个问题留到最后阶段的来处理(前面章节中提到游戏的开发阶段),呵呵。

bgMusic是随机播放背景音乐,目前只有一个音乐desolate,最后我想应该有3个,即荒凉感觉的一个,让人兴奋的一个,战斗时一个。后面会增加其他播放方法,如随机播放(非背景音乐的某类音频)、顺序播放(同随机)等。

小结

音频的实现我们同资源加载器类似,实现3个功能:定义(list)、初始化(init)、播放(bgMusic等方法)。

总结

资源加载器和音频处理,我们实现的比较通用些,或者可以说模块化,一个游戏应该有清晰的代码结构,然后组装这些模块,协调这些模块,来实现游戏的功能,就像胡子游戏中的 大当家、四梁八柱、崽子(兵)一样,他们有共同的目的,又有不同的分工,由大当家领导他们去砸窑,不管软的硬的,都是无往不利,害得地主老财,天天提心吊胆,呵呵。

下次中我会总结一下游戏开始前的这个初始化阶段,之后就是到游戏主界面了。

{弄了个笑话,在群里,以为别人管我要源码那,结果是没人理我,哎。不管怎么样,代码已经提前上传到oschina啦,google的不在提交了(老是提示不能连接,有问题)。}

未完待续。。。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Eclipse插件开发_学习_00_资源帖
一、官方资料 1.eclipseapi(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fhelp.eclipse.org%2Fmars%2Findex.jsp%3Ftopic%3D%252Forg.eclipse.platform.doc.isv%252Fguide%2
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这