棋类游戏在桌面游戏中已经非常成熟,中国象棋的版本也非常多。今天这款基于HTML5技术的中国象棋游戏非常有特色,我们不仅可以选择中国象棋的游戏难度,而且可以切换棋盘的样式。程序写累了,喝上一杯咖啡,和电脑对弈几把吧,相信这HTML5中国象棋游戏的实现算法你比较清楚,可以打开源码来研究一下这款HTML5中国象棋游戏。

在线预览   源码下载

实现的代码。

html代码:

    <div class="box" id="box">
<div class="chess_left">
<canvas id="chess">对不起,您的浏览器不支持HTML5,请升级浏览器至IE9、firefox或者谷歌浏览器!</canvas>
<audio src="audio/click.wav" id="clickAudio" preload="auto"></audio>
<!--<audio src="audio/check.wav" id="checkAudio" preload="auto"></audio>-->
<audio src="audio/select.wav" id="selectAudio" preload="auto"></audio>
<div>
<div class="bn_box" id="bnBox">
<input type="button" name="offensivePlay" id="tyroPlay" value="新手水平" />
<input type="button" name="offensivePlay" id="superPlay" value="中级水平" />
<input type="button" name="button" id="" value="大师水平" disabled />
<!--
<input type="button" name="offensivePlay" id="offensivePlay" value="先手开始" />
<input type="button" name="defensivePlay" id="defensivePlay" value="后手开始" />
-->
<input type="button" name="regret" id="regretBn" value="悔棋" />
<input type="button" name="billBn" id="billBn" value="棋谱" class="bn_box" />
<input type="button" name="stypeBn" id="stypeBn" value="换肤" />
</div>
</div>
</div>
<div class="chess_right" id="chessRight">
<select name="billList" id="billList">
</select>
<ol id="billBox" class="bill_box">
</ol>
</div>
<div id="moveInfo" class="move_info">
</div>
</div>

引用的js:

<script src="js/common.js"></script>
<script src="js/play.js"></script>
<script src="js/AI.js"></script>
<script src="js/bill.js"></script>
<script src="js/gambit.js"></script>

via:http://www.w2bc.com/Article/20596

基于HTML5实现的中国象棋游戏的更多相关文章

  1. C#中国象棋+游戏大厅 服务器 + 客户端源码

    来源:www.ajerp.com/bbs C#中国象棋+游戏大厅 服务器 + 客户端源码 源码开源 C#版中国象棋(附游戏大厅) 基于前人大虾的修改版 主要用委托实现 服务器支持在线人数,大厅桌数的设 ...

  2. 基于html5实现的愤怒的小鸟网页游戏

    之前给大家分享一款基于html5 canvas和js实现的水果忍者网页版,今天给大家分享一款基于html5实现的愤怒的小鸟网页游戏.这款游戏适用浏览器:360.FireFox.Chrome.Safar ...

  3. 基于HTML5实现五彩连珠小游戏

    今天给大家分享一款基于HTML5实现五彩连珠小游戏.这款游戏的规则:点击彩球移动到期望的位置,每移动一次,画面将随机出现3个新的彩球:当同一颜色的彩球连成5个一行或一列或一斜线时,这5个彩球同时消失, ...

  4. 中国象棋游戏Chess(3) - 实现走棋规则

    棋盘的绘制和走棋参看博文:中国象棋游戏Chess(1) - 棋盘绘制以及棋子的绘制,中国象棋游戏Chess(2) - 走棋 现在重新整理之前写的代码,并且对于每个棋子的走棋规则都进行了限制,不像之前那 ...

  5. 中国象棋游戏Chess(2) - 走棋

    之前的文章请看:中国象棋游戏Chess(1) - 棋盘绘制以及棋子的绘制 现在实现走棋的功能. 首先需要获取点击到的棋子,用QWidget中的函数 mouseReleaseEvent 实现函数: vo ...

  6. C/C++编程笔记:C语言打造中国象棋游戏,项目源代码分享!

    中国象棋是起源于中国的一种棋,属于二人对抗性游戏的一种,在中国有着悠久的历史.由于用具简单,趣味性强,成为流行极为广泛的棋艺活动. 它是中国棋文化,也是中华民族的文化瑰宝,它源远流长,趣味浓厚,基本规 ...

  7. 【原创】使用HTML5+canvas+JavaScript开发的原生中国象棋游戏及源码分享

    目前已经实现的功能: V1.0 : 实现棋子的布局,画布及游戏场景的初始化V2.0 : 实现棋子的颜色改变V3.0 :实现所有象棋的走棋规则V4.0 : 实现所有棋子的吃子功能 GItHub源码下载地 ...

  8. 【HTML5】基于HTML5的高性能动画与游戏

    其实这篇文章类似版本早在12年就在网上各处出现了,也随着HTML5的兴起,HTML的新特性也是倍受开发者们追捧,自然相关HTML5的高性能动画与游戏的相关文章也是层出不穷的,笔者也是在12年接触的相关 ...

  9. GMchess Linux下的中国象棋游戏

    gmchess,一款Linux下的中国象棋程序

