|
前面我们已经完成了父对象的编写，现在我们可以通过继承来实现各对象了。
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]);//添加到当前按钮子对象数组中
}
});
| 
转播
