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

4、图片

该对象用于显示图片，代码如下：

JControls.PictureBox = Class.create(JControls.Object, {
    picture:null,//图片数据
    picAlpha:null,//t透明度
    picState:null,//显示方式（flex，cut）
    picPosition:null,//cut方式下，从该坐标开始截取图片数据
    picSize:null,//cut方式下，截取图片的长宽
    initialize:function ($super, argname, argP, argWH, argimage) {
        $super(argname, argP, argWH);
        if(argimage){
            this.picture = argimage.data;
            this.picSize={width:argimage.cellSize.width,height:argimage.cellSize.height};
        }
        this.picAlpha=1.0;
        this.picState = "cut";
        this.picPosition={x:0,y:0};
    },
    setPicture:function(image,position){//设置该对象图片属性
        this.picture=image.data;
        this.picPosition=position;
        this.picSize={width:image.cellSize.width,height:image.cellSize.height};
        return this;
    },
    showing:function ($super, x, y, w, h){//覆盖父类中showing函数
        var _context=JForm.context;
        if(this.picture){
            _context.save();
            _context.globalAlpha=this.alpha*this.picAlpha;
            if (this.picState == "flex") {
                _context.drawImage(this.picture, 0, 0, this.picture.width, this.picture.height, x, y, w, h);
            }else if (this.picState == "cut") {
                _context.drawImage(this.picture, this.picPosition.x, this.picPosition.y, this.picSize.width,
                    this.picSize.height, x, y, w, h);
            }
            _context.restore();
        }
        if (this.selected) {
            _context.strokeStyle = JColor.red.data;
            _context.lineWidth = 1;
            _context.strokeRect(x + _context.lineWidth, y + _context.lineWidth,
                w - _context.lineWidth*2, h - _context.lineWidth*2);
        }
        $super(x, y, w, h);//执行父类中showing函数
    }
});

5、动画

该对象显示的动画由多张图组合而成，所以动画使用的图片是由多张小图合成的大图。

动画资源定义如下：

var ResourceData= {
    Images:{
        //path：文件相对路径，picNum:当前图片中宽和高包含的小图数，cellSize:小图片的宽和高，data：存放加载的图片数据。
        ZS1:{path:"images/battle/ZS1.png", picNum:{WNum:4,HNum:8},cellSize:{width:81,height:81}, data:null}
    },

    Animation:{
        //imageName:资源中图片的Key值，动画起始位置（小图），allPlayNum：动画小图数，GHz：播放频率
        ZS1_battle:{imageName:"ZS1",beginPoint:{WNum:0,HNum:0},allPlayNum:4,GHz:3}
    }
}

动画类代码如下：

JControls.AnimationBox = Class.create(JControls.Object, {
    animationName:null,//动画资源key值
    animationPlayNum:null,//当前要显示的动画图片编号
    animationTime:null,//每次显示时计数加1
    animationOffset:null,//偏移量
    loop:null,//是否循环播放动画
    stopPlayAnimation:null,//是否暂停播放动画
    showing:function ($super, x, y, w, h) {
        if (this.animationName) {
            var animation = ResourceData.Animation[this.animationName];
            var image = ResourceData.Images[animation.imageName];
            var w1 = image.cellSize.width;
            var h1 = image.cellSize.height;
            var x1 = (animation.beginPoint.WNum + this.animationOffset.WNum + this.animationPlayNum) % image.picNum.WNum;
            var y1 = animation.beginPoint.HNum + this.animationOffset.HNum + parseInt((animation.beginPoint.WNum + this.animationOffset.WNum + this.animationPlayNum) / image.picNum.WNum);

            JForm.context.drawImage(image.data, w1 * x1, h1 * y1, w1, h1, x, y, w, h);
            if(this.isHighLight){//绘制高亮图片
                JForm.context.save();
                JForm.context.globalCompositeOperation="lighter";
                JForm.context.globalAlpha=this.alpha*0.2;
                JForm.context.drawImage(image.data, w1 * x1, h1 * y1, w1, h1, x, y, w, h);
                JForm.context.restore();
            }
            if (!this.stopPlayAnimation) {
                this.animationTime++;
            }
            if (this.animationTime >= animation.GHz) {//当计数大于或等于动画频率时
                this.animationPlayNum++;//要显示的动画图片编号加1，
                if (this.animationPlayNum >= animation.allPlayNum) {
                    if (this.loop)this.animationPlayNum = 0;//循环播放
                    else this.remove();//已播放到末尾，删除该对象
                }
                this.animationTime = 0;//重置计数
            }
        }
        $super( x, y, w, h);
    },
    setAnimation:function (animationName) {//设置动画资源
        this.animationName = animationName;
        return this;
    },
    initialize:function ($super, argname, argP, argWH, argAnimationName) {
        $super(argname, argP, argWH);
        this.animationName = argAnimationName;
        this.animationPlayNum = 0;
        this.animationTime = 0;
        this.animationOffset = {WNum:0, HNum:0};
        this.loop = true;
        this.stopPlayAnimation = false;
    }
});

6、容器

主要用于控制其他对象分组,便于控制。

实现代码如下：

JControls.Panel = Class.create(JControls.Object, {//从父类继承
    closeButton:null,//关闭按钮
    title:null,//显示标题的控件
    isShowTitle:null,//是否显示标题栏
    titleHeight:40,//标题栏高度
    initialize:function ($super, argname, argP, argWH) {
        $super(argname, argP, argWH);
        this.isShowTitle=false;
        this.titleHeight=40;
    },
    showTitle:function(title){
        if(this.isShowTitle){
            this.title.setText(title);
        }else{
            this.title=new JControls.Label(this.name+"_title",{x:0,y:0}).setSize({width:this.size.width,height:this.titleHeight})
                .setText(title).setBGColor(JColor.blue).setFontSize(27).setTextBaseline("middle").setFontType("bold").setTextPos({x:20,y:0});
            this.closeButton=new JControls.Button(this.name+"_closeButton",{x:this.size.width-60,y:0},{width:60,height:this.titleHeight})
                .setBGColor(JColor.white);
            this.closeButton.buttonLabel.setText("关闭").setFontColor(JColor.red).setFontSize(22);
            this.closeButton.onClick=function(){
                this.parent.visible=false;
                this.parent.parent.show();
                this.parent.onCloseButtonClick&&this.parent.onCloseButtonClick();
                return true;
            }
            this.addControlInLast([this.title,this.closeButton]);
            this.isShowTitle=true;
        }

    },
    onCloseButtonClick:null,
    beginShow:function ($super) {//覆盖父类中beginShow方法
        $super();
        if (this.parent&&this.isShowTitle)this.position.y +=this.titleHeight;
    }
});