canvas版本中国象棋,象棋的棋子控制还是复杂一些

news/2024/10/8 14:58:55/文章来源:https://www.cnblogs.com/xuxiaobo/p/18404519

代码:

<!Doctype html>
<html lang="zh_cn"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>中国象棋</title><meta name="Keywords" content=""><meta name="Description" content=""><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /></head>
<body><div style="display: flex; justify-content: left; align-items: center; height: 100%;">
<canvas id="myCanvas" width="600" height="600" style="border:1px;">
</canvas>
</div><script>
var margin = 10;
var pading = 30;
var maxLineNum = 9;
var maxFieldNum = 8;
var posResult = false; //是否已经获胜
var pieceList = getQiziList(); //棋子列表
var button_width = 120;
var button_height = 35;
var chongxin_x = 0;
var chongxin_y = 0;
var msg_x = 0;
var msg_y = 0;
var now_type = 1; //黑方先手,0红方,1黑方
var now_status = 0; //0选棋,1下棋
var choose_id = 0; //选中棋子的id
var resultMsg = new Array((now_type == 0 ? '红方' : '黑方')+"优先执棋...");
var errorMsg = ''; //错误消息var myCanvas = document.getElementById("myCanvas");var page_width = window.innerWidth;
var page_height = window.innerHeight;
//console.log("页面尺寸:宽:"+page_width+",高:"+page_height);var paint_width = page_width - 2 * margin - page_width / 6;
var paint_height = page_height - 2 * margin;
myCanvas.width = paint_width;
myCanvas.height = paint_height;
//console.log("画布尺寸:宽:"+paint_width+",高:"+paint_height);var left_width = paint_height - 2 * pading;
var left_height = paint_height - 2 * pading;
var right_width = paint_width - 2 * pading - left_width;
var right_height = paint_height - 2 * pading;var perWidth = left_width / maxFieldNum;
var perHeight = left_height / maxLineNum;//获取初始棋子列表
function getQiziList(){var res = new Array();var h = 0;var qizi = new Object();qizi.x = 0;qizi.y = 0;qizi.type = 0; //红方
    qizi.number = '';qizi.fanweis = new Array();qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 1;qizi.y = 0;qizi.type = 0; //红方
    qizi.number = '';qizi.fanweis = new Array();qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 2;qizi.y = 0;qizi.type = 0; //红方
    qizi.number = '';qizi.fanweis = new Array(new Array(2,0),new Array(6,0),new Array(0,2),new Array(4,2),new Array(8,2),new Array(2,4),new Array(6,4));qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 3;qizi.y = 0;qizi.type = 0; //红方
    qizi.number = '';qizi.fanweis = new Array(new Array(3,0),new Array(5,0),new Array(4,1),new Array(3,2),new Array(5,2));qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 4;qizi.y = 0;qizi.type = 0; //红方
    qizi.number = '';qizi.fanweis = new Array(new Array(3,0),new Array(4,0),new Array(5,0),new Array(3,1),new Array(4,1),new Array(5,1),new Array(3,2),new Array(4,2),new Array(5,2));qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 5;qizi.y = 0;qizi.type = 0; //红方
    qizi.number = '';qizi.fanweis = new Array(new Array(3,0),new Array(5,0),new Array(4,1),new Array(3,2),new Array(5,2));qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 6;qizi.y = 0;qizi.type = 0; //红方
    qizi.number = '';qizi.fanweis = new Array(new Array(2,0),new Array(6,0),new Array(0,2),new Array(4,2),new Array(8,2),new Array(2,4),new Array(6,4));qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 7;qizi.y = 0;qizi.type = 0; //红方
    qizi.number = '';qizi.fanweis = new Array();qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 8;qizi.y = 0;qizi.type = 0; //红方
    qizi.number = '';qizi.fanweis = new Array();qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 1;qizi.y = 2;qizi.type = 0; //红方
    qizi.number = '';qizi.fanweis = new Array();qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 7;qizi.y = 2;qizi.type = 0; //红方
    qizi.number = '';qizi.fanweis = new Array();qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 0;qizi.y = 3;qizi.type = 0; //红方
    qizi.number = '';qizi.fanweis = new Array();qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 2;qizi.y = 3;qizi.type = 0; //红方
    qizi.number = '';qizi.fanweis = new Array();qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 4;qizi.y = 3;qizi.type = 0; //红方
    qizi.number = '';qizi.fanweis = new Array();qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 6;qizi.y = 3;qizi.type = 0; //红方
    qizi.number = '';qizi.fanweis = new Array();qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 8;qizi.y = 3;qizi.type = 0; //红方
    qizi.number = '';qizi.fanweis = new Array();qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 0;qizi.y = 9;qizi.type = 1; //黑方
    qizi.number = '';qizi.fanweis = new Array();qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 1;qizi.y = 9;qizi.type = 1; //黑方
    qizi.number = '';qizi.fanweis = new Array();qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 2;qizi.y = 9;qizi.type = 1; //黑方
    qizi.number = '';qizi.fanweis = new Array(new Array(2,9),new Array(6,9),new Array(0,7),new Array(4,7),new Array(8,7),new Array(2,5),new Array(6,5));qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 3;qizi.y = 9;qizi.type = 1; //黑方
    qizi.number = '';qizi.fanweis = new Array(new Array(3,7),new Array(5,7),new Array(4,8),new Array(3,9),new Array(5,9));qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 4;qizi.y = 9;qizi.type = 1; //黑方
    qizi.number = '';qizi.fanweis = new Array(new Array(3,7),new Array(4,7),new Array(5,7),new Array(3,8),new Array(4,8),new Array(5,8),new Array(3,9),new Array(4,9),new Array(5,9));qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 5;qizi.y = 9;qizi.type = 1; //黑方
    qizi.number = '';qizi.fanweis = new Array(new Array(3,7),new Array(5,7),new Array(4,8),new Array(3,9),new Array(5,9));qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 6;qizi.y = 9;qizi.type = 1; //黑方
    qizi.number = '';qizi.fanweis = new Array(new Array(2,9),new Array(6,9),new Array(0,7),new Array(4,7),new Array(8,7),new Array(2,5),new Array(6,5));qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 7;qizi.y = 9;qizi.type = 1; //黑方
    qizi.number = '';qizi.fanweis = new Array();qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 8;qizi.y = 9;qizi.type = 1; //黑方
    qizi.number = '';qizi.fanweis = new Array();qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 1;qizi.y = 7;qizi.type = 1; //黑方
    qizi.number = '';qizi.fanweis = new Array();qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 7;qizi.y = 7;qizi.type = 1; //黑方
    qizi.number = '';qizi.fanweis = new Array();qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 0;qizi.y = 6;qizi.type = 1; //黑方
    qizi.number = '';qizi.fanweis = new Array();qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 2;qizi.y = 6;qizi.type = 1; //黑方
    qizi.number = '';qizi.fanweis = new Array();qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 4;qizi.y = 6;qizi.type = 1; //黑方
    qizi.number = '';qizi.fanweis = new Array();qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 6;qizi.y = 6;qizi.type = 1; //黑方
    qizi.number = '';qizi.fanweis = new Array();qizi.id = ++h;res.push(qizi);var qizi = new Object();qizi.x = 8;qizi.y = 6;qizi.type = 1; //黑方
    qizi.number = '';qizi.fanweis = new Array();qizi.id = ++h;res.push(qizi);return res;
}function checkxy(qizi, myx, myy){var typeCn = qizi.type == 0 ? '红方' : '黑方';var number = qizi.number;if(qizi.fanweis.length > 0){var checkres = false;for(var i = 0; i < qizi.fanweis.length; i++){if(qizi.fanweis[i][0] == myx && qizi.fanweis[i][1] == myy){checkres = true;break;}}if(checkres == false){errorMsg = typeCn+"["+number+"]不能跑出范围";console.log(qizi.fanweis);return false;}}if(qizi.number == ''){var cantmp = true;if(qizi.x == myx && qizi.y != myy){var mintmp = qizi.y > myy ? myy : qizi.y;var maxtmp = qizi.y > myy ? qizi.y : myy;for(var i = mintmp+1; i < maxtmp; i++){var tmpqizi = getQiziInfoWithxy(myx, i);if(tmpqizi != false){cantmp = false;break;}}} else if(qizi.x != myx && qizi.y == myy){var mintmp = qizi.x > myx ? myx : qizi.x;var maxtmp = qizi.x > myx ? qizi.x : myx;for(var i = mintmp+1; i < maxtmp; i++){var tmpqizi = getQiziInfoWithxy(i, myy);if(tmpqizi != false){cantmp = false;break;}}} else{cantmp = false;}if(!cantmp){errorMsg = typeCn+"["+number+"]不能放到此位置";return false;}} else if(qizi.number == '' || qizi.number == ''){var cantmp = false;var counttmp = 0;var tmptype = qizi.type == 0 ? 1 : 0;var tmpduifangqizi = getQiziInfoWithxytype(myx, myy, tmptype);if(qizi.x == myx && qizi.y != myy){var mintmp = qizi.y > myy ? myy : qizi.y;var maxtmp = qizi.y > myy ? qizi.y : myy;for(var i = mintmp+1; i < maxtmp; i++){var tmpqizi = getQiziInfoWithxy(myx, i);if(tmpqizi != false){counttmp++;}}if(tmpduifangqizi!=false && counttmp == 1){cantmp = true;} else if(tmpduifangqizi == false && counttmp == 0){cantmp = true;}} else if(qizi.x != myx && qizi.y == myy){var mintmp = qizi.x > myx ? myx : qizi.x;var maxtmp = qizi.x > myx ? qizi.x : myx;for(var i = mintmp+1; i < maxtmp; i++){var tmpqizi = getQiziInfoWithxy(i, myy);if(tmpqizi != false){counttmp++;}}if(tmpduifangqizi!=false && counttmp == 1){cantmp = true;} else if(tmpduifangqizi == false && counttmp == 0){cantmp = true;}} else{cantmp = false;}if(!cantmp){errorMsg = typeCn+"["+number+"]不能放到此位置";return false;}} else if(qizi.number == ''){var cantmp = false;if(Math.abs(myx - qizi.x) == 1 && Math.abs(myy - qizi.y) == 2){var tmpx = qizi.x;var tmpy = Math.round((myy + qizi.y) / 2);cantmp = getQiziInfoWithxy(tmpx, tmpy) ? false : true;} else if(Math.abs(myx - qizi.x) == 2 && Math.abs(myy - qizi.y) == 1){var tmpx = Math.round((myx + qizi.x) / 2);var tmpy = qizi.y;cantmp = getQiziInfoWithxy(tmpx, tmpy) ? false : true;}if(!cantmp){errorMsg = typeCn+"["+number+"]不能放到此位置";return false;}} else if(qizi.number == '' || qizi.number == ''){var cantmp = false;if(qizi.x == qizi.fanweis[0][0] && qizi.y == qizi.fanweis[0][1]){ //左上1if(myx == qizi.fanweis[2][0] && myy == qizi.fanweis[2][1]){var tmpx = Math.round((qizi.fanweis[0][0]+qizi.fanweis[2][0])/2);var tmpy = Math.round((qizi.fanweis[0][1]+qizi.fanweis[2][1])/2);
                cantmp = getQiziInfoWithxy(tmpx, tmpy) ? false : true;} else if(myx == qizi.fanweis[3][0] && myy == qizi.fanweis[3][1]){var tmpx = Math.round((qizi.fanweis[0][0]+qizi.fanweis[3][0])/2);var tmpy = Math.round((qizi.fanweis[0][1]+qizi.fanweis[3][1])/2);
                cantmp = getQiziInfoWithxy(tmpx, tmpy) ? false : true;}} else if(qizi.x == qizi.fanweis[1][0] && qizi.y == qizi.fanweis[1][1]){//右上1if(myx == qizi.fanweis[3][0] && myy == qizi.fanweis[3][1]){var tmpx = Math.round((qizi.fanweis[1][0]+qizi.fanweis[3][0])/2);var tmpy = Math.round((qizi.fanweis[1][1]+qizi.fanweis[3][1])/2);
                cantmp = getQiziInfoWithxy(tmpx, tmpy) ? false : true;} else if(myx == qizi.fanweis[4][0] && myy == qizi.fanweis[4][1]){var tmpx = Math.round((qizi.fanweis[1][0]+qizi.fanweis[4][0])/2);var tmpy = Math.round((qizi.fanweis[1][1]+qizi.fanweis[4][1])/2);
                cantmp = getQiziInfoWithxy(tmpx, tmpy) ? false : true;}} else if(qizi.x == qizi.fanweis[5][0] && qizi.y == qizi.fanweis[5][1]){//左下1if(myx == qizi.fanweis[2][0] && myy == qizi.fanweis[2][1]){var tmpx = Math.round((qizi.fanweis[5][0]+qizi.fanweis[2][0])/2);var tmpy = Math.round((qizi.fanweis[5][1]+qizi.fanweis[2][1])/2);
                cantmp = getQiziInfoWithxy(tmpx, tmpy) ? false : true;} else if(myx == qizi.fanweis[3][0] && myy == qizi.fanweis[3][1]){var tmpx = Math.round((qizi.fanweis[5][0]+qizi.fanweis[3][0])/2);var tmpy = Math.round((qizi.fanweis[5][1]+qizi.fanweis[3][1])/2);
                cantmp = getQiziInfoWithxy(tmpx, tmpy) ? false : true;}} else if(qizi.x == qizi.fanweis[6][0] && qizi.y == qizi.fanweis[6][1]){//右下1if(myx == qizi.fanweis[3][0] && myy == qizi.fanweis[3][1]){var tmpx = Math.round((qizi.fanweis[6][0]+qizi.fanweis[3][0])/2);var tmpy = Math.round((qizi.fanweis[6][1]+qizi.fanweis[3][1])/2);
                cantmp = getQiziInfoWithxy(tmpx, tmpy) ? false : true;} else if(myx == qizi.fanweis[4][0] && myy == qizi.fanweis[4][1]){var tmpx = Math.round((qizi.fanweis[6][0]+qizi.fanweis[4][0])/2);var tmpy = Math.round((qizi.fanweis[6][1]+qizi.fanweis[4][1])/2);
                cantmp = getQiziInfoWithxy(tmpx, tmpy) ? false : true;}} else if(qizi.x == qizi.fanweis[2][0] && qizi.y == qizi.fanweis[2][1]){//左中1if(myx == qizi.fanweis[0][0] && myy == qizi.fanweis[0][1]){var tmpx = Math.round((qizi.fanweis[2][0]+qizi.fanweis[0][0])/2);var tmpy = Math.round((qizi.fanweis[2][1]+qizi.fanweis[0][1])/2);
                cantmp = getQiziInfoWithxy(tmpx, tmpy) ? false : true;} else if(myx == qizi.fanweis[5][0] && myy == qizi.fanweis[5][1]){var tmpx = Math.round((qizi.fanweis[2][0]+qizi.fanweis[5][0])/2);var tmpy = Math.round((qizi.fanweis[2][1]+qizi.fanweis[5][1])/2);
                cantmp = getQiziInfoWithxy(tmpx, tmpy) ? false : true;}} else if(qizi.x == qizi.fanweis[3][0] && qizi.y == qizi.fanweis[3][1]){//中2if(myx == qizi.fanweis[0][0] && myy == qizi.fanweis[0][1]){var tmpx = Math.round((qizi.fanweis[3][0]+qizi.fanweis[0][0])/2);var tmpy = Math.round((qizi.fanweis[3][1]+qizi.fanweis[0][1])/2);
                cantmp = getQiziInfoWithxy(tmpx, tmpy) ? false : true;} else if(myx == qizi.fanweis[1][0] && myy == qizi.fanweis[1][1]){var tmpx = Math.round((qizi.fanweis[3][0]+qizi.fanweis[1][0])/2);var tmpy = Math.round((qizi.fanweis[3][1]+qizi.fanweis[1][1])/2);
                cantmp = getQiziInfoWithxy(tmpx, tmpy) ? false : true;} else if(myx == qizi.fanweis[5][0] && myy == qizi.fanweis[5][1]){var tmpx = Math.round((qizi.fanweis[3][0]+qizi.fanweis[5][0])/2);var tmpy = Math.round((qizi.fanweis[3][1]+qizi.fanweis[5][1])/2);
                cantmp = getQiziInfoWithxy(tmpx, tmpy) ? false : true;} else if(myx == qizi.fanweis[6][0] && myy == qizi.fanweis[6][1]){var tmpx = Math.round((qizi.fanweis[3][0]+qizi.fanweis[6][0])/2);var tmpy = Math.round((qizi.fanweis[3][1]+qizi.fanweis[6][1])/2);
                cantmp = getQiziInfoWithxy(tmpx, tmpy) ? false : true;}} else if(qizi.x == qizi.fanweis[4][0] && qizi.y == qizi.fanweis[4][1]){//右中1if(myx == qizi.fanweis[1][0] && myy == qizi.fanweis[1][1]){var tmpx = Math.round((qizi.fanweis[4][0]+qizi.fanweis[1][0])/2);var tmpy = Math.round((qizi.fanweis[4][1]+qizi.fanweis[1][1])/2);
                cantmp = getQiziInfoWithxy(tmpx, tmpy) ? false : true;} else if(myx == qizi.fanweis[6][0] && myy == qizi.fanweis[6][1]){var tmpx = Math.round((qizi.fanweis[4][0]+qizi.fanweis[6][0])/2);var tmpy = Math.round((qizi.fanweis[4][1]+qizi.fanweis[6][1])/2);
                cantmp = getQiziInfoWithxy(tmpx, tmpy) ? false : true;}}if(!cantmp){errorMsg = typeCn+"["+number+"]不能放到此位置";return false;}} else if(qizi.number == '' || qizi.number == ''){var centerindex = 2;var centerpoint = qizi.fanweis[centerindex];var cantmp = false;if(qizi.x == centerpoint[0] && qizi.y == centerpoint[1]){for(var i = 0; i < qizi.fanweis.length; i++){if(i == centerindex){continue;}if(qizi.fanweis[i][0] == myx && qizi.fanweis[i][1] == myy){cantmp = true;}}} else{if(centerpoint[0] == myx && centerpoint[1] == myy){cantmp = true;}}if(!cantmp){errorMsg = typeCn+"["+number+"]不能放到此位置";return false;}} else if(qizi.number == '' || qizi.number == ''){if(Math.abs(myy-qizi.y)>1){ //前后一次只能走一步
            errorMsg = typeCn+"["+number+"]前后一次只能走一步";return false;}if(Math.abs(myx-qizi.x)>1){ //左右一次只能走一步
            errorMsg = typeCn+"["+number+"]左右一次只能走一步";return false;}if(Math.abs(myx-qizi.x)!=0 && Math.abs(myy-qizi.y)!=0){ //只能直走
            errorMsg = typeCn+"["+number+"]只能直走";return false;}} else if(qizi.number == '' || qizi.number == ''){if(qizi.type == 0){ //红方if(myy<qizi.y){ //不能倒着走
                errorMsg = typeCn+"["+number+"]不能倒着走";return false;}if(Math.abs(myy-qizi.y)>1){ //一次只能走一步
                errorMsg = typeCn+"["+number+"]一次只能走一步";return false;}if(Math.abs(myx-qizi.x)!=0 && Math.abs(myy-qizi.y)!=0){ //只能直走
                errorMsg = typeCn+"["+number+"]只能直走";return false;}if(qizi.y > 4){//已过河if(Math.abs(myx-qizi.x)>1){ //左右一次只能走一步
                    errorMsg = typeCn+"["+number+"]左右一次只能走一步";return false;}}else{//未过河if(qizi.x != myx){ //不能左右走
                    errorMsg = typeCn+"["+number+"]不能左右走";return false;}}} else{ //黑方if(myy>qizi.y){ //不能倒着走
                errorMsg = typeCn+"["+number+"]不能倒着走";return false;}if(Math.abs(qizi.y-myy)>1){ //一次只能走一步
                errorMsg = typeCn+"["+number+"]一次只能走一步";return false;}if(Math.abs(myx-qizi.x)!=0 && Math.abs(qizi.y-myy)!=0){ //只能直走
                errorMsg = typeCn+"["+number+"]只能直走";return false;}if(qizi.y < 5){//已过河if(Math.abs(myx-qizi.x)>1){ //左右一次只能走一步
                    errorMsg = typeCn+"["+number+"]左右一次只能走一步";return false;}}else{//未过河if(qizi.x != myx){ //不能左右走
                    errorMsg = typeCn+"["+number+"]不能左右走";return false;}}}} else {errorMsg = '我擦,你这棋是从哪弄的';return false;}var tmpqizi = getQiziInfoWithxytype(myx, myy, qizi.type);if(tmpqizi!= false){errorMsg = typeCn+"["+number+"]不能放在己方棋子上";return false;}return true;
}//处理鼠标事件
function doMouseDown(e){//console.log("鼠标点击了,坐标:"+e.clientX+", "+e.clientY);var rect = myCanvas.getBoundingClientRect();//console.log("画布坐标:"+rect.left+" ,"+rect.top);//console.log("画布尺寸:"+rect.width+" ,"+rect.height);//判断是否点击重新开始按钮if(e.clientX > chongxin_x && e.clientX < chongxin_x+button_width && e.clientY > chongxin_y && e.clientY < chongxin_y+button_height){console.log('重新开始按钮被点击了');posResult = false; //是否已经获胜
        pieceList = getQiziList(); //棋子列表
        now_type = 1; //黑方先手,0红方,1黑方
        now_status = 0; //0选棋,1下棋
        choose_id = 0;resultMsg = new Array((now_type == 0 ? '红方' : '黑方')+"优先执棋...");draw();}if(posResult == true){return ;}//下棋区域if(e.clientX < left_width+pading+margin && e.clientY < left_height+pading+margin){var myx = 0;var myy = 0;for(var i = 0; i <= maxFieldNum+1; i++){var minx = pading+perWidth*i;var maxx = pading+perWidth*(i+1);if(e.clientX >= minx && e.clientX <= maxx){if(Math.abs(e.clientX-minx) < Math.abs(maxx-e.clientX)){myx = i;} else{myx = i+1;}}}for(var i = 0; i <= maxLineNum+1; i++){var miny = pading+perHeight*i;var maxy = pading+perHeight*(i+1);if(e.clientY >= miny && e.clientY <= maxy){if(Math.abs(e.clientY-miny) < Math.abs(maxy-e.clientY)){myy = i;} else{myy = i+1;}}}console.log("鼠标点击的下棋区域,坐标:"+myx+","+myy);//now_type 黑方先手,0红方,1黑方if(now_status == 0){//选棋//console.log("选棋");for(var i = 0; i < pieceList.length; i++){if(pieceList[i].x == myx && pieceList[i].y == myy && pieceList[i].type == now_type){var typeCn = now_type == 0 ? '红方' : '黑方';resultMsg.push(typeCn+"选中["+pieceList[i].number+"]");now_status = 1; //1下棋
                    choose_id = pieceList[i].id;errorMsg = '';draw();}}} else if(now_status == 1){//下棋var choose_qiziinfo = getQiziInfoWithid(choose_id);if(choose_qiziinfo == false){errorMsg = '我擦,请先选棋';return false;}if(choose_qiziinfo.x == myx && choose_qiziinfo.y == myy){var typeCn = now_type == 0 ? '红方' : '黑方';resultMsg.push(typeCn+"撤销选中["+pieceList[i].number+"]");now_status = 0; //0选棋
                choose_id = 0;draw();return true;}//验证是否可以走棋,位置是否正确判断if(checkxy(choose_qiziinfo, myx, myy) == false){var typeCn = now_type == 0 ? '红方' : '黑方';now_status = 0; //0选棋
                choose_id = 0;draw();return true;}//console.log("下棋");for(var i = 0; i < pieceList.length; i++){var typeCn = now_type == 0 ? '红方' : '黑方';if(pieceList[i].id == choose_id){pieceList[i].x = myx;pieceList[i].y = myy;resultMsg.push(typeCn+"将["+pieceList[i].number+"]移动到坐标:"+myx+","+myy);choose_id = 0;now_status = 0; //0选棋//换方if(now_type == 0){now_type = 1;} else{now_type = 0;}}}//判断是走棋还是吃棋,目标位置是否存在棋子//console.log(choose_qiziinfo);var tmptype = choose_qiziinfo.type == 0 ? 1 : 0;var qiziExists = getQiziInfoWithxytype(myx, myy, tmptype);//console.log(qiziExists);//处理吃棋,过滤掉被吃棋子if(qiziExists != false){var typeCn = qiziExists.type == 0 ? '红方' : '黑方';resultMsg.push(typeCn+"["+qiziExists.number+"]被吃");pieceList = pieceList.filter(function(item) {return item.id != qiziExists.id;});}//判断是否将军var jiangjun = isJiangjun(choose_qiziinfo.type);if(jiangjun){var typeCn = choose_qiziinfo.type == 0 ? '红方' : '黑方';resultMsg.push(typeCn+"["+choose_qiziinfo.number+"]将军");}//判断是否已获胜
            posResult = getPosResult(choose_qiziinfo.type);if(posResult){var typeCn = choose_qiziinfo.type == 0 ? '红方' : '黑方';resultMsg.push(typeCn+"获胜");}//重绘棋盘和棋子
            draw();}}
}//判断是否已获胜
function getPosResult(type){var tmptype = type == 0 ? 1 : 0;var shuai = getQiziInfoWithnumbers(new Array('', ''), tmptype);//console.log(shuai);if(shuai == false){return true;}return false;
}//判断是否将军
function isJiangjun(type){var tmptype = type == 0 ? 1 : 0;var shuai = getQiziInfoWithnumbers(new Array('', ''), tmptype);//console.log(shuai);for(var i = 0; i < pieceList.length; i++){if(pieceList[i].type != type){continue;}var qizi = pieceList[i];if(qizi.number == ''){if(shuai.x == qizi.x){var mintmp = qizi.y > shuai.y ? shuai.y : qizi.y;var maxtmp = qizi.y > shuai.y ? qizi.y : shuai.y;for(var j = mintmp+1; j < maxtmp; j++){var tmpqizi = getQiziInfoWithxy(qizi.x, j);if(tmpqizi != false){return false;}}return true;} else if(shuai.y == qizi.y){var mintmp = qizi.x > shuai.x ? shuai.x : qizi.x;var maxtmp = qizi.x > shuai.x ? qizi.x : shuai.x;for(var j = mintmp+1; j < maxtmp; j++){var tmpqizi = getQiziInfoWithxy(j, qizi.y);if(tmpqizi != false){return false;}}return true;}} else if(qizi.number == '' || qizi.number == ''){//console.log(qizi);if(shuai.x == qizi.x){var jiangenum = 0;var mintmp = qizi.y > shuai.y ? shuai.y : qizi.y;var maxtmp = qizi.y > shuai.y ? qizi.y : shuai.y;for(var j = mintmp+1; j < maxtmp; j++){var tmpqizi = getQiziInfoWithxy(qizi.x, j);if(tmpqizi != false){jiangenum++;}}return jiangenum == 1 ? true : false;} else if(shuai.y == qizi.y){var jiangenum = 0;var mintmp = qizi.x > shuai.x ? shuai.x : qizi.x;var maxtmp = qizi.x > shuai.x ? qizi.x : shuai.x;for(var j = mintmp+1; j < maxtmp; j++){var tmpqizi = getQiziInfoWithxy(j, qizi.y);if(tmpqizi != false){jiangenum++;}}console.log(jiangenum);return jiangenum == 1 ? true : false;}} else if(qizi.number == ''){var cantmp = false;if(Math.abs(shuai.x - qizi.x) == 1 && Math.abs(shuai.y - qizi.y) == 2){var tmpx = qizi.x;var tmpy = Math.round((shuai.y + qizi.y) / 2);cantmp = getQiziInfoWithxy(tmpx, tmpy) ? false : true;} else if(Math.abs(shuai.x - qizi.x) == 2 && Math.abs(shuai.y - qizi.y) == 1){var tmpx = Math.round((shuai.x + qizi.x) / 2);var tmpy = qizi.y;cantmp = getQiziInfoWithxy(tmpx, tmpy) ? false : true;}return cantmp;} else if(qizi.number == '' || qizi.number == ''){//
        } else if(qizi.number == '' || qizi.number == ''){//
        } else if(qizi.number == '' || qizi.number == ''){//
        } else if(qizi.number == '' || qizi.number == ''){if(shuai.x == qizi.x){if(shuai.type == 0 && qizi.y - 1 == shuai.y){return true;} else if(shuai.type == 1 && qizi.y + 1 == shuai.y){return true;}return false;} else if(shuai.y == qizi.y){if(qizi.x - 1 == shuai.x){return true;} else if(qizi.x + 1 == shuai.x){return true;}return false;}}}return false;
}function draw(){//清理画布var ctx = myCanvas.getContext("2d");ctx.beginPath();ctx.clearRect(0, 0, paint_width, paint_height);//画布背景var ctx = myCanvas.getContext("2d");ctx.beginPath();ctx.fillStyle = "rgb(210,180,140)";ctx.fillRect(0,0,paint_width,paint_height);//console.log("画布背景尺寸:宽:"+paint_width+",高:"+paint_height);//左侧背景var ctx = myCanvas.getContext("2d");ctx.beginPath();ctx.fillStyle = "rgb(255,250,240)";ctx.fillRect(pading,pading,left_width,left_height);//console.log("左侧背景尺寸:宽:"+left_width+",高:"+left_height);//右侧背景var ctx = myCanvas.getContext("2d");ctx.beginPath();ctx.fillStyle = "rgb(250,250,210)";ctx.fillRect(left_width+pading,pading,right_width,right_height);//console.log("右侧背景尺寸:宽:"+right_width+",高:"+right_height);//横线for(var i = 0; i <= maxLineNum; i++){var ctx = myCanvas.getContext("2d");ctx.beginPath();ctx.moveTo(pading, pading+perHeight*i);ctx.lineTo(pading+left_width, pading+perHeight*i);ctx.strokeStyle = 'black';ctx.lineWidth = 1;ctx.stroke();}//竖线for(var i = 0; i <= maxFieldNum; i++){var ctx = myCanvas.getContext("2d");ctx.beginPath();if(i == 0 || i == maxFieldNum){ctx.moveTo(pading+perWidth*i, pading);ctx.lineTo(pading+perWidth*i, pading+left_height);} else{ctx.moveTo(pading+perWidth*i, pading);ctx.lineTo(pading+perWidth*i, pading+perHeight*4);ctx.moveTo(pading+perWidth*i, pading+perHeight*5);ctx.lineTo(pading+perWidth*i, pading+perHeight*9);}ctx.strokeStyle = 'black';ctx.lineWidth = 1;ctx.stroke();}//士路红方var ctx = myCanvas.getContext("2d");ctx.beginPath();ctx.moveTo(pading+perWidth*3, pading+perHeight*0);ctx.lineTo(pading+perWidth*5, pading+perHeight*2);ctx.strokeStyle = 'gray';ctx.lineWidth = 1;ctx.stroke();var ctx = myCanvas.getContext("2d");ctx.beginPath();ctx.moveTo(pading+perWidth*5, pading+perHeight*0);ctx.lineTo(pading+perWidth*3, pading+perHeight*2);ctx.strokeStyle = 'gray';ctx.lineWidth = 1;ctx.stroke();//士路黑方var ctx = myCanvas.getContext("2d");ctx.beginPath();ctx.moveTo(pading+perWidth*3, pading+perHeight*7);ctx.lineTo(pading+perWidth*5, pading+perHeight*9);ctx.strokeStyle = 'gray';ctx.lineWidth = 1;ctx.stroke();var ctx = myCanvas.getContext("2d");ctx.beginPath();ctx.moveTo(pading+perWidth*5, pading+perHeight*7);ctx.lineTo(pading+perWidth*3, pading+perHeight*9);ctx.strokeStyle = 'gray';ctx.lineWidth = 1;ctx.stroke();//相路红方var ctx = myCanvas.getContext("2d");ctx.setLineDash([5, 5]);ctx.lineDashOffset = 0;ctx.beginPath();ctx.moveTo(pading+perWidth*2, pading+perHeight*0);ctx.lineTo(pading+perWidth*6, pading+perHeight*4);ctx.strokeStyle = 'gray';ctx.lineWidth = 1;ctx.stroke();var ctx = myCanvas.getContext("2d");ctx.setLineDash([5, 5]);ctx.lineDashOffset = 0;ctx.beginPath();ctx.moveTo(pading+perWidth*6, pading+perHeight*0);ctx.lineTo(pading+perWidth*2, pading+perHeight*4);ctx.strokeStyle = 'gray';ctx.lineWidth = 1;ctx.stroke();var ctx = myCanvas.getContext("2d");ctx.setLineDash([5, 5]);ctx.lineDashOffset = 0;ctx.beginPath();ctx.moveTo(pading+perWidth*0, pading+perHeight*2);ctx.lineTo(pading+perWidth*2, pading+perHeight*0);ctx.strokeStyle = 'gray';ctx.lineWidth = 1;ctx.stroke();var ctx = myCanvas.getContext("2d");ctx.setLineDash([5, 5]);ctx.lineDashOffset = 0;ctx.beginPath();ctx.moveTo(pading+perWidth*0, pading+perHeight*2);ctx.lineTo(pading+perWidth*2, pading+perHeight*4);ctx.strokeStyle = 'gray';ctx.lineWidth = 1;ctx.stroke();var ctx = myCanvas.getContext("2d");ctx.setLineDash([5, 5]);ctx.lineDashOffset = 0;ctx.beginPath();ctx.moveTo(pading+perWidth*6, pading+perHeight*0);ctx.lineTo(pading+perWidth*8, pading+perHeight*2);ctx.strokeStyle = 'gray';ctx.lineWidth = 1;ctx.stroke();var ctx = myCanvas.getContext("2d");ctx.setLineDash([5, 5]);ctx.lineDashOffset = 0;ctx.beginPath();ctx.moveTo(pading+perWidth*6, pading+perHeight*4);ctx.lineTo(pading+perWidth*8, pading+perHeight*2);ctx.strokeStyle = 'gray';ctx.lineWidth = 1;ctx.stroke();//相路黑方var ctx = myCanvas.getContext("2d");ctx.setLineDash([5, 5]);ctx.lineDashOffset = 0;ctx.beginPath();ctx.moveTo(pading+perWidth*2, pading+perHeight*5);ctx.lineTo(pading+perWidth*6, pading+perHeight*9);ctx.strokeStyle = 'gray';ctx.lineWidth = 1;ctx.stroke();var ctx = myCanvas.getContext("2d");ctx.setLineDash([5, 5]);ctx.lineDashOffset = 0;ctx.beginPath();ctx.moveTo(pading+perWidth*6, pading+perHeight*5);ctx.lineTo(pading+perWidth*2, pading+perHeight*9);ctx.strokeStyle = 'gray';ctx.lineWidth = 1;ctx.stroke();var ctx = myCanvas.getContext("2d");ctx.setLineDash([5, 5]);ctx.lineDashOffset = 0;ctx.beginPath();ctx.moveTo(pading+perWidth*0, pading+perHeight*7);ctx.lineTo(pading+perWidth*2, pading+perHeight*5);ctx.strokeStyle = 'gray';ctx.lineWidth = 1;ctx.stroke();var ctx = myCanvas.getContext("2d");ctx.setLineDash([5, 5]);ctx.lineDashOffset = 0;ctx.beginPath();ctx.moveTo(pading+perWidth*0, pading+perHeight*7);ctx.lineTo(pading+perWidth*2, pading+perHeight*9);ctx.strokeStyle = 'gray';ctx.lineWidth = 1;ctx.stroke();var ctx = myCanvas.getContext("2d");ctx.setLineDash([5, 5]);ctx.lineDashOffset = 0;ctx.beginPath();ctx.moveTo(pading+perWidth*6, pading+perHeight*5);ctx.lineTo(pading+perWidth*8, pading+perHeight*7);ctx.strokeStyle = 'gray';ctx.lineWidth = 1;ctx.stroke();var ctx = myCanvas.getContext("2d");ctx.setLineDash([5, 5]);ctx.lineDashOffset = 0;ctx.beginPath();ctx.moveTo(pading+perWidth*6, pading+perHeight*9);ctx.lineTo(pading+perWidth*8, pading+perHeight*7);ctx.strokeStyle = 'gray';ctx.lineWidth = 1;ctx.stroke();//楚河var ctx = myCanvas.getContext("2d");ctx.beginPath();ctx.fillStyle="rgb(220,220,220)";ctx.font="60px lisu";ctx.fillText("楚河", perWidth+pading-perWidth/2.1, pading+perHeight*4+perHeight/1.5);//漢界var ctx = myCanvas.getContext("2d");ctx.beginPath();ctx.fillStyle="rgb(220,220,220)";ctx.font="60px lisu";ctx.fillText("漢界", perWidth*7+pading-perWidth/2.1, pading+perHeight*4+perHeight/1.5);//画上已经下了的棋子//console.log(pieceList);for(var i = 0; i < pieceList.length; i++){var x = pieceList[i].x;var y = pieceList[i].y;var type = pieceList[i].type;var number = pieceList[i].number;var choose = pieceList[i].id == choose_id ? 1 : 0;//console.log(choose);if(type == 0){var color = choose == 0 ? 'rgb(139,105,20)' : 'rgb(238,207,161)';var border_color = choose == 0 ? 'red' : 'orange';var font_color = 'red';} else{var color = choose == 0 ? 'rgb(139,105,20)' : 'rgb(238,207,161)';var border_color = choose == 0 ? 'black' : 'gray';var font_color = 'black';}var ctx = myCanvas.getContext("2d");if(choose == 0){ctx.setLineDash([0, 0]);ctx.lineDashOffset = 0;} else{ctx.setLineDash([1, 1]);ctx.lineDashOffset = 0;}ctx.beginPath();ctx.arc(perWidth*x+pading,pading+y*perHeight,perWidth/3.7,0,2*Math.PI);
        ctx.fillStyle = color;ctx.lineWidth=choose == 0 ? '1' : '2';ctx.strokeStyle = border_color;ctx.fill();ctx.stroke();ctx.fillStyle=font_color;ctx.font="35px lisu";ctx.fillText(number, perWidth*x+pading-perWidth/6.2, pading+y*perHeight+perHeight/6.2);}//重新开始按钮
    chongxin_x = left_width+pading+right_width/3;
    chongxin_y = pading+right_height/30;var ctx = myCanvas.getContext("2d");ctx.beginPath();ctx.fillStyle = "rgb(205,155,29)";ctx.fillRect(chongxin_x,chongxin_y,button_width,button_height);ctx.fillStyle='white';ctx.font="14px Arial";ctx.fillText('重新开始', chongxin_x+button_width/3.5,chongxin_y+button_height/1.6);if(errorMsg != ''){msg_x = left_width+pading+button_width/1.3;
        msg_y = pading+right_height/8;var ctx = myCanvas.getContext("2d");ctx.beginPath();ctx.fillStyle='IndianRed';ctx.font="14px Arial";ctx.fillText(errorMsg, msg_x,msg_y);}//显示获胜信息if(resultMsg.length > 0){var maxmsgnum = 30;var startIndex = resultMsg.length-maxmsgnum>0 ? resultMsg.length-maxmsgnum : 0;var endIndex = resultMsg.length;//console.log(startIndex);//console.log(endIndex);var resultMsg1 = resultMsg.slice(startIndex, endIndex);for(var i = 0; i < resultMsg1.length; i++){msg_x = left_width+pading+button_width/1.3;
            msg_y = pading+right_height/6+18*(i+1);var ctx = myCanvas.getContext("2d");ctx.beginPath();ctx.fillStyle='SeaGreen';ctx.font="14px Arial";ctx.fillText("["+(startIndex+1+i)+"]"+resultMsg1[i], msg_x,msg_y);}}myCanvas.addEventListener('mousedown', doMouseDown,true);myCanvas.focus();//window.addEventListener('mousedown', doMouseDown, true);
}//获取单个棋子
function getQiziInfoWithid(id){for(var i = 0; i < pieceList.length; i++){if(pieceList[i].id == id){return pieceList[i];}}return false;
}//获取单个棋子
function getQiziInfoWithxy(x, y){for(var i = 0; i < pieceList.length; i++){if(pieceList[i].x == x && pieceList[i].y == y){return pieceList[i];}}return false;
}//获取单个棋子
function getQiziInfoWithxytype(x, y, type){for(var i = 0; i < pieceList.length; i++){if(pieceList[i].x == x && pieceList[i].y == y && pieceList[i].type == type){return pieceList[i];}}return false;
}//获取单个棋子
function getQiziInfoWithnumbers(numbers, type){for(var i = 0; i < pieceList.length; i++){if(type != pieceList[i].type){continue;}if(numbers.includes(pieceList[i].number)){return pieceList[i];}}return false;
}function getUnixTime(){return Math.floor(Date.now() / 1000);
}function getRandomInt(min, max) {min = Math.ceil(min);max = Math.floor(max);return Math.floor(Math.random() * (max - min + 1)) + min;
}draw();
</script></body>
</html>

 

