js象棋

最新推荐文章于 2023-03-02 08:40:36 发布

善待366

最新推荐文章于 2023-03-02 08:40:36 发布

阅读量198

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_56072688/article/details/115157275

版权

笔记专栏收录该内容

79 篇文章 1 订阅

订阅专栏

<html><body><canvas id="myCanvas" width="300" height="300"  style="border:1px solid #c3c3c3;"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

qipan=[]
for(a=0;a<9*10;a++){
x=a%9
y=(a-(a%9))/9
qipan.push([x,y])
}

function drawboard(){
ctx.strokeStyle="black"
var x=8,y=9
for(a=0;a<=x;a++){
ctx.moveTo(a*30+30,0+15);
ctx.lineTo(a*30+30,270+15);
ctx.stroke();
}
for(a=0;a<=y;a++){
ctx.moveTo(0+30,a*30+15);
ctx.lineTo(240+30,a*30+15);
ctx.stroke();
}
ctx.rect(0+30,4*30+15,240,30)
ctx.fillStyle="gray"
ctx.fill()
}drawboard()

qizi=[
["兵","red","1",[0,3]],["兵","red","1",[2,3]],["兵","red","1",[4,3]],["兵","red","1",[6,3]],["兵","red","1",[8,3]],["车","red","1",[0,0]],["马","red","1",[1,0]],["相","red","1",[2,0]],["士","red","1",[3,0]],["帅","red","1",[4,0]],
["士","red","1",[5,0]],["相","red","1",[6,0]],
["马","red","1",[7,0]],["车","red","1",[8,0]],["炮","red","1",[1,2]],["炮","red","1",[7,2]],
]

function drawqz(){
for(a=0;a<qizi.length;a++){
qzp=qizi[a][3]
ctx.beginPath();
ctx.arc(qzp[0]*30+30,qzp[1]*30+15,15,0,2*Math.PI);
ctx.stroke();
ctx.fillText(qizi[a][0],qzp[0]*30+30,qzp[1]*30+15)
}
}drawqz()

qzseled="no"
c.onclick=function(e){
ctx.beginPath();
ctx.arc(e.layerX,e.layerY,3,0,2*Math.PI);
ctx.strokeStyle="green"
ctx.stroke();

if(qzseled=="no"){
for(a=0;a<qizi.length;a++){
qzp=qizi[a][3]
qzx=qzp[0]*30+15
qzy=qzp[1]*30
if(e.layerX>=qzx && e.layerX<=qzx+30){
if(e.layerY>=qzy && e.layerY<=qzy+30){
qzseled=a
}}}
}else{
for(a=0;a<qipan.length;a++){
qzp=qipan[a]
qzx=qzp[0]*30+15
qzy=qzp[1]*30
if(e.layerX>=qzx && e.layerX<=qzx+30){
if(e.layerY>=qzy && e.layerY<=qzy+30){
qizi[qzseled][3]=qipan[a]
qzseled="no"
}}}
ctx.clearRect(0,0,300,300)
drawboard()
drawqz()
}}
</script>
</body></html>