1. 程式人生 > >用html+css+js實現中國象棋小遊戲開發專案

用html+css+js實現中國象棋小遊戲開發專案

var game={
	RN:10,//行數
	CN:9,//列數
	CSIZE:40,//每個單元格大小
	OFFSET:20,//單元格區域距離最外層邊界的距離,
	URL:"images/chess.png",//儲存所有棋子的圖片地址
	data:null,//實時儲存棋盤中棋子的物件
	chessPieces:[//儲存所有棋子的初始位置座標
		{name:'redC1',r:0,c:0,x:-144,y:0},
		{name:'redC2',r:0,c:8,x:-144,y:0},
		{name:'redM1',r:0,c:1,x:-108,y:0},
		{name:'redM2',r:0,c:7,x:-108,y:0},
		{name:'redX1',r:0,c:2,x:-72,y:0},
		{name:'redX2',r:0,c:6,x:-72,y:0},
		{name:'redS1',r:0,c:3,x:-36,y:0},
		{name:'redS2',r:0,c:5,x:-36,y:0},
		{name:'redB0',r:0,c:4,x:0,y:0},
		{name:'redP1',r:2,c:1,x:-180,y:0},
		{name:'redP2',r:2,c:7,x:-180,y:0},
		{name:'redZ1',r:3,c:0,x:-216,y:0},
		{name:'redZ2',r:3,c:2,x:-216,y:0},
		{name:'redZ3',r:3,c:4,x:-216,y:0},
		{name:'redZ4',r:3,c:6,x:-216,y:0},
		{name:'redZ5',r:3,c:8,x:-216,y:0},

		{name:'blueC1',r:9,c:0,x:-144,y:-36},
		{name:'blueC2',r:9,c:8,x:-144,y:-36},
		{name:'blueM1',r:9,c:1,x:-108,y:-36},
		{name:'blueM2',r:9,c:7,x:-108,y:-36},
		{name:'blueX1',r:9,c:2,x:-72,y:-36},
		{name:'blueX2',r:9,c:6,x:-72,y:-36},
		{name:'blueS1',r:9,c:3,x:-36,y:-36},
		{name:'blueS2',r:9,c:5,x:-36,y:-36},
		{name:'blueB0',r:9,c:4,x:0,y:-36},
		{name:'blueP1',r:7,c:1,x:-180,y:-36},
		{name:'blueP2',r:7,c:7,x:-180,y:-36},
		{name:'blueZ1',r:6,c:0,x:-216,y:-36},
		{name:'blueZ2',r:6,c:2,x:-216,y:-36},
		{name:'blueZ3',r:6,c:4,x:-216,y:-36},
		{name:'blueZ4',r:6,c:6,x:-216,y:-36},
		{name:'blueZ5',r:6,c:8,x:-216,y:-36},
	],
	start:function(){
		//初始化棋盤
		//建立文件片段
		var frag=document.createDocumentFragment();
		var chess=document.getElementById("chess_box");
		//給date新增RN個空元素
		this.data=new Array(this.RN);
		//給date每行新增CN個空元素;
		for(var r=0;r=0&&r<=9&&c>=0&&c<=8){
			//藍卒的規則
			if(div.className.indexOf("blueZ")!=-1){
				return (divr>=5&&divr-r==1&&divc==c)||(divr<5&&((divr-r==1&&divc==c)||(divr==r&&Math.abs(divc-c)==1)))
			}
			//紅兵的規則
			if(div.className.indexOf("redZ")!=-1){
				return (divr<5&&r-divr==1&&divc==c)||(divr>=5&&((r-divr==1&&divc==c)||(divr==r&&Math.abs(divc-c)==1)))
			}
			//炮和車的規則
			if(div.className.indexOf("P")!=-1||div.className.indexOf("C")!=-1){
				var data=this.data[r][c];
				if(divc==c){
					divr>r&&(r=[divr,divr=r][0]);
					for(var i=0;divr<=r;this.data[divr++][c]&&i++);
				}else if(divr==r){
					divc>c&&(c=[divc,divc=c][0]);
					for(var i=0;divc<=c;this.data[r][divc++]&&i++);
				}
				if(div.className.indexOf("P")!=-1){
					return (!data&&i==1)||(data&&i==3);
				}else{
					return (!data&&i==1)||(data&&i==2);
				}
			}
			//馬的規則
			if(div.className.indexOf("M")!=-1){
				if(
					(Math.abs(divr-r)==1&&Math.abs(divc-c)==2&&(!this.data[divr][(divc+c)/2]))
					||(Math.abs(divr-r)==2&&Math.abs(divc-c)==1&&(!this.data[(divr+r)/2][divc]))
				){return true;}
			}
			//相的規則
			if(div.className.indexOf("X")!=-1){
				var bool=(Math.abs(divr-r)==2&&Math.abs(divc-c)==2&&(!this.data[(divr+r)/2][(divc+c)/2]));
				if(div.className.indexOf("redX")!=-1){
					return r>=0&&r<5&&bool;
				}else{
					return r>=5&&r<=9&&bool;
				}
			}
			//士的規則
			if(div.className.indexOf("S")!=-1&&c>2&&c<6){
				var bool=(Math.abs(divr-r)==1&&Math.abs(divc-c)==1);
				if(div.className.indexOf("redS")!=-1){
					return r>=0&&r<3&&bool;
				}else{
					return r>=7&&r<=9&&bool;
				}
			}
			//將的規則
			if(div.className.indexOf("B")!=-1&&c>2&&c<6){
				var bool=((Math.abs(divr-r)==1&&divc==c)||(Math.abs(divc-c)==1&&divr==r));
				if(div.className.indexOf("redB")!=-1){
					return r>=0&&r<3&&bool;
				}else{
					return r>=7&&r<=9&&bool;
				}
			}
		}
	},
	//更新棋子位置的
	paintChees:function(div,r,c){
		div.style.left=c*this.CSIZE+this.OFFSET+"px";
		div.style.top=r*this.CSIZE+this.OFFSET+"px";
		div.className=div.className.slice(0,-2)+r+c;
		return div;
	},
	//更新邊框位置
	paintBorder:function(span,div){
		span.style.left=div.style.left;
		span.style.top=div.style.top;
		span.className="index-"+div.className.slice(-2);
	}
};
game.start();