随机推荐

  1. Java基础 —— 面向对象

    面向对象的程序设计: 1. 基本特征:抽象性,封装性,继承性,多态性. 2. 类及成员的访问控制:private:同一类中: default:同一包中: protected:子类中: public:全 ...

  2. 基于gSOAP使用头文件的C语言版web service开发过程例子

    基于gSOAP使用头文件的C语言版web service开发过程例子 一服务端 1 打开VS2005,创建一个工程,命名为calcServer. 2 添加一个头文件calc.h,编辑内容如下: 1// ...

  3. freetds相关

    什么是FreeTDS  简单的说FreeTDS是一个程序库,可以实现在Linux系统下访问微软的SQL数据库! FreeTDS 是一个开源(如果你喜欢可以称为自由)的程序库,是TDS(表列数据流 )协 ...

  4. JXTA中定义自己的成员服务

    http://blog.csdn.net/neusoftware_20063500/article/details/4302903 —————————————————————————————————— ...

  5. WebRTC源码分析:音频模块结构分析

    一.概要介绍WebRTC的音频处理流程,见下图: webRTC将音频会话抽象为一个通道Channel,譬如A与B进行音频通话,则A需要建立一个Channel与B进行音频数据传输.上图中有三个Chann ...

  6. gdb之x命令

    [gdb之x命令] 可以使用examine命令(简写是x)来查看内存地址中的值.x命令的语法如下所示: x/<n/f/u> <addr> n.f.u是可选的参数. n是一个正整 ...

  7. POJ 3177 Redundant Paths POJ 3352 Road Construction

    这两题是一样的,代码完全一样. 就是给了一个连通图,问加多少条边可以变成边双连通. 去掉桥,其余的连通分支就是边双连通分支了.一个有桥的连通图要变成边双连通图的话,把双连通子图收缩为一个点,形成一颗树 ...

  8. spring mvc为何多注入了个SimpleUrlHandlerMapping?

    最近在调试项目时,debug DispatcherServlet时,发现handlerMappings属性包含了RequestMappingHandlerMapping.SimpleUrlHandle ...

  9. JavaScript学习——内置属性

    在js中,几乎所有的对象都是同源对象,都继承Object对象.对象的内置属性指的是它们作为Object实例所具有的属性,这些属性通常反映对象本身的基本信息和数据无关.因此我们称它们为元属性.这些属性通 ...

  10. 如何检查oracle的归档空间是否满了?

    如何检查oracle的归档空间是否满了? 关于如何检查归档空间是否慢了,大多数人会去先检查放归档的目录的磁盘空间是否满了,通过该归档目录空余情况来判断归档空间是否满了,但我觉得这个方法不一定代表实际情 ...