html5 canvas 绘制象棋（将持续改进）

最新推荐文章于 2024-05-20 17:25:10 发布

CavanWang

最新推荐文章于 2024-05-20 17:25:10 发布

阅读量3k

点赞数 1

分类专栏：前端开发文章标签： javascript html5 canvas 象棋游戏

本文链接：https://blog.csdn.net/wangxugangzy05/article/details/8681772

版权

<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>象棋</title>
<style>
canvas.middle{
border:1px solid #dddddd;
cursor:crosshair;
</style>
</head>
<body>
<canvas width="600px" height="600px" id="middle" class="middle">

</canvas >

<script type="text/javascript">
var mycanvas = document.getElementById("middle");
ctx = mycanvas.getContext("2d");
var layout={
offsetWidth: 600,//canvas 中用于作为绘图面板的总宽度
offsetHeight: 600,
cell: 50,
padding: 30,
middleHeight: 80
};
var style={
board: {
bgColor: "rgb(255,200,100)",
border: "rgb(100,255,200)",
lineWidth: 2,
middle_bound: {
fontColor: "rgba(0,255,0,1)",
fontSize: 18,
fontName: "Arial"
}
},
qizi: {
radius: 16, //半径
bgColor: "rgba(200,200,200,1)",
sideColor: "rgba(200,180,220,1)",
red_fontColor: "rgba(255,0,0,1)",
black_fontColor: "rgba(0,0,0,1)",
fontSize: 14,
fontName: "Arial",
goColor: "rgb(255,0,0)"
}
};
function getPosToPanel(xIndex, yIndex){//获取棋盘上qizi[yIndex][xIndex]处棋子的中心位置
var temp = {x:xIndex,y:yIndex};
temp.x = layout.padding + xIndex * layout.cell;
temp.y = layout.padding + yIndex * layout.cell;
if(yIndex >= 5){
temp.y += layout.middleHeight - layout.cell;
}
return temp;
}
function getXY(evt){ // get click pos base on <canvas>, so(0,0) is at the left-top of <canvas>
var clientX = evt.clientX, clientY = evt.clientY;
var temp = {x : 0, y:0};
var parObj=mycanvas;
var offset=mycanvas.offsetLeft;
while(parObj=parObj.offsetParent){
offset+=parObj.offsetLeft;
}
temp.x = clientX - offset;
var parObj=mycanvas;
var offset=mycanvas.offsetTop;
while(parObj=parObj.offsetParent){
offset+=parObj.offsetTop;
}
temp.y = clientY - offset;
return temp;
}
function getQiziClickIndex(evt){ //根据点击事件，返回点击范围所在处属于哪个索引的棋子，返回值为0-89,-1表示错误值
var temp = getXY(evt);
temp.x = temp.x - layout.padding;
temp.y = temp.y - layout.padding;
var i, j;
i = Math.round(temp.x / layout.cell);
if( temp.y <= layout.cell * 4 + style.qizi.radius ){
j = Math.round(temp.y / layout.cell);//求出距离第i行，j列最近
}else if( temp.y >= layout.cell * 4 + layout.middleHeight - style.qizi.radius){//在楚河汉界的下方
j = Math.round( (temp.y - (layout.cell * 4 + layout.middleHeight) ) / layout.cell ) + 5;
}else{
return -1;
}
if( i >= 9 || j >= 10 || i < 0 || j < 0 ){
return -1;
}
var pos = getPosToPanel(i, j);
pos.x -= layout.padding;
pos.y -= layout.padding;
if( Math.pow(temp.x - pos.x, 2) + Math.pow(temp.y - pos.y, 2) < style.qizi.radius *style.qizi.radius ){//在棋子范围内
return i + j * 9;
}
return -1;// 不在棋子范围内
}
var qiziIndex = new Array(90);
var qiziyanse = new Array(90);
function initQiziArray(){
for( var i = 0; i < qiziIndex.length; ++i){
qiziIndex[i] = "";
qiziyanse[i] = 0;//-1 red, 1 black, 0 none
}
qiziIndex[0] = qiziIndex[8] = "车";
qiziIndex[1] = qiziIndex[7] = "马";
qiziIndex[2] = qiziIndex[6] = "相";
qiziIndex[3] = qiziIndex[5] = "士";
qiziIndex[4] = "将";
qiziIndex[19] = qiziIn

最低0.47元/天解锁文章

CavanWang

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html5 canvas 绘制象棋（将持续改进）

象棋canvas.middle{border:1px solid #dddddd;cursor:crosshair; var mycanvas = document.getElementById("middle");ctx = mycanvas.getContext("2d");var layout={offsetWidth:
复制链接

扫一扫