hanyeah-（十一）createjs游戏-游戏框架

18

2015
11

（十一）createjs游戏-游戏框架

之前的入门系列已经介绍过createjs的基础知识。

接下来，我们就来用createjs制做游戏。

建议先到文章的最后下载源码，对应源码来看。

解压后，目录结构如下：

createjs模板-目录.jpg

我们暂时没有用图片。目录下只有一个index.html和一堆js文件。

>>index.html

<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no"/> <meta name="description" content="createjs游戏" /> <title>createjs游戏-模板</title> <style> *{margin: 0px;padding: 0px;} </style> <script type="text/javascript" src="js/HGame.js"></script> <script type="text/javascript" src="js/HResources.js"></script> <script type="text/javascript" > window.onload=function(e){ HGame.initGame("gameMain"); } </script> </head> <body> <canvas class="gameMain" id="gameMain" height="800" width="480" style="background:#00cccc;">浏览器暂不支持canvas</canvas> </body> </html>

这句可以防止手机端双击时候页面缩放。

<canvas class="gameMain" id="gameMain" height="800" width="480" style="background:#00cccc;">浏览器暂不支持canvas</canvas>

这句定义一个canvas，设置id和宽高，这里要注意宽高用width、height，而不是style中的width、height。

这两句用来加载js文件，这里只加载了HGame.js和HResources.js，其余js文件都是通过代码来加载的，当然也可以直接用script标签来加载，各有利弊。

window.onload=function(e){ 
	HGame.initGame("gameMain");
}

这里就是游戏的入口了。

文档加载完成之后，我们调用了HGame.initGame("gameMain");其中gameMain是canvas的id(或class)，HGame.initGame方法是在HMain.js中定义的。接下来我们就来看HMain.js。

>>HMain.js

HGame是一个对象，HGame.data中定义了一些变量，用作全局变量，HGame.initGame方法中只有一句，new HMain(canvasId);new了一个HMain。

HMain是一个类（js中就是用function来作为类使用的）。

HMain用来控制游戏的基本流程。流程如下：

加载资源——>初始化——>游戏开始界面——>游戏界面——>游戏结束界面——>返回游戏开始界面

资源加载功能在HResources.js中实现，资源加载完成之后，初始化游戏界面，进入游戏逻辑循环；

整个游戏我们分为3个界面：开始界面、游戏界面、游戏结束界面。一开始显示开始界面，等待玩家点击开始按钮，进入游戏界面，游戏界面实现游戏逻辑，游戏结束，进入游戏结束界面，游戏结束界面等待用户点击重新开始，回到开始界面。

每一个界面都是用一个继承自createjs.Container的类来实现，每个界面逻辑完成之后通过发送事件来通知主界面。

具体实现可以看源码，并结合之前的教程。

>>HResources.js

//------------------HResources----------------------------- var HResources ={ data:[], cacheData:{}, preLoad:null, getResourceByTag:null } /** * 资源配置 */ HResources.data=[ {"type":"js","src":"../../lib/easeljs-0.8.0.min.js"} ,{"type":"js","src":"../../lib/tweenjs-0.6.0.min.js"} ,{"type":"js","src":"js/HUtils.js"} ,{"type":"js","src":"js/HMenuLayer.js"} ,{"type":"js","src":"js/HGameLayer.js"} ,{"type":"js","src":"js/HOverLayer.js"} ,{"type":"js","src":"js/HKeyBoard.js"} //,{"type":"img","src":"images/bg.jpg" , "tag":"bg"} //,{"type":"sound","src":"sounds/sound 279.mp3", "tag":"sound279"} ]; /** * 加载资源 */ HResources.preLoad=function(progress,complete){ var i=0; var len=HResources.data.length; var cache={}; progress(0); load(); function load(){ var obj=HResources.data[i]; console.log("加载："+obj.src); switch(obj.type){ case "img": var img=new Image(); cache[obj.tag]=img; img.src=obj.src; img.onload=onloaded; break; case "js": var script=document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", obj.src); document.head.appendChild(script); script.onload=onloaded; break; case "sound": var audio=document.createElement("audio"); audio.setAttribute("src", obj.src); document.body.appendChild(audio); cache[obj.tag]=audio; //audio.onload=onloaded; audio.addEventListener('canplaythrough', onloaded, true);//参考:http://zhidao.baidu.com/link?url=1m2MFz0OeUMbjb-rorvAC3V4t0Qyj94Vkfk5RGyyED9LAtyOHeJaZN1X2DD35W6SFp9vCW0yb8Qm14aefqWUdK audio.load(); break; } } function onloaded(e){ i++; e.target.removeEventListener('canplaythrough', onloaded, true);//?怎么移除侦听???? progress(i/len); if(i<len){ load(); } else{ HResources.cacheData=cache; complete(); } } } /** * 获取已加载的资源 */ HResources.getResourceByTag=function(tag){ return HResources.cacheData[tag]; }

