棋盘
board.html
<!doctype html><html><head><meta charset="gb2312"/></head><body><div class="board"><canvas id="board" width="450px" height="500px"></canvas></div></body></html><script type="text/javascript" src="js/board.js"></script>
board.js
//棋盘类 var chessBoard=function(){//获取棋盘画布 var board=document.getElementById("board");//初始化画布board.style.border="1px solid gray";board.style.backgroundColor="rgba(100,180,170,0.6)";//得到绘图对象 this.context=board.getContext('2d');//棋盘大小this.row=10;this.col=9; //画直线函数 this.line=function(x1,y1,x2,y2){this.context.beginPath();this.context.lineWidth=2;this.context.moveTo(x1,y1);this.context.lineTo(x2,y2);this.context.strokeStyle="black";this.context.stroke();this.context.closePath();};//重载画直线函数this.line=function(x1,y1,x2,y2,color){this.context.beginPath();this.context.lineWidth=2;this.context.moveTo(x1,y1);this.context.lineTo(x2,y2);this.context.strokeStyle=color;this.context.stroke();this.context.closePath();};//画横线函数 this.drawRows=function(){for(var i=0;i<this.row;i++){this.line(25,25+50*i,425,25+50*i);}}; //画竖线函数 this.drawCols=function(){for(var i=0;i<this.col;i++){this.line(25+i*50,25,25+i*50,475);}//清除多画的部分this.context.clearRect(26,226,398,48); };//画斜线函数this.drawBias=function(){this.line(175,25,275,125);this.line(175,125,275,25);this.line(175,375,275,475);this.line(175,475,275,375);}; //画中心点this.center=function(x,y){if(x<this.col-1){this.line(x*50+25+5,y*50+25-15,x*50+25+5,y*50+25-5);this.line(x*50+25+5,y*50+25-5,x*50+25+15,y*50+25-5);this.line(x*50+25+5,y*50+25+5,x*50+25+15,y*50+25+5);this.line(x*50+25+5,y*50+25+5,x*50+25+5,y*50+25+15);}if(x>0){this.line(x*50+25-5,y*50+25-15,x*50+25-5,y*50+25-5);this.line(x*50+25-5,y*50+25+5,x*50+25-5,y*50+25+15);this.line(x*50+25-15,y*50+25-5,x*50+25-5,y*50+25-5);this.line(x*50+25-15,y*50+25+5,x*50+25-5,y*50+25+5);}}; //画兵卒炮的起始位置中心点函数 this.drawCenter=function(){this.center(1,2);this.center(7,2);this.center(0,3);this.center(2,3);this.center(4,3);this.center(6,3);this.center(8,3);this.center(1,7);this.center(7,7);this.center(0,6);this.center(2,6);this.center(4,6);this.center(6,6);this.center(8,6);};//画边框函数this.drawBorder=function(){this.context.beginPath();this.context.lineWidth=4;this.context.rect(18,18,414,464);this.context.stroke();this.context.closePath();}; //画楚河汉界函数 this.writeChuRiverAndHanBorder=function(){this.context.beginPath();this.context.font="28px bold 黑体";this.context.fillStyle="black";this.context.textAlign="center";this.context.textBaseline="middle";//绘制文字this.context.fillText("楚 河",125,252); this.context.fillText("汉 界",325,252); this.context.closePath();this.context.beginPath();this.context.font="15px bold 宋体";this.context.fillStyle="rgba(100,100,100,0.8)";this.context.textAlign="center";this.context.textBaseline="middle";this.context.fillText("冰凌象棋网",225,242);this.context.fillText("",223,258);this.context.closePath();};//画棋盘综合函数this.draw=function(){//行 this.drawRows();//列 this.drawCols();//九宫斜线 this.drawBias();//外边框 this.drawBorder();//兵卒炮初始位置中心点 this.drawCenter();//楚河汉界 this.writeChuRiverAndHanBorder();}; //画棋子选中框this.drawSelectBorder=function(x,y){this.line(x*50+25-22,y*50+25-22,x*50+25-22,y*50+25-12,"blue");this.line(x*50+25-22,y*50+25-22,x*50+25-12,y*50+25-22,"blue");this.line(x*50+25-22,y*50+25+22,x*50+25-22,y*50+25+12,"blue");this.line(x*50+25-22,y*50+25+22,x*50+25-12,y*50+25+22,"blue");this.line(x*50+25+22,y*50+25-22,x*50+25+22,y*50+25-12,"blue");this.line(x*50+25+22,y*50+25-22,x*50+25+12,y*50+25-22,"blue");this.line(x*50+25+22,y*50+25+22,x*50+25+22,y*50+25+12,"blue");this.line(x*50+25+22,y*50+25+22,x*50+25+12,y*50+25+22,"blue");}; //画棋子函数 this.drawPiece=function(x,y,pieceName,pieceType){this.context.beginPath();this.context.arc(x*50+25,y*50+25,21,0,2*Math.PI);this.context.fillStyle=pieceType;this.context.fill();this.context.font="26px bold 宋体";if(pieceType=="red")this.context.fillStyle="yellow";else if(pieceType=="black"){this.context.fillStyle="white";}this.context.textAlign="center";this.context.textBaseline="middle";this.context.fillText(pieceName,x*50+25,y*50+26);this.context.closePath();}; //刷新棋盘函数（根据玩家） this.flashChessBoard=function(pieces){//每当画布的高度被赋值时画布就会清空 this.context.height=this.context.height;this.draw();for(var i=0;i<pieces.length;i++){this.drawPiece(pieces[i].x,pieces[i].y,pieces[i].name,pieces[i].type);} };};var pieces=[{x:0,y:0,name:"車",type:"black"},{x:1,y:0,name:"馬",type:"black"},{x:2,y:0,name:"象",type:"black"},{x:3,y:0,name:"士",type:"black"},{x:8,y:0,name:"車",type:"black"},{x:7,y:0,name:"馬",type:"black"},{x:6,y:0,name:"象",type:"black"},{x:5,y:0,name:"士",type:"black"},{x:4,y:0,name:"將",type:"black"},{x:0,y:3,name:"卒",type:"black"},{x:2,y:3,name:"卒",type:"black"},{x:4,y:3,name:"卒",type:"black"},{x:6,y:3,name:"卒",type:"black"},{x:8,y:3,name:"卒",type:"black"},{x:1,y:2,name:"炮",type:"black"},{x:7,y:2,name:"炮",type:"black"},{x:0,y:9,name:"車",type:"red"},{x:1,y:9,name:"馬",type:"red"},{x:2,y:9,name:"相",type:"red"},{x:3,y:9,name:"仕",type:"red"},{x:8,y:9,name:"車",type:"red"},{x:7,y:9,name:"馬",type:"red"},{x:6,y:9,name:"相",type:"red"},{x:5,y:9,name:"仕",type:"red"},{x:4,y:9,name:"帥",type:"red"},{x:0,y:6,name:"兵",type:"red"},{x:2,y:6,name:"兵",type:"red"},{x:4,y:6,name:"兵",type:"red"},{x:6,y:6,name:"兵",type:"red"},{x:8,y:6,name:"兵",type:"red"},{x:1,y:7,name:"炮",type:"red"},{x:7,y:7,name:"炮",type:"red"}];var board=new chessBoard();board.flashChessBoard(pieces);
学了一晚上终于有点成绩啦，加油呀冰凌小可爱，嘻嘻嘻！
