HTML5遊戲框架cnGameJS開發實錄-核心函式模組篇的程式碼實例
返回目錄
1.cnGameJs框架的程式碼組織
核心函數模組，主要的作用是為之後的框架開發和用戶對遊戲的開發提供方便，整個框架在一個閉包之中，避免對全局作用域的污染。之後每個不同的模組分別在自己的閉包內，使不同模組的分割更清晰。因此我們框架的模組劃分會是這樣：
(function(win,undefined){//最大的闭包
var fun1=function(){//各模块公用的方法
}
//这里放各个小模块，它们有各自的闭包
}(window,undefined)登入後複製
那麼我們要如何再劃分其他小模組呢？為了方便各個小模組有各自的命名空間，並且在各自的閉包中，我們新增一個register方法，該方法可以在不同命名空間下擴展自己的模組 ，我們需要傳入的首先是命名空間的名稱，該方法為我們生成該命名空間對象，之後我們執行自己的方法，為命名空間對象執行相應的擴展操作：
/**
*生成命名空间,并执行相应操作
**/
register:function(nameSpace,func){
var nsArr=nameSpace.split(".");
var parent=win;
for(var i=0,len=nsArr.length;i<len;i++){
(typeof parent[nsArr[i]]=='undefined')&&(parent[nsArr[i]]={});
parent=parent[nsArr[i]];
}
if(func){
func.call(parent,this);
}
return parent;
}登入後複製
如上，首先可以把傳入的命名空間字串分割，然後產生對象，之後執行使用者傳入的函數進行擴充操作，如下：
cnGame.register("cnGame.core",function(){this.func=function(){}});登入後複製
這樣就可以產生core模組，並且為該模組添加func方法，那麼我們框架的程式碼組織看起來將是這樣：
(function(win,undefined){
var cnGame={
register:function(nameSpace,handler){
}
}
/*core模块*/
cnGame.register("core",function(){
//添加该模块内容
})
/*input模块*/
cnGame.register("input",function(){
//添加该模块内容
})
win["cnGame"]=cnGame;
})(window,undefined);登入後複製
2.框架的初始化
canvas對象，context對象，canvas的位置，尺寸等，我們可以先看看初始化的函數：
/**
*初始化
**/
init:function(id,options){
options=options||{};
this.canvas = this.core.$(id||"canvas");
this.context = this.canvas.getContext('2d');
this.width = options.width||800;
this.height = options.height||600;
this.title = this.core.$$('title')[0];
canvasPos=getCanvasPos(this.canvas);
this.x=canvasPos[0]||0;
this.y=canvasPos[1]||0;
this.canvas.width=this.width;
this.canvas.height=this.height;
this.canvas.style.left=this.x +"px";
this.canvas.style.top=this.y +"px";
},登入後複製
setParent，並疊加offsetLeft和offsetTop，從而得到canvas在頁面的位置。這個函數原始碼如下：
/**
*获取canvas在页面的位置
**/
var getCanvasPos=function(canvas){
var left = 0;
var top = 0;
while (canvas.offsetParent) {
left += canvas.offsetLeft;
top += canvas.offsetTop;
canvas = canvas.offsetParent;
}
return [left, top];
}登入後複製
3.工具函數模組
# 之後我們就可以用上面的register方法加入第一個模組：core模組。這個模組也很簡單，主要功能就是新增工具函數，方便後續的框架開發和使用者的遊戲開發。這裡包含了一些常用的工具函數，例如透過id取得元素，原型繼承，物件複製，事件綁定等等。注意如果涉及不同瀏覽器的兼容問題，我們可以一開始就根據瀏覽器設定function，而不是每次都判斷瀏覽器類型再進行相應操作，效率會更加高。拿事件綁定進行範例：
/**
事件绑定
**/
this.bindHandler=(function(){
if(window.addEventListener){
return function(elem,type,handler){
elem.addEventListener(type,handler,false);
}
}
else if(window.attachEvent){
return function(elem,type,handler){
elem.attachEvent("on"+type,handler);
}
}
})();登入後複製
/**
*
*基本工具函数模块
*
**/
cnGame.register("cnGame.core",function(cg){
/**
按id获取元素
**/
this.$=function(id){
return document.getElementById(id);
};
/**
按标签名获取元素
**/
this.$$=function(tagName,parent){
parent=parent||document;
return parent.getElementsByTagName(tagName);
};
/**
按类名获取元素
**/
this.$Class=function(className,parent){
var arr=[],result=[];
parent=parent||document;
arr=this.$$("*");
for(var i=0,len=arr.length;i0){
result.push(arr[i]);
}
}
return result;
};
/**
事件绑定
**/
this.bindHandler=(function(){
if(window.addEventListener){
return function(elem,type,handler){
elem.addEventListener(type,handler,false);
}
}
else if(window.attachEvent){
return function(elem,type,handler){
elem.attachEvent("on"+type,handler);
}
}
})();
/**
事件解除
**/
this.removeHandler=(function(){
if(window.removeEventListerner){
return function(elem,type,handler){
elem.removeEventListerner(type,handler,false);
}
}
else if(window.detachEvent){
return function(elem,type,handler){
elem.detachEvent("on"+type,handler);
}
}
})();
/**
获取事件对象
**/
this.getEventObj=function(eve){
return eve||win.event;
};
/**
获取事件目标对象
**/
this.getEventTarget=function(eve){
var eve=this.getEventObj(eve);
return eve.target||eve.srcElement;
};
/**
禁止默认行为
**/
this.preventDefault=function(eve){
if(eve.preventDefault){
eve.preventDefault();
}
else{
eve.returnValue=false;
}
};
/**
获取对象计算的样式
**/
this.getComputerStyle=(function(){
var body=document.body;
if(body.currentStyle){
return function(elem){
return elem.currentStyle;
}
}
else if(document.defaultView.getComputedStyle){
return function(elem){
return document.defaultView.getComputedStyle(elem, null);
}
}
})();
/**
是否为undefined
**/
this.isUndefined=function(elem){
return typeof elem==='undefined';
},
/**
是否为数组
**/
this.isArray=function(elem){
return Object.prototype.toString.call(elem)==="[object Array]";
};
/**
是否为Object类型
**/
this.isObject=function(elem){
return elem===Object(elem);
};
/**
是否为字符串类型
**/
this.isString=function(elem){
return Object.prototype.toString.call(elem)==="[object String]";
};
/**
是否为数值类型
**/
this.isNum=function(elem){
return Object.prototype.toString.call(elem)==="[object Number]";
};
/**
*复制对象属性
**/
this.extend=function(destination,source,isCover){
var isUndefined=this.isUndefined;
(isUndefined(isCover))&&(isCover=true);
for(var name in source){
if(isCover||isUndefined(destination[name])){
destination[name]=source[name];
}
}
return destination;
};
/**
*原型继承对象
**/
this.inherit=function(child,parent){
var func=function(){};
func.prototype=parent.prototype;
child.prototype=new func();
child.prototype.constructor=child;
child.prototype.parent=parent;
};
}); 登入後複製
以上是HTML5遊戲框架cnGameJS開發實錄-核心函式模組篇的程式碼實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前
By DDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前
By DDD
Inzoi：如何申請學校和大學
4 週前
By DDD
如何修復KB5055518無法在Windows 10中安裝？
2 週前
By DDD
Roblox：Dead Rails - 如何召喚和擊敗Nikola Tesla
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
