中国象棋js代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        class Chess {
            constructor(canvasId) {
                this.canvas = document.getElementById(canvasId);
                this.ctx = this.canvas.getContext("2d");

                this.initCanvas();

                this.resetData();

            }

            // 重置数据，再来一局
            resetData() {
                this.redBottom = true; // 红方在下边（这个属性可以用来给不同的用户显示不同的棋盘）
                this.toMove = {};
                this.active = "red"; // 当前走棋方
                this.bottomColor = "red"; // 红方在下边
                this.chessSteps = []; // 走棋记录

                this.initChessBoard();
                this.initComposition();
                this.drawPieces();
            }

            // 切换走棋方
            exchange() {
                this.active = this.active == 'red' ? 'black': 'red';
                // this.reverseChess();
            }

            // 反转棋局数组
            reverseChess() {
                this.composition = this.deepReverse(this.composition);
            }

            // 渲染棋盘和棋子
            renderUi() {
                //清除之前的画布
                this.ctx.clearRect(0, 0, this.width, this.height);
                this.initChessBoard();
                this.drawPieces();
            }

            // 输赢判断
            getVictor() {
                var flag = false;
                for (let i = 0, len = this.composition.length; i < len; i++) {
                    for (let j = 0, len1 = this.composition[i].length; j < len1; j++) {
                        //              if(){
                        //
                        //              }
                    }
                }
            }

            // 初始化canvas并绑定点击事件
            initCanvas() {
                // var bodys = document.documentElement || document.body;
                var body = document.body;
                // console.log("%O",body);
                var h = body.clientHeight;
                var w = body.clientWidth;
                if (h > w) {
                    this.cellWidth = w / 10;
                } else {
                    this.cellWidth = h / 11;
                }
                this.width = this.cellWidth * 10;
                this.height = this.cellWidth * 11;
                this.canvas.width = this.width;
                this.canvas.height = this.height;

                // 绑定点击事件
                this.canvas.addEventListener("click", (e)=> {
                    var offset = this.canvas.getBoundingClientRect();
                    var x = Math.round((e.clientX - offset.left - this.cellWidth) / this.cellWidth);
                    var y = Math.round((e.clientY - offset.top - this.cellWidth) / this.cellWidth);
                    // console.log(x, y, "点击位置");
                    // 走棋
                    if (x >= 0 && x <= 8 && y <= 9 && y >= 0) {
                        this.goStep(y, x);
                        console.log(this.chessSteps);
                    } else {
                        console.log("点在其他地方,没在棋局中");
                    }
                }, false);

            }

            // 初始化棋盘
            initChessBoard() {
                //设置全局属性
                var padding = 2;
                var borderWidth = 5;
                var borderColor = "#333";
                var bgColor = "#a6753a";
                var lineColor = "#333";
                var fontColor = bgColor;
                var bgWidth = this.cellWidth - borderWidth - padding;


                // 画边框
                this.ctx.strokeStyle = bgColor;
                this.ctx.lineWidth = bgWidth*2;
                this.ctx.lineJoin = "miter";
                this.ctx.beginPath();
                this.ctx.moveTo(0, 0);
                this.ctx.lineTo(this.width, 0);
                this.ctx.lineTo(this.width, this.height);
                this.ctx.lineTo(0, this.height);
                this.ctx.closePath();
                this.ctx.stroke();

                // 画外边线
                this.ctx.strokeStyle = borderColor;
                this.ctx.lineWidth = borderWidth;
                this.ctx.lineJoin = "miter";
                this.ctx.beginPath();
                this.ctx.moveTo(0+bgWidth, 0+bgWidth);
                this.ctx.lineTo(0+this.width-bgWidth, 0+bgWidth);
                this.ctx.lineTo(this.width-bgWidth, this.height-bgWidth);
                this.ctx.lineTo(0+bgWidth, this.height-bgWidth);
                this.ctx.stroke();

                this.ctx.save();

                this.ctx.translate(this.cellWidth, this.cellWidth);
                this.ctx.beginPath();
                // 画横线
                for (let i = 0; i < 10; i++) {
                    this.ctx.moveTo(0, this.cellWidth*i);
                    this.ctx.lineTo(this.cellWidth*8, this.cellWidth*i);
                }

                // 画纵线
                for (let i = 0; i < 9; i++) {
                    this.ctx.moveTo(this.cellWidth*i, 0);
                    this.ctx.lineTo(this.cellWidth*i, this.cellWidth*4);
                    this.ctx.moveTo(this.cellWidth*i, this.cellWidth*5);
                    this.ctx.lineTo(this.cellWidth*i, this.cellWidth*9);
                }

                // 链接断线
                this.ctx.moveTo(0, this.cellWidth*4);
                this.ctx.lineTo(0, this.cellWidth*5);
                this.ctx.moveTo(this.cellWidth*8, this.cellWidth*4);
                this.ctx.lineTo(this.cellWidth*8, this.cellWidth*5);

                this.ctx.strokeStyle = lineColor;
                this.ctx.lineWidth = 1;
                this.ctx.stroke();

                // 写（楚河、汉界）汉字
                this.ctx.font = `${this.cellWidth*0.75}px 方正舒体`; // 隶书  方正舒体
                this.ctx.fillStyle = fontColor;
                this.ctx.textBaseline = "middle";
                this.ctx.textAlign = "center";
                this.ctx.fillText("楚", this.cellWidth*1.5, this.cellWidth*4.5);
                this.ctx.fillText("河", this.cellWidth*2.5, this.cellWidth*4.5);
                this.ctx.fillText("汉", this.cellWidth*5.5, this.cellWidth*4.5);
                this.ctx.fillText("界", this.cellWidth*6.5, this.cellWidth*4.5);

                // 画炮位
                var paoArr = [{
                    x: 1, y: 2
                }, {
                    x: 7, y: 2
                }, {
                    x: 7, y: 7
                }, {
                    x: 1, y: 7
                }];
                for (let i = 0, len = paoArr.length; i < len; i++) {
                    this.markP(paoArr[i].x, paoArr[i].y);
                }
                // 画兵和卒位
                var bingArr = [];
                for (let i = 0; i < 9; i += 2) {
                    bingArr.push({
                        x: i, y: 3
                    });
                    bingArr.push({
                        x: i, y: 6
                    });
                }

                // 画皇宫
                this.ctx.beginPath();
                this.ctx.moveTo(this.cellWidth*3, 0);
                this.ctx.lineTo(this.cellWidth*5, this.cellWidth*2);
                this.ctx.moveTo(this.cellWidth*5, 0);
                this.ctx.lineTo(this.cellWidth*3, this.cellWidth*2);

                this.ctx.moveTo(this.cellWidth*3, this.cellWidth*9);
                this.ctx.lineTo(this.cellWidth*5, this.cellWidth*7);
                this.ctx.moveTo(this.cellWidth*5, this.cellWidth*9);
                this.ctx.lineTo(this.cellWidth*3, this.cellWidth*7);
                this.ctx.stroke();

                for (let i = 0, len = bingArr.length; i < len; i++) {
                    this.markP(bingArr[i].x, bingArr[i].y);
                }

                this.ctx.restore();
            }

            // 方向数字化
            nd(direction) {
                var res = {
                    h: 0, v: 0
                }; // h horizontal v vertical
                switch (direction) {
                    case "r":
                        res.h = 1;
                        res.v = 0;
                        break;
                    case "rd":
                        res.h = 1;
                        res.v = 1;
                        break;
                    case "d":
                        res.h = 0;
                        res.v = 1;
                        break;
                    case "ld":
                        res.h = -1;
                        res.v = 1;
                        break;
                    case "l":
                        res.h = -1;
                        res.v = 0;
                        break;
                    case "lt":
                        res.h = -1;
                        res.v = -1;
                        break;
                    case "t":
                        res.h = 0;
                        res.v = -1;
                        break;
                    case "rt":
                        res.h = 1;
                        res.v = -1;
                        break;
                    default: console.error("方向输入有误");
                    }
                    return res;
                }

                markP(x, y) {
                    // 标出上下左右
                    var arr = [];
                    if (x === 0) {
                        arr = ["rt", "rd"];
                    } else if (x === 8) {
                        arr = ["lt", "ld"];
                    } else {
                        arr = ["lt", "rt", "rd", "ld"];
                    }

                    var padding = this.cellWidth/10;
                    var length = this.cellWidth/5
                    for (let i = 0; i < arr.length; i++) {
                        this.mark(x, y, arr[i], padding, length);
                    }
                }

                // 四个标记中的一个
                mark(x, y, direction, padding, length) {
                    var d = this.nd(direction);
                    var h = d.h;
                    var v = d.v;

                    this.ctx.beginPath();
                    this.ctx.moveTo(this.cellWidth*x+h*(padding+length), this.cellWidth*y+v*padding);
                    this.ctx.lineTo(this.cellWidth*x+h*padding, this.cellWidth*y+v*padding);
                    this.ctx.lineTo(this.cellWidth*x+h*padding, this.cellWidth*y+v*(padding+length));
                    this.ctx.stroke();
                }

                // 初始化棋局
                initComposition() {
                    var origin = [
                        ["車", "馬", "象", "士", "将", "士", "象", "馬", "車"],
                        ["", "", "", "", "", "", "", "", ""],
                        ["", "炮", "", "", "", "", "", "炮", ""],
                        ["卒", "", "卒", "", "卒", "", "卒", "", "卒"],
                        ["", "", "", "", "", "", "", "", ""],
                        ["", "", "", "", "", "", "", "", ""],
                        ["兵", "", "兵", "", "兵", "", "兵", "", "兵"],
                        ["", "砲", "", "", "", "", "", "砲", ""],
                        ["", "", "", "", "", "", "", "", ""],
                        ["車", "馬", "相", "仕", "帥", "仕", "相", "馬", "車"]
                    ];

                    this.composition = [];
                    for (let i = 0, len = origi.........完整代码请登录后点击上方下载按钮下载查看