`
逐行分析JS源代码
  • 浏览: 87839 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

js 写中国象棋游戏_应用backbone、canvas

阅读更多

中国象棋  -- 【代码详细见附件,本版本暂只支持 谷歌的 chrome 浏览器,其它浏览器后续支持 】

作者: 江潇

Version: 0.0.1 

前段时间做了个跳棋,【见跳棋游戏—backbone框架开发】网友反馈功能还好,但棋子跳较简单,且可玩性不高。

建议可以做个象棋看看。于是上周日写了这个游戏,画面未用图片,美观差了些。

依然使用backbone框架管理MVC,目的交流backbone的使用【见透过源码学前端 之 Backbone 一】及二部分。

下载附件包,使用chrome浏览器运行 chess.html。业务代码在 core/chess.js

 

目前支持的功能有

1、生成棋盘

中国象棋_棋盘

2、点击开始,生成双方玩家棋子

中国象棋_棋子

3、任一方可率先开始,规则同象棋规则

中国象棋_棋子路径

4、一方走过后,另一方底边线显彩色表示轮到该玩家进行

 

5、一方“将”被吃后,提示另一方获胜

中国象棋_获取

尚待完善部分:

1、悔棋

 

2、操作声音提示

 

3、代码优化

 

4、欢迎指正其它bug

 

从结构上讲,参照跳棋,分为以下类:

chess  -- [view] app

coords -- [collection] 所有坐标点

coord  -- [model] 单个坐标点模型

pieces -- [collection] 所有棋子

pieceEl-- [view] 单个棋子视图

piece  -- [model] 单个棋子模型

parts  -- [collection] 某个棋子所有可跳点

partEl -- [view] 可跳点视图

part   -- [model] 单个可跳点模型

相比而言多了RULE,因跳棋难点在于画非矩阵棋盘及找出每个坐标与周围一圈坐标的关联,在此基础上跳子相对容易,

因为每个子跳法都是一样。

而象棋则棋盘及坐标规整画出来较容易,难点在于每个棋子的关联及吃子算法不一样,所有先在 RULE里定义

好规则,选中每个子时再据其规则,计算可走点及可吃点

 

另外 诚心求教 如何才能实现两个玩家在线实时对战功能,据说可以用 socket IO 进行实时消息推送,

我没用过,不明白如何着手,欢迎指教

  • 大小: 10.8 KB
  • 大小: 34.7 KB
  • 大小: 37.7 KB
  • 大小: 40.4 KB
10
4
分享到:
评论
13 楼 逐行分析JS源代码 2013-09-30  
wuyupengwoaini 写道
楼主好像没有考虑,帅和将照面的情况啊。
不过还是感谢楼主

这个的确没有,当然想着要做这一步来着,后来迟迟未着手
12 楼 wuyupengwoaini 2013-09-30  
楼主好像没有考虑,帅和将照面的情况啊。
不过还是感谢楼主
11 楼 逐行分析JS源代码 2013-07-09  
感谢大家支持,今天完成了 象棋的在线对战功能,详见
http://jiangxiao-2000.iteye.com/blog/1901699
再次感谢大家的建议与支持
10 楼 拽的欠扁 2013-07-03  
楼主好人。
9 楼 sshzhangwg 2013-07-03  
同样喜欢中国象棋游戏,楼主钻研和分享精神值得敬佩!
8 楼 flex_莫冲 2013-07-03  
不错。很喜欢这游戏。
7 楼 hlj317 2013-07-02  
可以参考一下这篇文章,http://blog.cnbang.net/works/1652/,这个人就是用socket.io+node.js做了一个即连的游戏,一个游戏大厅,里面可以进行实时对战的陆战棋。

以前有做过类似平台的朋友,可以一起讨论一下~~~
6 楼 sailei1 2013-07-02  
5 楼 inotgaoshou 2013-07-02  
楼主威武啊~下载来拜读学习下~
4 楼 308202251 2013-07-02  
收_藏了以后看!5楼必须好评
3 楼 hlj317 2013-07-02  
喝水不忘掘井人,希望广大读者在下载阅读楼主作品的同时,同时也能留个言支持一下楼主,我们的留言和鼓励,对他来说是前进的动力~~~

这套JS源码分析非常精辟,希望楼主再接再厉,也希望能有更多的人一起参与讨论,互相进步,互相学习~~
2 楼 hailongshih 2013-07-02  
niubility
1 楼 hlj317 2013-07-02  
上周拜读了楼主的跳棋文章后,已是不禁拍案叫绝~~

想不到短短数日之内,楼主在百忙之中又利用业余时间,做出了一套象棋的游戏,更是不禁拍案叫绝~~

相关推荐

    ssh_full.zip_AOP java_aop_backbone jsp_backbone struts_ssh

    在描述中提到的"AOP java_aop_backbone",这可能指的是在Java环境中使用AOP技术,并且可能与Backbone.js这个JavaScript库有关。Backbone.js是一个轻量级的MV*框架,用于构建富前端应用。然而,通常Backbone.js与后端...

    JavaScript_Application_Architecture_with_Backbone.js

    ### JavaScript Application Architecture with Backbone.js #### 一、引言 在现代Web开发中,随着用户对交互性与体验要求的不断提高,单页面应用(Single Page Application, SPA)逐渐成为主流趋势之一。在这种...

    Backbone.js应用程序开发

    backbone.js提供了一套web开发的框架,为复杂javascript应用程序提供一个mvc结构。, 《backbone.js应用程序开发》详细介绍了如何使用backbone.js完成web应用开发。全书从了解mvc、spa和backbone.js的基本知识开始,...

    BACKBONE.JS应用程序开发

    backbone.js提供了一套web开发的框架,为复杂javascript应用程序提供一个mvc结构。, 《backbone.js应用程序开发》详细介绍了如何使用backbone.js完成web应用开发。全书从了解mvc、spa和backbone.js的基本知识开始,...

    WS_MQ_Messaging_Backbone_for_SOA

    ### WS_MQ Messaging Backbone for SOA 在当前复杂的IT环境中,企业面临着日益增长的数据处理需求与不断变化的技术挑战。为了适应这种变化并保持竞争力,许多组织正在转向服务导向架构(SOA)。本白皮书旨在探讨...

    backbone_js_1.1.2

    Backbone.js是一款轻量级的JavaScript库,专为构建复杂前端应用而设计。它通过提供模型(Models)、视图(Views)、集合(Collections)和路由器(Routers)等核心概念,帮助开发者组织和管理Web应用的结构。1.1.2是...

    BACKBONE.JS应用程序开发--高清版

    Backbone.js提供了一套Web开发的框架,为复杂的JavaScript应用程序提供了一个MVC结构。  《Backbone.js应用程序开发》详细介绍了如何使用Backbone.js完成Web应用开发。全书从了解MVC、SPA和Backbone.js的基本知识...

    backbone_api_frame

    Backbone.js是一款轻量级的JavaScript库,它为前端开发者提供了模型层(Model)、视图层(View)和控制器层(Controller)的结构,以帮助组织和管理复杂的JavaScript应用程序。模型(Model)用于处理数据和业务逻辑...

    Backbone.js应用程序开发 中文清晰完整版pdf

    backbone.js提供了一套web开发的框架,为复杂javascript应用程序提供一个mvc结构。 《backbone.js应用程序开发》详细介绍了如何使用backbone.js完成web应用开发。全书从了解mvc、spa和backbone.js的基本知识开始,...

    Segmentation_models_with_pretrained_backbone

    Segmentation_models_with_pretrained_backbones._PyT_segmentation_models.pytorch

    Node应用程序构建——使用MongoDB和Backbone

    总结,构建Node.js应用结合MongoDB和Backbone.js,可以充分利用JavaScript的全栈能力,实现快速开发和高效的前后端交互。这种组合特别适合构建动态的、数据驱动的Web应用,如实时聊天、博客平台或社交网络等。通过...

    pvtv_backbone

    在实际应用中,"pvtv2_backbone"可能被用作各种计算机视觉任务的起点,例如在目标检测、实例分割、语义分割等任务中作为基础特征提取器。用户可以将这个预训练模型加载到自己的模型中,然后进行微调以适应特定的应用...

    backbone.js underscore.js

    Backbone.js 和 Underscore.js 是两个在JavaScript开发中广泛使用的库,它们为构建复杂的Web应用程序提供了强大的工具。这两个库都是基于jQuery库,其中jQuery-1.10.2.js是jQuery的一个版本,它为DOM操作、事件处理...

    [MongoDB] Node.js 应用程序开发 (MongoDB 及 Backbone 实现) (英文版)

    [奥莱理] Node.js 应用程序开发 (MongoDB 及 Backbone 实现) (英文版) [奥莱理] Building Node Applications with MongoDB and Backbone (E-Book) ☆ 出版信息:☆ [作者信息] Mike Wilson [出版机构] 奥莱理 ...

    JavaScript的Backbone.js框架入门学习指引_.docx

    **Backbone.js** 是一款用于简化JavaScript应用结构的开源库,它基于MVC(Model-View-Controller)设计模式,旨在帮助开发者更好地组织代码,提高代码的可读性和可维护性。Backbone.js的一个重要特点是其轻量级的...

    用Backbone.js写的小项目

    Backbone.js是一款轻量级的JavaScript库,专为构建可维护性和结构化的Web应用程序而设计。它主要关注数据模型的管理、视图的渲染以及事件处理,为前端开发者提供了一套MVC(Model-View-Controller)架构模式的实现。...

    《Node应用程序构建:使用MongoDB和Backbone》 源码

    《Node应用程序构建:使用MongoDB和Backbone》是一本深入探讨使用Node.js、MongoDB以及Backbone.js构建高效网络应用的书籍。源码提供给读者更直观的学习体验,通过实际操作加深理论理解。以下是该书涉及的主要知识点...

    [Backbone.js] Backbone.js 应用程序开发 (英文版)

    [奥莱理] Backbone.js 应用程序开发 (英文版) [奥莱理] Developing Backbone.js Applications (E-Book) ☆ 出版信息:☆ [作者信息] Addy Osmani [出版机构] 奥莱理 [出版日期] 2013年05月29日 [图书页数] 374...

Global site tag (gtag.js) - Google Analytics