學習HTML5開發RPG遊戲第三步>基本對象設計

通過分析基本對象主要分爲以下幾類：

1、遊戲主窗體

2、文字

3、按鈕

4、圖片

5、動畫

6、容器

7、對話框

8、聲音

9、時鐘

前面七種都是可視的。所以爲他們寫一個父類，通過繼承以提高代碼利用率。

後兩種沒有什麼共同點，只能單獨寫了。

父類代碼如下：

var JControls = {};

JControls.Object= Class.create({
    name:null,//對象名稱，需唯一
    position:null, //絕對位置{x:0,y:0}
    alpha:null,//透明度
    moveStep:null, //移動步伐{x:0,y:0}
    canMove:true, //是否可移動
    size:null, //對象長寬{width:0,height:0}
    blockAngle:null, //旋轉角度
    rotationStep:null, //旋轉步伐
    blockInvert:null,//是否反轉
    bgColor:null,//背景顏色
    BGColorAlpha:null,//背景顏色透明度
    BGImage:null,//背景圖片
    BGImageAlpha:null,//背景透明度
    BGImagePosition:null,//背景圖片開始顯示位置
    BGImageSize:null,//背景圖片顯示的長寬
    focus:null,//是否爲焦點
    controls:null,//子對象數組
    parent:null,//父對象
    relativePosition:null, //與父對象的相對位置
    enabled:null,//是否爲激活狀態
    visible:null,//是否顯示
    showImageData:null,//該對象以及其子對象的緩存圖片數據
    isHighLight:null,//是否高亮
    setSize:function (size) {//設置寬高
        this.size = size;
        return this;
    },
    setBGColor:function (bgColor) {//設置背景顏色
        this.BGColor = bgColor;
        return this;
    },
    setBGImage:function (image) {//設置背景圖片
        this.BGImage = image.data;
        this.BGImagePosition={x:0,y:0};
        this.BGImageSize={width:image.cellSize.width,height:image.cellSize.height};
        return this;
    },
    setRelativePosition:function (relativePosition) {//設置與父對象的相對位置
        this.relativePosition = relativePosition;
        return this;
    },
    setFocus:function(fun){//獲取焦點
        if(fun)fun();
        if(JFocusControl)JFocusControl.lostFocus();
        this.focus=true;
        JFocusControl=this;
    },
    lostFocus:function(){//失去焦點
        this.focus=false;
        JFocusControl=null;
    },
    pointInBlock:function (e, _this) {//判斷_this對象是否包含座標e
        if (!_this)_this = this;
        if (e.x >= _this.position.x && e.x < _this.position.x + _this.size.width && e.y >= _this.position.y && e.y < _this.position.y + _this.size.height) return true;
        else return false;
    },
    onControlClick:function () {//點擊對象時，會調用該函數
        if (!this.visible || !this.enabled)return false;
        for (var i = this.controls.length - 1; i >= 0; i--) {
            if (this.controls[i].pointInBlock(JForm.mousePosition, this.controls[i])
                && this.controls[i].onControlClick.call(this.controls[i])) return true;
        }
        if (this.onClick && this.onClick())return true;//如果有自定義點擊事件並且執行後返回true，則返回true停止遞歸，結束點擊事件
        else return false;//返回false繼續遍歷
    },
    onControlMouseDown:function () {//點擊對象時，鼠標鍵按下會調用該函數
        if (!this.visible || !this.enabled)return false;
        for (var i = this.controls.length - 1; i >= 0; i--) {
            if (this.controls[i].pointInBlock(JForm.mousePosition, this.controls[i])
                && this.controls[i].onControlMouseDown.call(this.controls[i])) return true;
        }
        if (this.onMouseDown && this.onMouseDown())return true;
        else return false;
    },
    onControlMouseUp:function () {//點擊對象時，鼠標鍵彈起會調用該函數
        if (!this.visible || !this.enabled)return false;
        for (var i = this.controls.length - 1; i >= 0; i--) {
            if (this.controls[i].pointInBlock(JForm.mousePosition, this.controls[i])
                && this.controls[i].onControlMouseUp.call(this.controls[i])) return true;
        }
        if (this.onMouseUp && this.onMouseUp())return true;
        return false;
    },
    onControlKeyDown:function () {//鍵盤按下時，會調用該函數
        if (!this.visible || !this.enabled)return false;
        for (var i = this.controls.length - 1; i >= 0; i--) {
            if (this.controls[i].onControlKeyDown.call(this.controls[i])) return true;
        }
        if (this.onKeyDown && this.onKeyDown())return true;
        else return false;
    },
    onControlKeyUp:function () {//鍵盤彈起時，會調用該函數
        if (!this.visible || !this.enabled)return false;
        for (var i = this.controls.length - 1; i >= 0; i--) {
            if (this.controls[i].onControlKeyUp.call(this.controls[i])) return true;
        }
        if (this.onKeyUp && this.onKeyUp())return true;
        else return false;
    },
    onClick:null,//自定義點擊事件
    onMouseDown:null,//自定義鼠標鍵按下事件
    onMouseUp:null,//自定義鼠標鍵彈起事件
    onKeyDown:null,//自定義鍵盤按下事件
    onKeyUp:null,//自定義鍵盤彈起事件
    addControlInLast:function (aObj) {//把對象數組aObj加在子對象數組後面
        for (var i = 0; i < aObj.length; i++) {
            if (aObj[i]) {
                var length = this.controls.length;
                this.controls[length] = aObj[i];
                this.controls[length].parent = this;
                this.controls[length].position = {x:this.position.x + this.controls[length].relativePosition.x,
                    y:this.position.y + this.controls[length].relativePosition.y};
            }
        }
    },
    removeControl:function (objName) {//根據對象名稱刪除子對象數組中的對象
        for (var i = 0; i < this.controls.length; i++) {
            if (objName == this.controls[i].name) {
                this.controls[i] = null;
                for (var j = i; j < this.controls.length; j++) {
                    this.controls[j] = this.controls[j + 1];
                }
                this.controls.length = this.controls.length - 1;
                break;
            }
        }
    },
    remove:function () {//刪除當前對象
        if (this.parent) {
            this.parent.removeControl.call(this.parent, this.name);
        } else {
            this.name = null;
        }
    },
    clearControls:function () {//清空子對象數組
        this.controls = [];
    },
    saveShowImageData:function () {//保存該對象以及其子對象的緩存圖片數據
        var w = parseInt(this.size.width * JZoom.x), h = parseInt(this.size.height * JZoom.y);
        var relativePosition = this.relativePosition;
        var parent = this.parent;
        this.parent = null;
        this.relativePosition = {x:0, y:0};
        JForm.canvas.width = w;
        JForm.canvas.height = h;
        this.showImageData = null;
        this.show();
        this.showImageData = JFunction.getImageData(JForm.context, this.relativePosition, {width:w, height:h});
        this.parent = parent;
        this.relativePosition = relativePosition;
        JForm.canvas.width = parseInt(JForm.size.width * JZoom.x);
        JForm.canvas.height = parseInt(JForm.size.height * JZoom.y);
    },
    beginShow:function () {//顯示該對象前執行
        this.position.x = this.relativePosition.x;
        this.position.y = this.relativePosition.y;
        if (this.parent) {
            this.position.x += this.parent.position.x;
            this.position.y += this.parent.position.y;
        }
    },
    showing:function(x, y, w, h){//顯示該對象時執行
        for (var member = 0; member < this.controls.length; member++) {
            this.controls[member].show.call(this.controls[member]);
        }
        if (!this.enabled) {
            var imageData = JFunction.getImageData(JForm.context, {x:x, y:y},{width:w, height:h});
            JFunction.drawImageData(JForm.context, JFunction.changeToGray(imageData), {x:x, y:y});
        }
    },
    endShow:function () {//顯示該對象後執行
        if (this.rotationStep) {
            this.blockAngle += this.rotationStep;
            this.blockAngle = this.blockAngle % 360;
        }
        if (this.canMove && this.moveStep) {
            this.relativePosition.x += this.moveStep.x;
            this.relativePosition.y += this.moveStep.y;
        }
    },
    show:function () {//顯示該對象
        this.beginShow();
        if (this.visible) {
            if (this.showImageData) {//如果有緩存數據，直接繪圖
                JFunction.drawImageData(JForm.context, this.showImageData,
                    {x:parseInt(this.position.x * JZoom.x), y:parseInt(this.position.y * JZoom.y)});
            } else {
                var _context = JForm.context;
                if (this.name == null)return;
                var x = parseInt(this.position.x * JZoom.x);
                var y = parseInt(this.position.y * JZoom.y);
                var w = parseInt(this.size.width * JZoom.x);
                var h = parseInt(this.size.height * JZoom.y);
                if (_context) {
                    if(this.alpha<1){//設置畫布透明度
                        _context.save();
                        _context.globalAlpha=this.alpha;
                    }
                    if(this.blockInvert){//翻轉畫布
                        _context.save();
                        _context.translate(x + parseInt(w / 2),0);
                        _context.scale(-1, 1);
                        _context.translate((x + parseInt(w / 2))*-1,0);
                    }
                    if(this.blockAngle){//旋轉畫布
                        _context.save();
                        _context.translate(x + parseInt(w / 2), y + parseInt(h / 2));
                        x = -parseInt(w / 2);
                        y = -parseInt(h / 2);
                        _context.rotate(this.blockAngle * Math.PI / 180);
                    }
                    if (this.BGColor) {//繪製背景顏色
                        _context.save();
                        _context.globalAlpha=this.alpha*this.BGColorAlpha;
                        _context.fillStyle = this.BGColor.data;
                        _context.fillRect(x, y, w, h);
                        _context.restore();
                    }
                    if (this.BGImage) {//繪製背景圖片
                        _context.save();
                        _context.globalAlpha=this.alpha*this.BGImageAlpha;
                        _context.drawImage(this.BGImage, this.BGImagePosition.x, this.BGImagePosition.y, this.BGImageSize.width,
                            this.BGImageSize.height, x, y, w, h);
                        _context.restore();
                    }
                    this.showing&&this.showing(x, y, w, h);//如果有showing事件，則執行該事件
                    if(this.blockAngle) _context.restore();//如果畫布有旋轉則恢復到旋轉前狀態
                    if(this.blockInvert){//如果畫布有翻轉則恢復到翻轉前狀態
                        _context.translate(JForm.size.width-x - parseInt(w / 2),0);
                        _context.scale(-1, 1);
                        _context.translate((JForm.size.width-x - parseInt(w / 2))*-1,0);
                        _context.restore();
                    }
                    if(this.alpha<1)_context.restore();//恢復畫布透明度
                }
            }
        }
        this.endShow();
    },
    initialize:function ( argname, argP, argWH) {//類構造函數，初始化數據
        this.name = argname;
        this.position = argP;
        this.size = argWH;
        this.BGColorAlpha = 1.0;
        this.BGImageAlpha = 1.0;
        this.moveStep = {x:0, y:0};
        this.fontColor=JColor.black;
        this.textPos={x:0, y:0};
        this.alpha=1.0;
        this.relativePosition = argP;
        this.controls = [];
        this.parent = null;
        this.enabled = true;
        this.visible = true;
    }
});

 

其中JColor定義如下：

var JColor = {
    white:{data:"#FFFFFF", r:255, g:255, b:255},
    black:{data:"#000000", r:0, g:0, b:0},
    red:{data:"#FF0000", r:255, g:0, b:0},
    green:{data:"#00FF00", r:0, g:255, b:0},
    blue:{data:"#0000FF", r:0, g:0, b:255},
    gray:{data:"#999999", r:144, g:144, b:144}
};