HResources实现了加载资源，以及获取加载的资源。目前支持js，图片，mp3的加载。

HResources.data中配置要加载的资源。type是资源类别；src是资源路径，可以是相对路径也可以是绝对路径；tag用来获取资源，不要有重名的。

HResources.preLoad(progress,complete)启动加载资源。progress(percent),加载过程中回调，用来获取加载进度，参数是0-1；complete(),加载完成后调用。

HResources.getResourceByTag(tag)用来获取加载到的资源，参数就是资源配置中的tag，字符串类型。

由于水平有限，不敢保证兼容新，所以如果是商业项目，建议使用createjs中的PreloadJS来加载资源。

>>HUtils.js

HUtils.js中是一些常用的工具函数，等用到了再说。

>>HKeyBoard.js

HKeyBoard.js是用来管理键盘事件的，pc上有用，移动端一般不会用键盘操作，可以去掉。

>>HMenuLayer.js

//------------------HMenuLayer----------------------------- var HMenuLayer = function(){ var s=this; s.Container_constructor(); var bg = new createjs.Shape(); bg.graphics.beginFill("#cccc00").drawRect(0, 0, 480, 800); s.addChild(bg); var tf = HUtils.createText("开始界面 \n点击任意位置开始","tf","#ffffff","24px Arial",300,50,100,300,"left"); s.addChild(tf); s.addEventListener("click",clickHandler); function clickHandler(e){ var event = new createjs.Event("complete"); s.dispatchEvent(event); s.hide(); } } var p=createjs.extend(HMenuLayer, createjs.Container); p.show=function(){ var s=this; s.visible=true; } p.hide=function(){ var s=this; createjs.Tween.get(s,{override:true}) .to({alpha:0,visible:false},500) .call(handleComplete); function handleComplete(){ //Tween完成 s.alpha=1; } } createjs.promote(HMenuLayer,"Container");

HMenuLayer.js定义了开始界面，继承自createjs.Container，定义了一个show和一个hide方法，从名字就可以看出，分别实现显示和隐藏的功能。为了效果华丽，用到了createjs.Tween来缓动。

用new createjs.Shape()定义了一个纯色的背景，用HUtils.createText()创建了一个文本对象。用this来侦听点击事件，点击之后，发送complete事件。

>>HOverLayer.js

//------------------HOverLayer----------------------------- var HOverLayer = function(){ var s=this; s.Container_constructor(); var bg = new createjs.Shape(); bg.graphics.beginFill("#000000").drawRect(0, 0, 480, 800); s.addChild(bg); bg.alpha=0.8; var tf = HUtils.createText("游戏结束界面 \n点击任意位置回到游戏开始界面","tf","#ffffff","24px Arial",300,50,100,300,"left"); s.addChild(tf); s.addEventListener("click",clickHandler); function clickHandler(e){ var event = new createjs.Event("restart"); s.dispatchEvent(event); s.hide(); } } var p=createjs.extend(HOverLayer, createjs.Container); p.show=function(){ var s=this; s.visible=true; } p.hide=function(){ var s=this; createjs.Tween.get(s,{override:true}) .to({alpha:0,visible:false},500) .call(handleComplete); function handleComplete(){ //Tween完成 s.alpha=1; } } createjs.promote(HOverLayer,"Container");

HOverLayer.js定义了游戏结束界面，和HMenuLayer.js实现起来很像。

>>HGameLayer.js

//------------------MenuLayer----------------------------- var HGameLayer = function(){ var s=this; s.Container_constructor(); var bg = new createjs.Shape(); bg.graphics.beginFill("#cc00cc").drawRect(0, 0, 480, 800); s.addChild(bg); var tf = HUtils.createText("游戏界面 \n点击任意位置结束游戏","tf","#000000","24px Arial",300,50,100,300,"left"); s.addChild(tf); s.addEventListener("click",clickHandler); function clickHandler(e){ var event = new createjs.Event("complete"); s.dispatchEvent(event); } } var p=createjs.extend(HGameLayer, createjs.Container); p.show=function(){ var s=this; s.visible=true; } p.start=function(){ console.log("开始游戏"); } createjs.promote(HGameLayer,"Container");

这个是最关键的，游戏逻辑的实现全在这里。

目前我们也只是创建了一个背景，一个文本对象，只要玩家点击一下，游戏就结束了。当然你也可以改成点击n下，游戏结束。

到目前为止，我们已经实现了一个完整的游戏。

后面我们将在此基础上稍作修改，实现一些复杂的游戏。

在线演示

源码打包下载