效果:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/794465.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

yolo与目标检测(v1-v5)

yolo v1-v5与目标检测 深度学习经典检测方法概述 目标检测的两种方法从yolov1开始讲解,v2,v3都是在此基础上 单阶段目标检测,需要输出的就是四个值(x,y,w,h) 这样看起来很像是一个回归任务而双阶段目标检测,是先选出候选区域,在进行预测,具体细节可以看完之前文章,物体检…

Hadoop(二)Hadoop概述

概述 Hadoop是什么Hadoop是一个由Apache基金会所开发的分布式系统基础架构 分布式系统:多台服务器共同完成一个任务(例如多台计算机共同存储一份大数据) 主要解决:海量数据的存储和海量数据的分析计算问题 广义上来说,Hadoop通常是指一个更广泛的概念——Hadoop生态圈Hado…

出库申请单、其他出库单套件使用指南

出库申请单、其他出库单套件使用指南 出库申请单使用套件需要把业务类型​修改为空 点击套件展开或者保存时会自动展开套件​​ ‍ 其他出库单 如图,套件的单据,新明细会出现在第一个标签,只有一个删除行的功能。 修改新明细​中的数量会自动联动到明细信息​中 ​​ ‍博客…

程序安装:不会安装该公布程序,因为它可能不安全,请与管理员联系解决办法

