学习HTML5开发RPG游戏第三步>基本对象设计<二>

前面我们已经完成了父对象的编写，现在我们可以通过继承来实现各对象了。

1、游戏主窗体。

游戏主窗体只有一个，游戏中的对象显示都是在主窗体的画布上绘制的，代码如下：

var JForm = null;
JControls.Form = Class.create(JControls.Object, {//从父类继承
    context:null,//画布环境
    canvas:null,//画布
    webPosition:null,//主窗体在Web页面中得位置
    mousePosition:null,//鼠标在主窗体中得相对坐标
    initialize:function ($super, argname, argP, argWH) {
        $super(argname, {x:0, y:0}, argWH);
        this.webPosition = argP;
        JForm = this;
        this.setFocus();//默认主窗体获得焦点
        //创建画布对象
        var f = document.getElementById(this.name);
        if (f)  f.parentNode.removeChild(f);
        this.canvas = document.createElement("canvas");
        this.canvas.id = this.name;
        this.canvas.style.position = "absolute";
        this.canvas.style.left = this.webPosition.x + "px";
        this.canvas.style.top = this.webPosition.y + "px";
        this.canvas.style.backgroundColor = "black";
        this.canvas.width = parseInt(this.size.width * JZoom.x);
        this.canvas.height = parseInt(this.size.height * JZoom.y);
        //为画布添加事件
        this.canvas.onclick = function (event) {
            JForm.mousePosition = {x:parseInt((event.pageX - JForm.webPosition.x) / JZoom.x), y:parseInt((event.pageY - JForm.webPosition.y) / JZoom.y)};
            JForm.onControlClick.call(JForm);
        };
        this.canvas.onmousedown = function (event) {
            JForm.mousePosition = {x:parseInt((event.pageX - JForm.webPosition.x) / JZoom.x), y:parseInt((event.pageY - JForm.webPosition.y) / JZoom.y)};
            JForm.onControlMouseDown.call(JForm);
        };
        this.canvas.onmouseup = function (event) {
            JForm.mousePosition = {x:parseInt((event.pageX - JForm.webPosition.x) / JZoom.x), y:parseInt((event.pageY - JForm.webPosition.y) / JZoom.y)};
            JForm.onControlMouseUp.call(JForm);
        };
        this.canvas.ontouchdown = function (event) {
            JForm.mousePosition = {x:parseInt((event.pageX - JForm.webPosition.x) / JZoom.x), y:parseInt((event.pageY - JForm.webPosition.y) / JZoom.y)};
            JForm.onControlMouseDown.call(JForm);
        };
        this.canvas.ontouchup = function (event) {
            JForm.mousePosition = {x:parseInt((event.pageX - JForm.webPosition.x) / JZoom.x), y:parseInt((event.pageY - JForm.webPosition.y) / JZoom.y)};
            JForm.onControlMouseUp.call(JForm);
        };
        document.onkeydown = function (event) {
            event = window.event || event;
            JKeyCode = event.keyCode || event.which;
            JForm.onControlKeyDown.call(JForm);
        };
        document.onkeyup = function (event) {
            event = window.event || event;
            JKeyCode = event.keyCode || event.which;
            JForm.onControlKeyUp.call(JForm);
        };

        document.body.appendChild(this.canvas);//画布添加到web页面
        this.context = this.canvas.getContext('2d');
    }
});

2、文字

显示文字类代码如下：

JControls.Label = Class.create(JControls.Object, {//从父类继承
    text:"",//显示文本
    textPos:null,//用于调整文字在Label中得位置
    fontType:"normal", //文字属性,如:"normal","bold"等
    fontColor:null,//字体颜色
    textAlign:"left",//水平对齐：left，center，right
    textBaseline:"top", //竖直对齐：top，middle，bottom
    fontSize:10,//字体大小
    setText:function (text) {
        this.text = text;
        return this;
    },
    setTextPos:function (textPos) {
        this.textPos = textPos;
        return this;
    },
    setFontType:function (type) {
        this.fontType = type;
        return this;
    },
    setFontColor:function (color) {
        this.fontColor = color;
        return this;
    },
    setTextAlign:function(textAlign){
        this.textAlign=textAlign;
        return this;
    },
    setTextBaseline:function(textBaseline){
        this.textBaseline=textBaseline;
        return this;
    },
    setFontSize:function(fontSize){
        this.fontSize=fontSize;
        return this;
    },
    showing:function($super,x, y, w, h){//覆盖父类中showing方法
        $super();//执行父类中showing方法
        var _context = JForm.context;
        if (this.text) {
            _context.fillStyle = this.fontColor.data;
            _context.font = this.fontType + " " + parseInt(this.fontSize * (JZoom.y + JZoom.x) / 2) + "px serif";
            _context.textBaseline = this.textBaseline;
            _context.textAlign = this.textAlign;
            var x1,y1;
            if(_context.textAlign=="left"){
                x1= x + parseInt(this.textPos.x * JZoom.x);
            }else if(_context.textAlign=="center"){
                x1= x + parseInt(w/2);
            }else if(_context.textAlign=="right"){
                x1= x + w- parseInt(this.textPos.x * JZoom.x);
            }
            if(_context.textBaseline=="top"){
                y1=y + parseInt(this.textPos.y * JZoom.y);
            }else if(_context.textBaseline=="middle"){
                y1=y + parseInt(h/2);
            }else if(_context.textBaseline=="bottom"){
                y1=y +h- parseInt(this.textPos.y * JZoom.y);
            }
            _context.fillText(this.text,x1,y1, this.size.width);
        }
    },
    initialize:function ($super, argname, argP, argtext) {//覆盖父类中构造函数
        $super(argname, argP, {width:100, height:20});//执行父类中构造函数
        this.text = argtext;
        this.textPos = {x:2, y:2};
        this.fontSize = 15;
        this.fontColor = JColor.black;
    }
});

3、按钮

按钮类代码如下：

JControls.Button = Class.create(JControls.Object, {
    buttonLabel:null,//Label对象，用于显示按钮上的文字
    setText:function(text){
    this.buttonLabel.setText(text);
    },
    setSize:function($super,size){
        $super(size);
        if(size)this.buttonLabel.setSize({width:size.width,height:size.height});
    },
    initialize:function ($super, argname, argP, argWH, argimage) {
        $super(argname, argP, argWH);
        if (argimage)this.BGImage = argimage.data;//argimage.data就是预加载的图片数据
       
        this.buttonLabel=new JControls.Label(this.name+"_Label",{x:0,y:0})//创建了一个Label对象
            .setSize(argWH)  .setTextBaseline("middle").setTextAlign("center").setFontType("bold");
        this.addControlInLast([this.buttonLabel]);//添加到当前按钮子对象数组中
    }
});