使用canvas画象棋界面

于 2024-05-20 17:25:10 发布
阅读量319 收藏
点赞数 12
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56523345/article/details/139070761
版权 
// 地图宽高  8/  8 +河界
// 格子
import {c} from "vite/dist/node/types.d-aGj9QkWt";

const lattice = 100;
const map = {
    width: lattice * 8,
    height: lattice * 8 + 100,
}

// 每个格子大小
class Chess {
    private canvas: HTMLCanvasElement;
    private width: number;
    private height: number;
    private ctx: CanvasRenderingContext2D;
    private initKios = ["車", "馬", "象", "士", "将", "士", "象", "馬", "車", "炮", "兵", "卒", "帅"]
    // 红方
    private redKiko: Kiko[] = []
    // 黑方
    private blackKiko: Kiko[] = []
    // 棋子画布
    private kikoCanvas: HTMLCanvasElement;
    private kikoCanvasCtx: CanvasRenderingContext2D;

    // 先手 // 默认红方
    private isStatus: ColorType = ColorType.RED;
    // 当前选中棋子
    private currentKiko: Kiko;

    constructor(canvas: HTMLCanvasElement) {
        this.canvas = canvas;
        this.ctx = this.canvas.getContext("2d")!;
        this.init();
    }

    init() {
        const {clientWidth, clientHeight} = document.documentElement;
        this.width = clientWidth;
        this.height = clientHeight;
        this.canvas.width = this.width;
        this.canvas.height = this.height;
        this.ctx.translate(100, 50)
        this.createCanvas();
        this.drawMap();
        this.drawKiKos();
    }

    createCanvas() {
        if (this.kikoCanvas) return;
        const newCanvas = document.createElement("canvas");
        this.kikoCanvas = newCanvas;
        newCanvas.width = map.width + 100;
        newCanvas.height = map.height + 150;
        newCanvas.style.position = "absolute";
        newCanvas.style.left = "550px";
        newCanvas.style.top = "-10px";
        newCanvas.style.width = map.width + 100 + "px";
        newCanvas.style.height = map.height + 150 + "px";
        // newCanvas.style.background="red";
        // this.canvas.appendChild(newCanvas);
        this.canvas.parentNode!.appendChild(newCanvas)
        this.kikoCanvasCtx = this.kikoCanvas.getContext("2d")!;
        this.kikoCanvasCtx.translate(50, 50)
        this.kikoCanvas.addEventListener("mousedown", e => {
            // 拿到坐标
            const {clientX, clientY} = e;
            const {x,y} = {
                x:clientX - this.kikoCanvas.offsetLeft - 50,
                y:clientY - this.kikoCanvas.offsetTop - 60
            }
            if(!this.currentKiko){
                console.log(clientX - this.kikoCanvas.offsetLeft - 50, clientY - this.kikoCanvas.offsetTop - 60)
                //是红方还是黑方
                const item = this.getCheckKiko(x,y);
                if(item){
                    this.currentKiko = item!;
                }
                console.log(item)
            }else {
                this.currentKiko.move(x,y);
                Kiko.drawKiko(this.redKiko);
                Kiko.drawKiko(this.blackKiko);
                this.currentKiko = undefined;
            }

        })

    }

