象棋这款游戏相信大家都有了解过,“当头炮”、“屏风马”、“反宫马”这些都是象棋的术语,虽然没有具体记载象棋是楚汉时期还是宋朝流传下来的,但是这丝毫不影响象棋的火热程度,街头巷尾随处可见。但是工作学习之余,突然性质来了想下把象棋却没有棋盘就是一件很败兴的事情了,所以这款《全民象棋》就可以完美解决这个问题,手机上下象棋,一样轻松愉悦。

最近上班无聊时有事没事喜欢下几把象棋,当然前提是我项目都做得很好了,空闲时间才娱乐下,大家不要学我哟,玩了几把才知道,自己有好多年没练过了,游戏中的高手还是挺多的,毕竟这年代,还能在网上安静的下象棋的也只有老粉丝了,今天这个中国象棋的案例,大家可以自己练习下。

《全民象棋》棋盘桌上尽风流,厮杀几曾休

游戏目前分为四个大模块供大大们进行游戏,分别为:联网模式、残局模式、棋谱模式和单机模式。

这里还是要推荐下我自己建的前端学习群:204436223,不说其他的,能进我群的没两把刷子怎么可以呢是吧,当然小白我也非常欢迎,都是从零开始的嘛,多虚心问问题就行了,不定期分享干货。想学到东西的都可以来,欢迎初学和进阶中的小伙伴。

效果图如下:

《全民象棋》棋盘桌上尽风流,厮杀几曾休

联网模式:所谓高手,就是不断与别人切磋,一步一个脚印打出属于自己的一片天地。闭门造车只会让自己棋艺不进反退,所以我们可以在联网模式与全国各地的高手进行对弈。联网模式分为:棋技博弈、五分钟场、十分钟场和二十分钟场;当然了,进入联网模式的话需要花费100个君子竹,当做门票钱。

《全民象棋》棋盘桌上尽风流,厮杀几曾休

点击后进入我们会发现残局闯关,这里记录目前尚有的各种高难度残局等待大大们来破解,成功闯关后可以获得丰厚的奖励,随着关卡的递进,难度也会越来越高。

HTML5代码做的中国象棋游戏,这个程序无人能敌

HTML5代码做的中国象棋游戏,这个程序无人能敌

《全民象棋》棋盘桌上尽风流,厮杀几曾休

棋谱则是我们学习各式走法的地方,毕竟都是前辈的经验,既然可以站在巨人的肩膀上,又何乐而不为呢?单机模式则是与人机厮杀的地方,如果没有自信与人对战的话可以与人机进行战斗不断学习新的技巧,再去与玩家进行对战,就会事半功倍。

javascript代码如下:

HTML5代码做的中国象棋游戏,这个程序无人能敌

《全民象棋》棋盘桌上尽风流中国象棋,厮杀几曾休

棋盘上车灵,马欢,相稳,士柔,炮精,卒脚踏实地,一步一个脚印,无畏前行。人生不也亦如此吗?一起来《全民象棋》的世界体验别样人生吧!

文档版代码请看文章第二条建议

HTML5代码做的中国象棋游戏,这个程序无人能敌

HTML5代码做的中国象棋游戏,这个程序无人能敌

文档版代码请看文章第二条建议

HTML5代码做的中国象棋游戏,这个程序无人能敌

文档版代码请看文章第二条建议

HTML5代码做的中国象棋游戏,这个程序无人能敌

HTML5代码做的中国象棋游戏,这个程序无人能敌

HTML5代码做的中国象棋游戏,这个程序无人能敌

有很多人或许会说,我javascript都学完了,但是自己做案例还是不会,这就和数学公式一样,公式你都能倒背如流了,但是呢?你知道什么时候可以用到题里去吗?你知道这个题要用哪个公式吗?今天一位伙伴还对我说了这个问题,我反问,你有自己的项目吗?‘没有’。。。。

案例 到现在就写完了,当然你如果没有做过类似案例的做起这个来还是很麻烦的,自己要记住思路一定不要乱,也不要完全复制我的代码,看了一边代码,自己徒手能写出来才是王道。

最后给大家几个建议。

刚学javascript的话千万不要急着看一些复杂的javascript网页特效的代码,这样只会打击你的信心和学习的兴趣

网上看到的什么十天精通javascript的,笑一下就行!

这个案例就算做完了,想要完整代码自己练习的小伙伴进我的群自助领取,我已经上传到群文件里了,群号:204436223,欢迎学习交流的小伙伴过来一起学习交流。

如果想看到更加系统的文章和学习方法经验可以关注我的微信***:‘web前端课程’关注后回复‘给我资料’可以领取一套完整的学习视频