// JavaScript Document
var com = com||{};
com.panel=function(){
var canvas=document.getElementById("chess");
var ctx=canvas.getContext("2d");
// draw background
ctx.fillStyle="#3C6"
ctx.beginPath();
ctx.rect(20,20,463.5,514.5);
ctx.fill();
ctx.closePath();
// prepare to draw lines
var p = 20,
s = 57,
w = 463,
h = 514;
ctx.strokeStyle="red";
ctx.lineWidth=2;
ctx.beginPath();
// horizonal lines
for(var i = 0; i<10; i++){
ctx.moveTo(p, s * i + p);
ctx.lineTo(w + p, s * i + p);
}
// // vertical lines
ctx.moveTo(p, p);
ctx.lineTo(p, h + p);
ctx.moveTo(w + p, p);
ctx.lineTo(w + p, h + p);
for(var i = 1; i<8; i++){
ctx.moveTo(s * i + p, p);
ctx.lineTo(s * i + p, s * 4 + p);
ctx.moveTo(s * i + p, s * 5 + p);
ctx.lineTo(s * i + p, h + p);
}
// // "X" shapes
ctx.moveTo(s * 3 + p, p);
ctx.lineTo(s * 5 + p, s * 2 + p);
ctx.moveTo(s * 5 + p, 0 + p);
ctx.lineTo(s * 3 + p, s * 2 + p);
ctx.moveTo(s * 3 + p, s * 7 + p);
ctx.lineTo(s * 5 + p, s * 9 + p);
ctx.moveTo(s * 5 + p, s * 7 + p);
ctx.lineTo(s * 3 + p, s * 9 + p);
ctx.stroke();
ctx.closePath();
// 楚河汉界
ctx.font="Arial, Helvetica, sans-serif";
ctx.fillStyle="#F30";
ctx.textAlign="center";
ctx.font = "20pt Calibri";
ctx.fillText("楚河", p + s * 2, p + s * 4.6);
ctx.fillText("漢界", p + s * 6, p + s * 4.6);
};
com.init = function(stype){
com.width = stype.width; //画布宽度
com.height = stype.height; //画布高度
com.canvas = document.getElementById("chess"); //画布
com.ct = com.canvas.getContext("2d");
com.ImgIsLoaded = false;
//alert(com.ImgIsLoaded);
com.loadImages(stype);
}
window.onload = function(){
com.panel();
com.init("stype");
if(com.ImgIsLoaded == true){
alert(com.ImgIsLoaded);
com.mans = {}; //棋子集合
com.createMans(com.initMap); //生成棋子
}
}
//网页样式
com.stype = {
stype:{
width:325,
height:402,
spaceX:55,
spaceY:55,
pointStartX:0,
pointStartY:0,
page:"stype"
}
};
//载入图片
com.loadImages = function(stype){
var num = 0;
//棋子
for(var i in com.args){
com[i] = {};
com[i].img = new Image();
com[i].flag = false;
com[i].img.src = "img/"+stype+"/"+com.args[i].img+".png";
com[i].img.onload = function(){
num++;
alert(num);
if (num == 14)
{
com.ImgIsLoaded = true;
com.mans = {}; //棋子集合
com.createMans(com.initMap); //生成棋子
alert("now"+num);
}
}
}
};
com.args = {
//红子 中文/图片地址/阵营/权重
'c':{text:"车", img:'r_c', my:1, bl:"c"},
'm':{text:"马", img:'r_m', my:1, bl:"m"},
'x':{text:"相", img:'r_x', my:1, b1:'x'},
's':{text:"仕", img:'r_s', my:1, bl:"s"},
'j':{text:"将", img:'r_j', my:1, bl:"j"},
'p':{text:"炮", img:'r_p', my:1, bl:"p"},
'z':{text:"兵", img:'r_z', my:1, bl:"z"},
//蓝子
'C':{text:"車", img:'b_c', my:-1 ,bl:"c"},
'M':{text:"馬", img:'b_m', my:-1 ,bl:"m"},
'X':{text:"象", img:'b_x', my:-1 ,bl:"x"},
'S':{text:"士", img:'b_s', my:-1 ,bl:"s"},
'J':{text:"帅", img:'b_j', my:-1 ,bl:"j"},
'P':{text:"炮", img:'b_p', my:-1 ,bl:"p"},
'Z':{text:"卒", img:'b_z', my:-1 ,bl:"z"}
}
//棋盘地图
com.initMap = [
['C0','M0','X0','S0','J0','S1','X1','M1','C1'],
[ , , , , , , , , ],
[ ,'P0', , , , , ,'P1', ],
['Z0', ,'Z1', ,'Z2', ,'Z3', ,'Z4'],
[ , , , , , , , , ],
[ , , , , , , , , ],
['z0', ,'z1', ,'z2', ,'z3', ,'z4'],
[ ,'p0', , , , , ,'p1', ],
[ , , , , , , , , ],
['c0','m0','x0','s0','j0','s1','x1','m1','c1']
];
com.createMans = function(map){
for(var i=0;i<map.length;i++){
for(var n=0;n<map[i].length;n++){
var key = map[i][n]; //获取棋盘地图里面的标记位置
if(key){
//如果棋盘地图里面有标记，则绘制棋子
com.mans[key] = new com.class.Man(key,n,i);
com.mans[key].x = n;
com.mans[key].y = i;
}
}
}
alert("this is createMans");
}
com.class = com.class || {} //类
com.class.Man = function(key,x,y){
this.pater = key.slice(0,1); //选取数组中的元素，从start到end也就是0到1
var o = com.args[this.pater]; //取得此元素对象
this.x = x || 0;
this.y = y || 0;
this.key = key; //对应map棋盘里面的相应的值
this.my = o.my;
this.text = o.text;
this.value = o.value;
this.isShow = true;
this.alpha = 1;
this.ps = []; //着点
if(this.isShow){
com.ct.save();
com.ct.globalAlpha = this.alpha;
alert();
com.ct.drawImage(com[this.pater].img,com.stype.stype.spaceX*this.x+com.stype.stype.pointStartX,com.stype.stype.spaceY*this.y+com.stype.stype.pointStartY);
com.ct.restore();
}
}
com.arr2Clone = function(array){
var newArray = [];
for(var i = 0;i<array.length;i++){
newArray[i] = array[i].slice();
}
return newArray;
}