    //画地图
    drawMap() {
        // this.ctx.strokeStyle="red"
        this.ctx.lineWidth = 2
        this.ctx.beginPath();
        this.ctx.moveTo(500, 20);
        this.ctx.lineTo(500 + map.width, 20);
        this.ctx.lineTo(500 + map.width, 20 + map.height);
        this.ctx.lineTo(500, 20 + map.height)
        this.ctx.lineTo(500, 20);

        for (let i = 0; i < 8; i++) {
            for (let j = 0; j < 9; j++) {
                if (j == 4) {//画楚河汉界
                    this.ctx.font = " bold 50px 楷书";
                    if (i == 1) {
                        this.ctx.fillText("楚 河", 500 + i * lattice, 30 + j * lattice + lattice / 2)
                    } else if (i == 6) {
                        this.ctx.fillText("汉 界", 500 + i * lattice, 30 + j * lattice + lattice / 2)
                    }
                } else {
                    this.ctx.rect(500 + i * lattice, 20 + j * lattice, lattice, lattice);
                }
                // 画x
                if ([3].includes(i) && [0, 7].includes(j)) {
                    this.ctx.moveTo(500 + i * lattice, 20 + j * lattice)
                    this.ctx.lineTo(500 + i * lattice + 200, 20 + j * lattice + 200)
                    this.ctx.moveTo(700 + i * lattice, 20 + j * lattice)
                    this.ctx.lineTo(500 + i * lattice, 20 + j * lattice + 200)
                }

                if ([2, 4, 6].includes(i) && [2, 5].includes(j)) {
                    this.drawTriangle(i, j)
                }
                if ([1, 7].includes(i) && [1, 6].includes(j)) {
                    this.drawTriangle(i, j)
                }
                if (i == 0 && [2, 5].includes(j)) {
                    let offset = 490;
                    this.ctx.moveTo(offset + 20 + i * lattice, 100 + j * lattice)
                    this.ctx.lineTo(offset + 20 + i * lattice, 110 + j * lattice)
                    this.ctx.lineTo(offset + 30 + i * lattice, 110 + j * lattice)
                    this.ctx.moveTo(offset + 30 + i * lattice, 130 + j * lattice)
                    this.ctx.lineTo(offset + 20 + i * lattice, 130 + j * lattice)
                    this.ctx.lineTo(offset + 20 + i * lattice, 140 + j * lattice)
                }

                if (i == 7 && [2, 5].includes(j)) {
                    let offset = 590;
                    this.ctx.moveTo(offset + i * lattice, 100 + j * lattice)
                    this.ctx.lineTo(offset + i * lattice, 110 + j * lattice)
                    this.ctx.lineTo(offset - 10 + i * lattice, 110 + j * lattice)
                    this.ctx.moveTo(offset - 10 + i * lattice, 130 + j * lattice)
                    this.ctx.lineTo(offset + i * lattice, 130 + j * lattice)
                    this.ctx.lineTo(offset + i * lattice, 140 + j * lattice)
                }

            }
        }
        this.ctx.closePath();
        this.ctx.stroke();

    }

    // 画小三角
    drawTriangle(i: number, j: number, offset: number = 490) {

        if (i == 0 && [2, 5].includes(j)) {
            let offset = 490;
            this.ctx.moveTo(offset + 20 + i * lattice, 100 + j * lattice)
            this.ctx.lineTo(offset + 20 + i * lattice, 110 + j * lattice)
            this.ctx.lineTo(offset + 30 + i * lattice, 110 + j * lattice)
            this.ctx.moveTo(offset + 30 + i * lattice, 130 + j * lattice)
            this.ctx.lineTo(offset + 20 + i * lattice, 130 + j * lattice)
            this.ctx.lineTo(offset + 20 + i * lattice, 140 + j * lattice)
        } else if (i == 7 && [2, 5].includes(j)) {
            let offset = 590;
            this.ctx.moveTo(offset + i * lattice, 100 + j * lattice)
            this.ctx.lineTo(offset + i * lattice, 110 + j * lattice)
            this.ctx.lineTo(offset - 10 + i * lattice, 110 + j * lattice)
            this.ctx.moveTo(offset - 10 + i * lattice, 130 + j * lattice)
            this.ctx.lineTo(offset + i * lattice, 130 + j * lattice)
            this.ctx.lineTo(offset + i * lattice, 140 + j * lattice)
        } else {
            this.ctx.moveTo(offset + i * lattice, 100 + j * lattice)
            this.ctx.lineTo(offset + i * lattice, 110 + j * lattice)
            this.ctx.lineTo(offset - 10 + i * lattice, 110 + j * lattice)

            this.ctx.moveTo(offset + 20 + i * lattice, 100 + j * lattice)
            this.ctx.lineTo(offset + 20 + i * lattice, 110 + j * lattice)
            this.ctx.lineTo(offset + 30 + i * lattice, 110 + j * lattice)

            this.ctx.moveTo(offset + 30 + i * lattice, 130 + j * lattice)
            this.ctx.lineTo(offset + 20 + i * lattice, 130 + j * lattice)
            this.ctx.lineTo(offset + 20 + i * lattice, 140 + j * lattice)

            this.ctx.moveTo(offset - 10 + i * lattice, 130 + j * lattice)
            this.ctx.lineTo(offset + i * lattice, 130 + j * lattice)
            this.ctx.lineTo(offset + i * lattice, 140 + j * lattice)
        }


    }