程序安装:不会安装该公布程序,因为它可能不安全,请与管理员联系解决办法 删除注册表中Products下的项。该方法确实能解决问题,但为防止误删其他软件注册信息,将此法作如下改进,发现依然好使: 将注册表中 HKEY_CURRENT_USER \ Software \ Microsoft \ Installer \ Produc…

KernelWarehouse:英特尔开源轻量级涨点神器,动态卷积核突破100+ | ICML 20242A

动态卷积学习n个静态卷积核的线性混合,加权使用它们输入相关的注意力,表现出比普通卷积更优越的性能。然而,它将卷积参数的数量增加了n倍,因此并不是参数高效的。这导致不能探索n>100的设置(比典型设置n<10大一个数量级),推动动态卷积性能边界提升的同时享受参数的…

tarjan—算法的神(一)cw

本篇包含 tarjan 求强连通分量、边双连通分量、割点 部分, tarjan 求点双连通分量、桥(割边)在下一篇。伟大的 Robert Tarjan 创造了众多被人们所熟知的算法及数据结构,最著名的如:(本文的)连通性相关的 tarjan 算法,Splay-Tree,Toptree,tarjan 求 lca 等等。 注:有…

【微信小程序反编译】入门1

原创 zkaq - Tobisec 掌控安全EDU一、前言 这几天在跟着师傅一起学习微信小程序的相关知识点,前面的微信小程序的漏洞挖掘蛮简单的,但是到后面需要黑盒测试了,就需要我们对小程序进行一个反编译,进行一个代码审计相关的知识点了。 小程序的反编译相关工具有好几个,下面我给…

