【JavaScript游戏开发】使用HTML5 canvas开发的网页版中国象棋项目

最新推荐文章于 2022-07-24 10:12:46 发布
置顶 最新推荐文章于 2022-07-24 10:12:46 发布
阅读量1.4k 收藏 3
点赞数 1
分类专栏： JavaScript学习 框架封装 玩转前端JavaScript
本文为博主原创文章，未经博主允许不得转载。更多学习资料请访问我爱科技论坛:https://www.52tech.tech
本文链接：https://blog.csdn.net/m0_37981569/article/details/81905647
版权 
//V1.0 : 实现棋子的布局，画布及游戏场景的初始化
//V2.0 : 实现棋子的颜色改变
//V3.0 ：实现所有象棋的走棋规则
//V4.0 : 实现所有棋子的吃子功能

完整的项目源码已经开源：https://github.com/xiugangzhang/ChineseChess

项目在线预览地址：

http://htmlpreview.github.io/?https://github.com/xiugangzhang/ChineseChess/blob/master/ChineseChess.html

目前就实现了上面的几个功能，最近也么时间再弄了，需要的朋友可以自己下载下来继续开发哈！

主要特点：

1.无任何插件和第三方库，纯原生js实现

2.没使用任何素材，棋盘和棋子都是由canvas画布绘制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
<canvas id="myCanvas" width="600px" height="660px">
</canvas>
<script>


    //V1.0 : 实现棋子的布局，画布及游戏场景的初始化
    //V2.0 : 实现棋子的颜色改变
    //V3.0 ：实现所有象棋的走棋规则
    //V4.0 : 实现所有棋子的吃子功能
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    /**
     * 棋子对象
     * @param x
     * @param y
     * @param color
     * @constructor
     */
    function Chess(x, y, color, type) {
        this.x = x;
        this.y = y;
        this.color = color;


        this.type = type;

        // 记录颜色
        this.chessColor = color;

        // 是否死掉
        this.isDead = false;
    }

    // 成员函数
    Chess.prototype = {
        _getChessText: function () {
            switch (this.type) {
                case "CHE":
                    return "车";
                case "MA":
                    return "马";
                case "PAO":
                    return "炮";
                case "BING":
                    return "兵";
                case "JIANG":
                    return "将";
                case "SHI":
                    return "士";
                case "XIANG":
                    return "相";
            }
            return "错误";
        }
    }

    /**
     * 游戏场景
     * @constructor
     */
    function Game() {

        // 存放当前棋盘上所有的棋子
        this._chesses = [];

        //初始位置
        this._initX = 60;
        this._initY = 60;

        // 判断鼠标是否点击有棋子
        this._selectedChess = null;

        this._initCount = 0;
    }

    Game.prototype = {
        // 场景的初始化
        execute: function () {
            this._initChesses();
            this._start();
        },
        _initChesses: function () {
            // 绘制棋子（初始位置）
            // 总共需要绘制32颗棋子

            // 红色棋子
            var redChess;
            for (var i = 0; i < 4; i++) {
                for (var j = 0; j < 9; j++) {
                    if ((i == 0 && j == 0) || (j == 8 && i == 0)) {
                        // 把棋子的颜色传进去
                        redChess = new Chess(j, i, "red", "CHE");
                        this._chesses.push(redChess);
                    } else if ((j == 1 && i == 0) || (j == 7 && i == 0 )) {
                        redChess = new Chess(j, i, "red", "MA");
                        this._chesses.push(redChess);
                    } else if ((j == 2 && i == 0) || (j == 6 && i == 0)) {
                        redChess = new Chess(j, i, "red", "XIANG");
                        this._chesses.push(redChess);
                    } else if ((j == 3 && i == 0) || (j == 5 && i == 0)) {
                        redChess = new Chess(j, i, "red", "SHI");
                        this._chesses.push(redChess);
                    } else if ((j == 4 && i == 0)) {
                        redChess = new Chess(j, i, "red", "JIANG");
                        this._chesses.push(redChess);
                    } else if ((j == 1 && i == 2) || (j == 7 && i == 2)) {
                        redChess = new Chess(j, i, "red", "PAO");
                        this._chesses.push(redChess);
                    } else if ((j == 0 && i == 3) || (j == 2 && i == 3) || (j == 4 && i == 3) || (j == 6 && i == 3) || (j == 8 && i == 3)) {
                        redChess = new Chess(j, i, "red", "BING");
                        this._chesses.push(redChess);
                    }


                }
            }

            // 绘制黑色棋子
            var blackChess;
            for (var i = 6; i < 10; i++) {
                for (var j = 0; j < 10; j++) {
                    if ((j == 0 && i == 9) || (j == 8 && i == 9)) {
                        blackChess = new Chess(j, i, "black", "CHE");
                        this._chesses.push(blackChess);
                    } else if ((j == 1 && i == 9) || (j == 7 && i == 9)) {
                        blackChess = new Chess(j, i, "black", "MA");
                        this._chesses.push(blackChess);
                    } else if ((j == 2 && i == 9) || (j == 6 && i == 9)) {
                        blackChess = new Chess(j, i, "black", "XIANG");
                        this._chesses.push(blackChess);
                    } else if ((j == 3 && i == 9) || (j == 5 && i == 9)) {
                        blackChess = new Chess(j, i, "black", "SHI");
                        this._chesses.push(blackChess);
                    } else if (j == 4 && i == 9) {
                        blackChess = new Chess(j, i, "black", "JIANG");
                        this._chesses.push(blackChess);
                    } else if ((j == 1 && i == 7) || (j == 7 && i == 7)) {
                        blackChess = new Chess(j, i, "black", "PAO");
                        this._chesses.push(blackChess);
                    } else if ((j == 0 && i == 6) || (j == 2 && i == 6) || (j == 4 && i == 6) || (j == 6 && i == 6) || (j == 8 && (i == 6))) {
                        blackChess = new Chess(j, i, "black", "BING");
                        this._chesses.push(blackChess);
                    }
                }
            }

            //console.log(redChess);
            //console.log(blackChess);
            console.log(this._chesses);

        },
        /**
         * 绘制棋子 车马相士将
         * @private
         */
        _drawChesses: function () {


            var isDeadChess = null;
            // 根据游戏中棋子的数目来绘制棋子
            // 游戏中的棋子始终是32颗， 因此只能根据棋子是否存活来决定是否绘制这个棋子(原来的位置还是有棋子， 这是让他隐藏起来)
            for (var i = 0; i < this._chesses.length; i++) {
                var chess = this._chesses[i];

                // 原来的位置还是有棋子， 这是让他隐藏起来
                if (!chess.isDead) {
                    // 只有当这个棋子的属性isDead = false; 才绘制这个棋子
                    // 根据棋子的属性来绘制
                    context.fillStyle = "#C78843";
                    context.beginPath();
                    // 绘制棋子(注意要把棋子的初始位置复位)
                    context.arc(chess.x * 60 + this._initX, chess.y * 60 + this._initY, 25, 0, Math.PI * 2, true);
                    context.closePath();
                    context.fill();


                    // 绘制文本
                    if (chess.color == "red") {
                        context.fillStyle = 'red';
                    }
                    if (chess.color == "black") {
                        context.fillStyle = 'black';
                    }
                    if (chess.color == "blue") {
                        context.fillStyle = 'blue';
                    }

                    context.font = '43px 华文新魏';
                    context.fillText(chess._getChessText(), chess.x * 60 + this._initX - 22, chess.y * 60 + this._initY + 10);
                }
                else {


                    isDeadChess = chess;

                }


            }

            // 有棋子被吃了，就重新开始
            //this._selectedChess = null;
            if (this._initCount == 0) {

                //console.log(chess.x+","+chess.y+","+chess.type+"已经隐藏");
            }


        },
        _drawChessboard: function () {

            context.strokeStyle = "black";
            // 绘制棋盘外边界
            context.lineWidth = 3;
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(600, 0);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(0, 660);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(600, 0);
            context.lineTo(600, 660);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(0, 660);
            context.lineTo(660, 660);
            context.closePath();
            context.stroke();

            // 内部的外边界
            context.beginPath();
            context.moveTo(40, 40);
            context.lineTo(40, 620);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(40, 40);
            context.lineTo(560, 40);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(560, 40);
            context.lineTo(560, 620);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(560, 620);
            context.lineTo(40, 620);
            context.closePath();
            context.stroke();


            //棋盘横线
            context.lineWidth = 1;
            for (var i = 1; i < 11; i++) {
                context.beginPath();
                context.moveTo(60, 60 * i);
                context.lineTo(540, 60 * i);
                context.closePath();
                context.stroke();
            }

            // 棋盘纵线
            for (var i = 1; i < 10; i++) {
                context.beginPath();
                context.moveTo(i * 60, 60);
                context.lineTo(i * 60, 300);
                context.closePath();
                context.stroke();
            }

            for (var i = 1; i < 10; i++) {
                context.beginPath();
                context.moveTo(i * 60, 360);
                context.lineTo(i * 60, 600);
                context.closePath();
                context.stroke();
            }

            context.beginPath();
            context.moveTo(60, 300);
            context.lineTo(60, 360);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(540, 300);
            context.lineTo(540, 360);
            context.closePath();
            context.stroke();


            // 棋盘斜线
            context.beginPath();
            context.moveTo(240, 60);
            context.lineTo(360, 180);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(360, 60);
            context.lineTo(240, 180);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(240, 480);
            context.lineTo(360, 600);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(360, 480);
            context.lineTo(240, 600);
            context.closePath();
            context.stroke();

            // 绘制炮的位置(左上)
            context.beginPath();
            context.moveTo(115, 160);
            context.lineTo(115, 175);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(115, 175);
            context.lineTo(100, 175);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(125, 160);
            context.lineTo(125, 175);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(125, 175);
            context.lineTo(140, 175);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(115, 185);
            context.lineTo(115, 200);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(115, 185);
            context.lineTo(100, 185);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(125, 185);
            context.lineTo(125, 200);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(125, 185);
            context.lineTo(140, 185);
            context.closePath();
            context.stroke();


            // 右上
            context.beginPath();
            context.moveTo(475, 175);
            context.lineTo(460, 175);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(475, 175);
            context.lineTo(475, 160);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(485, 160);
            context.lineTo(485, 175);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(485, 175);
            context.lineTo(500, 175);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(485, 185);
            context.lineTo(485, 200);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(485, 185);
            context.lineTo(500, 185);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(475, 185);
            context.lineTo(475, 200);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(475, 185);
            context.lineTo(460, 185);
            context.closePath();
            context.stroke();

            // 左下
            context.beginPath();
            context.moveTo(115, 485);
            context.lineTo(115, 500);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(115, 485);
            context.lineTo(100, 485);
            context.closePath();
            context.stroke();


            context.beginPath();
            context.moveTo(115, 475);
            context.lineTo(100, 475);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(115, 475);
            context.lineTo(115, 460);
            context.closePath();
最低0.47元/天 解锁文章
小牛itbull
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML5中国象棋游戏(人机对弈网页版)
11-27
人机对弈，把源码放在虚拟空间里面，直接就可以运行。棋力有初级，中级水平。还不错。
中国象棋+HTML5+canvas
05-21
这是我网页游戏开发课程的一个实验作业，主要阐述了人人对战的实现思路，包括棋盘棋子的绘制、选子落子规则和胜负判断等几部分。注释很详细，具体实现自己看。
中国象棋网页对战版（asp.net）
12-21
使用asp.net+jquery+ajax制作的一个简单的对战版中国象棋。主要功能由ajax来完成,asp.net/jquery构建页面。第一次制作，希望对大家有帮助吧。
惊叹!Ajax做的网页版中国象棋
Kinb_huangwei的专栏
11-16 788
老外做的网页版的中国象棋,Ajax效果挺好,不过,程序的AI还有待提高,,,"将军"了也没有提示 -___-#[ 链接 http://ajaxchess.pragmaticlogic.com/ ]  
HTML5 Canvas中国象棋、国际象棋游戏代码
02-27
HTML5 Canvas中国象棋、国际象棋游戏代码 象棋游戏、中国象棋、Canvas、HTML5 代码简介：HTML5 Canvas中国象棋游戏代码是一款中国象棋，帅，将，相，车，马，炮，兵，卒，楚河象棋游戏源代码，象棋对战，判断输赢。
html5+js开发的中国象棋游戏源码.zip
03-26
总结，HTML5+JS开发的中国象棋游戏融合了前端技术的诸多精华，既考验开发者对HTML5图形渲染和JavaScript逻辑处理的能力，又展示了这两者在游戏开发中的强大潜力。通过学习和理解这个游戏源码，开发者不仅可以提升...
html5网页版中国象棋小游戏代码.zip
09-27
这个压缩包文件"html5网页版中国象棋小游戏代码.zip"包含了实现一个完整的中国象棋游戏所需的全部元素，包括HTML结构、JavaScript逻辑以及CSS样式。下面我们将深入探讨这些关键组成部分。 首先，`index.html`是网页...
基于html5 canvas的中国象棋游戏.zip
最新发布
02-13
【HTML5 Canvas 中国象棋游戏开发详解】 HTML5 是一种强大的网页开发标准，它引入了许多新特性，其中Canvas元素是用于在网页上绘制2D图形的重要工具。在这个基于HTML5 Canvas的中国象棋游戏中，开发者利用Canvas ...
经典网页游戏中国象棋.zip
12-09
利用html5开发的经典小游戏系列7，网页游戏中国象棋。里面包含了游戏开发代码，即下即玩，也适用于html5游戏开发者的入门学习
中国象棋游戏源码网页版
04-03
该源码是中国象棋游戏源码网页版，游戏源码主要采用了javascript和html5游戏开发网页版中国象棋游戏源码的，希望能够帮到学习html5游戏开发 的朋友，喜欢的朋友可以了解一下吧。
中国象棋HTML5源码
03-18
中国象棋HTML5源码
象棋源码H5开发设计的象棋 AI在线对弈网页页面象棋源码【全新經典版+内嵌ai算法】
07-13
象棋源码H5开发设计的象棋 AI在线对弈网页页面象棋源码【全新經典版+内嵌ai算法】 效果演示https://www.a5ymg.cn/571.html 【象棋源码】全新經典版H5开发设计的象棋完整篇AI在线对弈网页页面象棋源码 經典版H5开发设计的象棋完整篇AI在线对弈网页页面象棋源码 这款經典版的象棋是一款H5开发设计的游戏 关键作用所有都会源代码的js文件中，一共有着两个肌肤 内嵌ai算法，有工作能力的能够自主改动清理。 經典版的象棋我觉得比如今出去的花哨的五颜六色的国际象棋真正好玩儿多了。 象棋源码H5开发设计的象棋 AI在线对弈网页页面象棋源码【全新經典版+内嵌ai算法】
HTML5中国象棋游戏.zip
05-25
HTML5中国象棋游戏是一款HTML5 JS编写的中国象棋小游戏，效果很逼真，一点也不会出现卡的情况，经测试效果相当不错，源码之家推荐下载。
HTML5中国象棋小游戏
09-26
HTML5实现的中国象棋小游戏，三种难易模式可选择，也可以悔棋。
HTML5学习总结——canvas绘制象棋(canvas绘图)
weixin_30243533的博客
11-24 460
一、HTML5学习总结——canvas绘制象棋 1、第一次：canvas绘制象棋（笨方法）示例代码 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>canv...
用html布局象棋棋盘,5分钟掌握22种常见象棋布局，实例演示象棋布局大全、开局大全...
weixin_31758889的博客
06-10 1367
作者：象棋沙龙1、中炮局(炮二平五或炮八平五) 这是象棋里的主流招法，直接威胁黑方中卒，刚猛直爽。“起炮在中宫，比诸局较雄”。黑方通常跳马保卒或还架中炮,发展成为顺炮、列炮、屏风马、反宫马、单提马等体系。也有进炮保卒或补士象的冷门应法，中炮的应法最多有十种。2、顺手炮 顺手炮是斗炮类布局体系中的主流布局之一，体现注重进攻、以攻代守的战略思想。先手方走当头炮，后手方亦将同侧的炮摆在当头，有弃卒抢先之...
中国象棋html5实现
09-07
html5技术实现最基本的对战，每个子的功能都是实现的，出入前端可以参考学习一下
象棋在线对战网页源码源码安装
dogeven的博客
07-24 1936
象棋在线对战网页源码源码安装，初学者可学习机器人AI思路，和游戏搭建结构
基于HTML5的棋牌游戏毕设论文
11-20
如今社会是当之无愧的网络生活，也正是计算机的蓬勃发展让我们的生活更进一步。无 处不见的科技，让我们生活无论是精神方面还是物质方面都能得到满足。而网络游戏更是丰富了我们的精神生活，随着电脑的出现，我们也拥有了更多乐趣，从一开始的扫雷，直到如今的各种大型网络游戏，电脑游戏也逐渐成为生活中不可缺少的娱乐方式。在电脑游戏中，单机游戏则是可以不用联网则能玩耍，如今基于 HTML5 开发的游戏也多为单机游戏。本文则是通过象棋游戏来实现基于 HTML5 的游戏开发的基本过程与方法。文中基于 HTML5 的棋牌游戏则是将以前的娱乐生活移到的网络上，在网页上也能玩象棋游戏。通过HTML5 的各种标签和功能来实现象棋游戏，例如通过 canvas 标签实现游戏部件操作。此象棋游戏能通过鼠标对棋子的控制实现游戏过程，可以选点击按钮开始游戏，能实现真实象棋游戏过程中的功能，吃子、悔棋、胜负判断等。其中行棋判断以及具体实现的方式例如行棋规则、游戏策略则是由 JavaScript 编写实现，最后通过 CSS 来修饰游戏界面文字的风格和游戏部件的布局等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值