    // 绘制棋子
    drawKiKos() {

        for (let i = 0; i < this.initKios.length; i++) {
            if (this.initKios[i] == "帅") {
                this.redKiko.push(Kiko.getKiko(400, 920, ColorType.RED, this.kikoCanvasCtx, this.initKios[i], 38));
            } else if (this.initKios[i] == "将") {
                this.blackKiko.push(Kiko.getKiko(i * lattice, 20, ColorType.BLACK, this.kikoCanvasCtx, this.initKios[i], 38));
            } else if (this.initKios[i] == "炮") {
                this.blackKiko.push(Kiko.getKiko(100, 220, ColorType.BLACK, this.kikoCanvasCtx, this.initKios[i], 38));
                this.blackKiko.push(Kiko.getKiko(700, 220, ColorType.BLACK, this.kikoCanvasCtx, this.initKios[i], 38));
                this.redKiko.push(Kiko.getKiko(100, 720, ColorType.RED, this.kikoCanvasCtx, this.initKios[i], 38));
                this.redKiko.push(Kiko.getKiko(700, 720, ColorType.RED, this.kikoCanvasCtx, this.initKios[i], 38));
            } else if (this.initKios[i] == "卒") {
                for (let v = 0; v < 5; v++) {
                    this.blackKiko.push(Kiko.getKiko(v * lattice * 2, 320, ColorType.BLACK, this.kikoCanvasCtx, this.initKios[i], 38));
                }
            } else if (this.initKios[i] == "兵") {
                for (let v = 0; v < 5; v++) {
                    this.redKiko.push(Kiko.getKiko(v * lattice * 2, 620, ColorType.RED, this.kikoCanvasCtx, this.initKios[i], 38));
                }
            } else {
                this.blackKiko.push(Kiko.getKiko(i * lattice, 20, ColorType.BLACK, this.kikoCanvasCtx, this.initKios[i], 38));
                this.redKiko.push(Kiko.getKiko(i * lattice, 920, ColorType.RED, this.kikoCanvasCtx, this.initKios[i], 38));
            }
        }
    }

    // 获取选中棋子
    getCheckKiko(x: number, y: number,) {
        if (this.isStatus == ColorType.RED) {
            return this.redKiko.find(item => {
                if (item.x - item.size / 2 < x &&
                    item.x + item.size / 2 > x &&
                    item.y - item.size / 2 < y &&
                    item.y + item.size / 2 > y) {
                    return item;
                }
            })
        }

        return this.blackKiko.find(item => {
            console.log(x, y)
            if (item.x - item.size / 2 < x &&
                item.x + item.size / 2 > x &&
                item.y - item.size / 2 < y &&
                item.y + item.size / 2 > y) {
                return item;
            }
        })

    }

}

enum ColorType {
    BLACK = "black",
    RED = "red",
}

// 棋子
abstract class Kiko {
    color: ColorType;
    x: number;
    y: number;
    size: number;
    ctx: CanvasRenderingContext2D;
    text: string;

    static getKiko(x: number, y: number, color: ColorType, ctx: CanvasRenderingContext2D, text: string, size: number) {
        switch (text) {
            case "兵":
                return new SoldierKiko(x, y, color, ctx, text, size);
            case "卒":
                return new SoldierKiko(x, y, color, ctx, text, size);
            case "車":
                return new SoldierKiko(x, y, color, ctx, text, size);
            case "馬":
                return new SoldierKiko(x, y, color, ctx, text, size);
            case "象":
                return new SoldierKiko(x, y, color, ctx, text, size);
            case "士":
                return new SoldierKiko(x, y, color, ctx, text, size);
            case "将":
                return new SoldierKiko(x, y, color, ctx, text, size);
            case "帅":
                return new SoldierKiko(x, y, color, ctx, text, size);
            case "炮":
                return new SoldierKiko(x, y, color, ctx, text, size);
            default:
                return new SoldierKiko(x, y, color, ctx, text, size);

        }
    }
    static drawKiko(arr:Kiko[]){
        arr.forEach(item=>item.draw());
    }
    constructor(x: number, y: number, color: ColorType, ctx: CanvasRenderingContext2D, text: string, size: number) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.size = size;
        this.ctx = ctx;
        this.text = text;
        this.draw();
    }

    draw() {
        this.ctx.strokeStyle = this.color
        this.ctx.beginPath();
        this.ctx.lineWidth = 1
        this.ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        this.ctx.fillStyle = "white";
        this.ctx.fill();
        this.ctx.stroke();
        this.ctx.beginPath();
        this.ctx.lineWidth = 2
        this.ctx.fillStyle = this.color;
        this.ctx.arc(this.x, this.y, this.size - 5, 0, Math.PI * 2);
        this.ctx.font = `bold ${this.size + 8}px 楷书`;
        this.ctx.fillText(this.text, this.x - this.size / 2 - 3, this.y + this.size / 2 - 2)
        this.ctx.stroke();
        this.ctx.closePath();
    }

    abstract move(x:number,y:number): void;

}


// 兵
class SoldierKiko extends Kiko {

    constructor(x: number, y: number, color: ColorType, ctx: CanvasRenderingContext2D, text: string, size: number) {
        super(x, y, color, ctx, text, size);
    }