代码随想录day55 || 图论5

并查集197 图中是否存在有效路径 var father []int func validPath(n int, edges [][]int, source int, destination int) bool {// 使用并查集算法,涉及到的操作,包括init,find, issample,joinfather = make([]int, n)for i, _ := range father { // initfather[i] = i}…

D45XT120-ASEMI无人机专用D45XT120

D45XT120-ASEMI无人机专用D45XT120编辑:ll D45XT120-ASEMI无人机专用D45XT120 型号:26MT160 品牌:ASEMI 封装:DXT-5 批号:2024+ 现货:50000+ 最大重复峰值反向电压:1200V 最大正向平均整流电流(Vdss):45A 功率(Pd):大功率 芯片个数:5 引脚数量:5 安装方式:直插 类型…

golang中关于死锁的思考与学习

1、Golang中死锁的触发条件 1.1 书上关于死锁的四个必要条件的讲解 发生死锁时,线程永远不能完成,系统资源被阻碍使用,以致于阻止了其他作业开始执行。在讨论处理死锁问题的各种方法之前,我们首先深入讨论一下死锁特点。 必要条件: 如果在一个系统中以下四个条件同时成立,…

ASP.NET 8 AOT 遍历文件夹获取文件名称及时长

朋友下了N多视频记不住文件夹下都有啥了…问批处理怎么导出文件夹下所有文件名及视频时长…批处理导出文件名好弄,获取视频时长真没用过…想到 .net 控制台程序 AOT 发布,不和批处理差不多效果…新建个控制台项目选下使用AOT 首先要获取文件的时长,我们需要用下 TagLibSharp…

公安网络信息体系能力分类

来源:中国电子科学研究院学报,《公安网络信息体系顶层设计》