HTML5 게임 프레임워크 cnGameJS 개발 기록 - 핵심 기능 모듈의 코드 예시

디렉토리로 돌아가기

1.cnGameJs 프레임워크 코드 구성

핵심기능 모듈의 주요 기능은 후속 프레임워크 개발과 사용자 게임 개발을 용이하게 하는 것입니다. 전역 범위의 오염을 방지하기 위해 전체 프레임워크가 폐쇄되어 있습니다. 그 후에는 각각의 서로 다른 모듈이 자체적으로 닫히므로 서로 다른 모듈의 분리가 더 명확해집니다. 따라서 우리 프레임워크의 모듈 분할은 다음과 같습니다.

(function(win,undefined){//最大的闭包

var fun1=function(){//各模块公用的方法
}

//这里放各个小模块，它们有各自的闭包

}(window,undefined)

그렇다면 다른 작은 모듈은 어떻게 분할할까요? 각각의 작은 모듈이 자신만의 네임스페이스 와 자체 클로저 를 갖도록 하기 위해, 우리는 서로 다른 네임스페이스 에서 자체 모듈을 확장할 수 있는 등록 메소드를 추가했습니다. 전달해야 하는 것은 네임스페이스의 이름입니다. 이 메소드는 네임스페이스 객체를 생성한 다음 자체 메소드를 실행하여 네임스페이스 객체에 대한 해당 확장 작업을 수행합니다.

/**
         *生成命名空间,并执行相应操作
        **/
        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]]==&#39;undefined&#39;)&&(parent[nsArr[i]]={});
                parent=parent[nsArr[i]];
            }
            if(func){
                func.call(parent,this);    
            }
            return parent;
        }

위와 같이 먼저 들어오는 네임스페이스 문자열 을 분할한 다음 개체를 생성할 수 있고 사용자가 전달한 함수를 다음과 같이 확장 작업을 위해 실행할 수 있습니다.

cnGame.register("cnGame.core",function(){this.func=function(){}});

이런 식으로 핵심 모듈을 생성하고 모듈에 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. 프레임워크

프레임워크 초기화 , 저장해야 할 개체는 캔버스 개체, 컨텍스트 개체, 캔버스 위치, 크기 등입니다. 먼저 초기화를 살펴볼 수 있습니다. 함수:

/**
         *初始化
        **/
        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";
            
        },

매우 간단합니다. 나중에 사용할 수 있도록 일부 초기화 값을 저장하면 됩니다. 또한, 캔버스의 위치 매개변수를 가져오기 위해 getCanvasPos 메소드를 호출한 것을 알 수 있습니다. 이 매개변수는 객체의 offsetParent를 가져오기 위해 반복하고, offsetLeft와 offsetTop을 중첩하여 캔버스의 위치를 ​​가져옵니다. 페이지에서. 이 함수의 소스 코드는 다음과 같습니다:

/**
    *获取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. 도구 함수 모듈

그 후 위의 등록 방법을 사용하여 첫 번째 모듈을 추가할 수 있습니다. 기준 치수. 이 모듈의 주요 기능은 후속 프레임워크 개발 및 사용자 게임 개발을 용이하게 하는 도구 기능을 추가하는 것입니다. 다음은 ID별 요소 가져오기, 프로토타입 상속 , 객체 복사 , 이벤트 바인딩 등 일반적으로 사용되는 도구 기능입니다. 참고로, 다른 브라우저와 호환성 문제가 있는 경우, 매번 브라우저 유형을 판단하는 대신 처음부터 브라우저에 따라 기능을 설정한 다음 해당 작업을 수행할 수 있으므로 더욱 효율적입니다. 이벤트 바인딩을 예로 들어보겠습니다.

/**
        事件绑定
        **/
        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);
                            }
                        }
        })();

브라우저 특성에 따라 다른 기능을 미리 반환하므로 이후 사용 시 브라우저 특성을 판단할 필요가 없으며 효율성이 향상됩니다.

첨부된 모든 도구 기능의 소스 코드는 매우 간단하므로 모듈에 대해서는 자세히 설명하지 않습니다.

아아아아

위 내용은 HTML5 게임 프레임워크 cnGameJS 개발 기록 - 핵심 기능 모듈의 코드 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!