    move(x:number,y:number): void {
        console.log(y,this.y)
        if(this.y>y){
            this.y-=100;
        }else {
            if(this.y>320)return;
            this.y+=100;
        }
        // 移动
        this.ctx.clearRect(-50,-50,map.width+100,map.height+100)

    }

}


export default Chess


 

想430
关注
  • 12
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
canvas绘制中国象棋
PPaio的博客
08-27 457
const draw = (id) => { let 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".
canvas绘制象棋(canvas绘图)
01-27
刚刚学习了canvas,做了一个简单的示例，希望能巩固一下自己所学的知识，从上面的代码可以看出存在很多不足的地方，比如:代码冗余,绘制棋盘的方法也不是很好，虽然功能是实现了，但作为一名写程序的程序员我们要追求完美，不是吗？，所以我又分析了一下我写的代码，发现有很多可以改进的地方比如：绘制棋盘的方法可以用循环来做相对好一些，下面是我的第二次代码改进。经过一番改进，代码从原来的245行代码减少到了125行，代码冗余和方法使用的问题解决了，那么是不是完事了呢？我再次检查了一下我写的代码，发现还是有改进的地方，就是JavaScript脚本写的比较乱,定义的方法变量都暴露都直接暴露在window下有可
中国象棋（Canvas制作）
weixin_30416497的博客
11-07 203
昨天看了别人写的一个中国象棋，自己也仿照着写了一下基本上效果实现了，不过还是有一些需要改进，
canvas 实现中国象棋
08-31
本文主要介绍了canvas 实现中国象棋的方法。具有很好的参考价值，下面跟着小编一起来看下吧
使用canvas 绘制象棋棋盘
yjITcsdn的博客
04-27 731
先看效果图吧 O(∩_∩)O哈哈~ 代码在这里 <!dOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>绘制象棋</
canvas中国象棋.zip
09-17
本项目“canvas中国象棋.zip”就是一个利用这两种技术开发的中国象棋在线游戏，它为用户提供了一种全新的娱乐方式，允许玩家在网页上体验中国象棋的魅力。 首先，我们要明确的是HTML5中的canvas元素。Canvas是HTML5...
中国象棋+HTML5+canvas
05-21
在这个实验作业中，开发者通过canvas描绘了棋盘和棋子，展示了如何在网页上创建一个可操作的游戏界面。首先，我们需要理解canvas的基本用法，包括创建canvas元素、获取2D渲染上下文以及使用绘图方法如fillRect、...
html5象棋界面源码（可以移动）
最新发布
01-28
总的来说，这个HTML5象棋界面源码涵盖了前端开发的多个重要领域：HTML5 Canvas绘图、JavaScript事件处理和游戏逻辑、CSS3样式及响应式设计，对于学习和实践这些技术是非常有价值的资源。通过深入研究和修改这些代码...
使用wpf开发的象棋程序
10-23
象棋棋盘和棋子可以使用Grid或Canvas进行精确定位。 4. **动画和效果**: WPF的动画系统允许开发者创建动态效果，比如棋子移动时的平滑过渡。这可以通过Storyboards和KeyFrames来实现，增强用户交互性。 5. **网络...
canvas绘制中国象棋棋盘
冰凌的博客
02-14 899
棋盘 board.html <!doctype html> <html> <head> <meta charset="gb2312"/> </head> <body> <div class="board"> <canvas id="board" width="450px" height=...
canvas完美绘制中国象棋棋盘
11-20
canvas绘制中国象棋棋盘，简单易懂的小Demo,想学canvas的小伙伴可以自行下载学习下
html5的canvas中国象棋.zip
05-19
利用html5的canvas实现中国象棋，棋子和棋盘资源都在文件中。具有棋子的逻辑，玩家可以操作，没有写最终的胜负判断，但是胜负可以有玩家自己看到（自己判断有没有将军）。可以悔棋一步。棋子的移动具有约束条件。
中国象棋(原生js+canvas)
12-11
简易的中国象棋 , 由原生JavaScript + canvas 开发, 适合初学者学习js 和canvas的应用!
html5做的象棋
08-15
自己用html5做的象棋，感受一下html5带来的全新感觉吧
中国象棋棋谱浏览器
07-14
可以兼容 象棋巫师,东萍象棋,QQ游戏的棋谱文件
canvas象棋 画图
weixin_30448603的博客
02-19 128
canvas象棋 画图 今天写了一个canvas画图的象棋 。js基础不行，只画了个图，以后补充。。。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>chess&...
canvas实现中国象棋（未判断绝杀）
热门推荐
weixin_51364599的博客
12-07 1万+
中国象棋 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1 i
画象棋棋谱
小小少年
06-06 574
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值