flex 联机游戏开发 - 中国象棋游戏:(一)核心逻辑

分类：Flex作者：编程之家用户

在开发四国军棋的游戏中，通过 flex联机游戏开发- 四国军棋游戏(五)-提炼棋类开发api,我们提炼出了第一个关于棋类游戏开发的api-FlexChessAPI,这个api设计的方针就是基于状态机与事件驱动的flex主要机制，使开发工作简洁易行。现在，我们第一次使用这个api来开发一款中国象棋游戏，对一个成熟的开发工作者来说，我相信，你大概只需要半天时间就可以让这个象棋游戏运作起来。

现在，我们将中国象棋的逻辑出来。

1）中国象棋由9*10个方格，与四国军棋不同，棋子本身并无行棋路线，

也就是说我们只需要简单扩展ipostion 形成posiitonVO类即可

2）中国象棋的棋子本身无大小，但每个子有自己的行棋路线，吃子的方式是目标子正好处于该子的行棋路线上，另外，其它的子的行为会对目标子的行棋路线造成影响。

也就是说，不论是移动，吃子等，我们都无法立即获得该子的可移动路线，只有等对方行完棋后才能确定行棋路线，所以我们选择的计算行棋路线的方式应该定位在 选中源棋子的时候。

下面，我设计一个ChinaChessHelp类，类中的所有方法与变量都是静态类。

2.1 列出所有棋子，（注意，红方的相与黑方的象不但显示名称不同，行棋路线也不同，这样，我就将他们处理成两上不同的棋子），至于棋子的值，并不重要，只是一个区别作用。

  //棋子
  public static const PIECE_RED_CHE:int=56;
  public static const QIZHI_RED_MA:int=57;
  public static const QIZHI_RED_XIAN:int=58;
  public static const QIZHI_RED_SHI:int=59;
  public static const QIZHI_RED_JIAN:int=60;
  public static const QIZHI_RED_BING:int=55;
  public static const QIZHI_RED_PAO:int=54;
  
  public static const PIECE_BLACK_CHE:int=156;
  public static const QIZHI_BLACK_MA:int=157;
  public static const QIZHI_BLACK_XIAN:int=158;
  public static const QIZHI_BLACK_SHI:int=159;
  public static const QIZHI_BLACK_SUAN:int=160;
  public static const QIZHI_BLACK_ZHU:int=155;
  public static const QIZHI_BLACK_PAO:int=154;

2.2 设计棋子的移动路线，这是中国象棋最核心的逻辑。请参与这个图，我设计出每个子的行棋路线，对于一些行棋路线有限而且透明的棋子，我直接索引出值（如士，象，师），对一些行棋路线不确定的棋子，我们计算出他的行棋路线，如车，马，炮等。所有的索引请参照下面这个图像（棋盘的绘制我在下一节将讲到）。

2.2.1 函数 initMoveRedJian():ArrayCollection

将的行棋路线 用switch case来描述就是如下

/**
   * �方�的行棋路�
   * @param posindex
   * @return
   *
   */  
  public static function initMoveRedJian(posindex:int):ArrayCollection{
   var temp:ArrayCollection;
   switch(posindex){
    case 3:
     temp=new ArrayCollection([4,12]);
     break;
    case 4:
     temp=new ArrayCollection([3,5,13]);
     break;
    case 5:
     temp=new ArrayCollection([4,14]);
     break;
    case 12:
     temp=new ArrayCollection([3,13,21]);
     break;
    case 13:
     temp=new ArrayCollection([4,12,14,22]);
     break;
    case 14:
     temp=new ArrayCollection([5,23]);
     break;
    case 21:
     temp=new ArrayCollection([12,22]);
     break;
    case 22:
     temp=new ArrayCollection([13,21,23]);
     break;
    case 23:
     temp=new ArrayCollection([14,22]);
     break;
    default:
     break;
   }
   return temp;
  }

 

2.2.2 函数 initMoveRedShi():ArrayCollection

士的行棋路线 用switch case来描述就是如下

/**
   * �方士的行棋路�
   * @param posindex
   * @return
   *
   */  
  public static function initMoveRedShi(posindex:int):ArrayCollection{
   var temp:ArrayCollection;
   switch(posindex){
    case 3:
     temp=new ArrayCollection([13]);
     break;
    case 5:
     temp=new ArrayCollection([13]);
     break;
    case 13:
     temp=new ArrayCollection([3,23]);
     break;
    case 21:
     temp=new ArrayCollection([13]);
     break;
    case 23:
     temp=new ArrayCollection([13]);
     break;
    default:
     break;
   }
   return temp;
  }

逻辑是这样，但上面的写法是错误的，flex中当数组只有一个元素时，最好不要直接用arraycollection进行初始化。您可以修改一下：）

2.2.3 红方象的行棋路线 initMoveRedXian

/**
   * �方象的行棋路�
   * 注意蹩脚路线。
   * @param posindex
   * @return
   *
   */ 


  public static function initMoveRedXian(posindex:int,pieceMap:HashMap):ArrayCollection{
   var temp:ArrayCollection=new ArrayCollection();
   switch(posindex){
    case 2:
     if ((pieceMap.get(10) as PieceVO).deskpos==-1)
      temp.addItem(18);
     if ((pieceMap.get(12) as PieceVO).deskpos==-1)
      temp.addItem(22);
     break;
    case 6:
     if ((pieceMap.get(14) as PieceVO).deskpos==-1)
      temp.addItem(22);
     if ((pieceMap.get(16) as PieceVO).deskpos==-1)
      temp.addItem(26);
     break;
    case 18:
     if ((pieceMap.get(10) as PieceVO).deskpos==-1)
      temp.addItem(2);
     if ((pieceMap.get(28) as PieceVO).deskpos==-1)
      temp.addItem(38);
     break;
    case 22:
     if ((pieceMap.get(12) as PieceVO).deskpos==-1)
      temp.addItem(2);
     if ((pieceMap.get(14) as PieceVO).deskpos==-1)
      temp.addItem(6);
     if ((pieceMap.get(30) as PieceVO).deskpos==-1)
      temp.addItem(38);
     if ((pieceMap.get(32) as PieceVO).deskpos==-1)
      temp.addItem(42);
     break;
    case 26:
     if ((pieceMap.get(16) as PieceVO).deskpos==-1)
      temp.addItem(6);
     if ((pieceMap.get(34) as PieceVO).deskpos==-1)
      temp.addItem(42);
     
     break;
    case 38:
     if ((pieceMap.get(28) as PieceVO).deskpos==-1)
      temp.addItem(18);
     if ((pieceMap.get(30) as PieceVO).deskpos==-1)
      temp.addItem(22);
     break;
    case 42:
     if ((pieceMap.get(32) as PieceVO).deskpos==-1)
      temp.addItem(22);
     if ((pieceMap.get(34) as PieceVO).deskpos==-1)
      temp.addItem(26);
     break;
    default:
     break;
   }
   return temp;
  }

2.2.4 红方兵的行棋路线 public static function initMoveRedBing():ArrayCollection

注意的是，并没有过河时，只能向前走，过河后则可以有三个位置可以走。

利用posindex的值进行判断

/**
   * �方并的行棋路�
   * @param posindex
   * @return
   *
   */ 
  public static function initMoveRedBing(posindex:int,pieceMap:HashMap):ArrayCollection{
   var temp:ArrayCollection=new ArrayCollection();
   if (posindex%9-1>=0&&posindex>=45) temp.addItem(posindex-1);
   if (posindex%9+1<9&&posindex>=45) temp.addItem(posindex+1);
   if (posindex+9<90) temp.addItem(posindex+9);
   return temp;
  }

2.2.5 马的行棋路线 public static function initMoveRedBing():ArrayCollection

车，马，炮属于自由移动棋子，对红黑双方是对等存在，所以可以使用公用函数进行处理。

马的游戏逻辑主要就是判断目标点位是否在棋盘中以及是不是有蹩脚点位存在。

 /**
   * 马的行棋路�
   * 每个马有八个行棋位置，有四个蹩脚点位，
   * @param posindex
   * @return
   *
   */  
  public static function initMoveMa(posindex:int,pieceMap:HashMap):ArrayCollection{
   var temp:ArrayCollection=new ArrayCollection();
   
   //左方向
   if (posindex%9-2>=0) {
     if ((pieceMap.get(posindex-1) as PieceVO).deskpos==-1)
     {
      if ((posindex-11)>=0)
      {
       temp.addItem(posindex-11);
      }
      if ((posindex+7)<89)
      {
       temp.addItem(posindex+7);
      }
      
     }
   }
   //右方向
   if (posindex%9+2<9) {
    
    if ((pieceMap.get(posindex+1) as PieceVO).deskpos==-1)
    {
     if ((posindex-7)>=0)
     {
      temp.addItem(posindex-7);
     }
     if ((posindex+11)<89)
     {
      temp.addItem(posindex+11);
     }
     
    }
   }
   //上方向
   if (posindex-18>=0) {
    if ((pieceMap.get(posindex-9) as PieceVO).deskpos==-1)
    {
     if ((posindex-19)%9<posindex%9)
     {
      temp.addItem(posindex-19);
     }
     if ((posindex-17)%9>posindex%9)
     {
      temp.addItem(posindex-17);
     }
     
    }
   }
   //下方向
   if (posindex+18<90) {
    if ((posindex+19)%9>posindex%9)
    {
     temp.addItem(posindex+19);
    }
    if ((posindex+17)%9<posindex%9)
    {
     temp.addItem(posindex+17);
    }
   }
   return temp;
  }

 

2.2.6 车的行棋路线

车的行棋逻辑就是查看四个方向是否有空的位置，如果找到一个棋子，则结束寻找，将当前找到的棋子也加入索引。

 /**
   * 车的行棋路�
   * @param posindex
   * @return
   *
   */  
  public static function initMoveChe(posindex:int,pieceMap:HashMap):ArrayCollection{
   var temp:ArrayCollection=new ArrayCollection();
   //模方向
   for (var xr:int=posindex%9+1;xr<9;xr++)
   {
    if ((pieceMap.get(posindex+xr-posindex%9) as PieceVO).deskpos==-1)
    {
     temp.addItem(posindex+xr-posindex%9);
    }
    else
    {
     //将找到最后一子的位置也加入
     temp.addItem(posindex+xr-posindex%9);
     break;
    }
   }
   for (var xl:int=posindex%9-1;xl>=0;xl--)
   {
    if ((pieceMap.get(posindex+xl-posindex%9) as PieceVO).deskpos==-1)
    {
     temp.addItem(posindex+xl-posindex%9);
    }
    else
    {
     temp.addItem(posindex+xl-posindex%9);
     break;
    }
   }
   //竖方向
   for (var yb:int=Math.floor(posindex/9)+1;yb<10;yb++)
   {
    if ((pieceMap.get(posindex+9*(yb-Math.floor(posindex/9))) as PieceVO).deskpos==-1)
    {
     temp.addItem(posindex+9*(yb-Math.floor(posindex/9)));
    }
    else
    {
     temp.addItem(posindex+9*(yb-Math.floor(posindex/9)));
     break;
    }
   }
   for (var yt:int=Math.floor(posindex/9)-1;yt>=0;yt--)
   {
    if ((pieceMap.get(posindex+9*(yt-Math.floor(posindex/9))) as PieceVO).deskpos==-1)
    {
     temp.addItem(posindex+9*(yt-Math.floor(posindex/9)));
    }
    else
    {
     temp.addItem(posindex+9*(yt-Math.floor(posindex/9)));
     break;
    }
   }
   return temp;
  }

 

2.2.7 炮的行棋路线

炮的行棋路线相对复杂些，不过也很好处理，基本情况与车相同，只不过当你在某一方向找到第一个棋子后，设置一个判断，判断为找到一个棋子后，对空余的位置不再添加，则再找第二个棋子，如果找到第二个棋子，将第二个棋子加入索引

/**
   * 炮的行棋路�
   * @param posindex
   * @return
   *
   */  
  public static function initMovePao(posindex:int,pieceMap:HashMap):ArrayCollection{
   var temp:ArrayCollection=new ArrayCollection();
   
   //模方向
   var findOne:Boolean=false;
   for (var xr:int=posindex%9+1;xr<9;xr++)
   {
    if ((pieceMap.get(posindex+xr-posindex%9) as PieceVO).deskpos==-1)
    {
     if (!findOne)
      temp.addItem(posindex+xr-posindex%9);
    }
    else
    {
     if (!findOne)
     {
      findOne=true;
      continue;
     }
     else
     {
      //将找到子的下一子的位置也加入
      temp.addItem(posindex+xr-posindex%9);
      break;
     }
     
    }
   }
   findOne=false;
   for (var xl:int=posindex%9-1;xl>=0;xl--)
   {
    if ((pieceMap.get(posindex+xl-posindex%9) as PieceVO).deskpos==-1)
    {
     if (!findOne)
      temp.addItem(posindex+xl-posindex%9);
    }
    else
    {
     if (!findOne)
     {
      findOne=true;
      continue;
     }
     else
     {
      //将找到子的下一子的位置也加入
      temp.addItem(posindex+xl-posindex%9);
      break;
     }
     
    }
   }
   //竖方向
   findOne=false;
   for (var yb:int=Math.floor(posindex/9)+1;yb<10;yb++)
   {
    if ((pieceMap.get(posindex+9*(yb-Math.floor(posindex/9))) as PieceVO).deskpos==-1)
    {
     if (!findOne)
      temp.addItem(posindex+9*(yb-Math.floor(posindex/9)));
    }
    else
    {
     if (!findOne)
     {
      findOne=true;
      continue;
     }
     else
     {
      //将找到子的下一子的位置也加入
      temp.addItem(posindex+9*(yb-Math.floor(posindex/9)));
      break;
     }
     
    }
   }
   findOne=false;
   for (var yt:int=Math.floor(posindex/9)-1;yt>=0;yt--)
   {
    if ((pieceMap.get(posindex+9*(yt-Math.floor(posindex/9))) as PieceVO).deskpos==-1)
    {
     if (!findOne)
      temp.addItem(posindex+9*(yt-Math.floor(posindex/9)));
    }
    else
    {
     if (!findOne)
     {
      findOne=true;
      continue;
     }
     else
     {
      //将找到子的下一子的位置也加入
      temp.addItem(posindex+9*(yt-Math.floor(posindex/9)));
      break;
     }
     
    }
   }
   return temp;
  }

3）中国象棋的游戏控制引擎与四国军棋并无太大差异，我们在扩展 BaseGameEngine 后，只需要覆写 CheckWin()方法，就基本可以完成大量的工作。当然，别忘了棋盘不家个初始布局，我们只需要设计一个静态布局与一个初始化方法即可。

 //默认的棋盘布局
  private const DEFAULT_LAYOUT:Array=[56,57,58,59,60,56,-1,54,55,155,154,156,157,158,159,160,156];

 

public function initLayout():void{
   for (var i:int=0;i<this.DEFAULT_LAYOUT.length;i++)
   {
    var pieceVO:PieceVO=pieceMap.get(i) as PieceVO;
    pieceVO.value=DEFAULT_LAYOUT[i];
    if (int(DEFAULT_LAYOUT[i])>0&&int(DEFAULT_LAYOUT[i])<100)
    {
     pieceVO.deskpos=getNextPlayer(1).deskpos;
    }
    else if (int(DEFAULT_LAYOUT[i])>=100)
    {
     pieceVO.deskpos=currentDeskpos;
    }
   }
  }

在完成以上这些逻辑工作后，得到的结果就是下面这个，这个是点击炮后我们可以清楚地看到行棋路线索引。

 

 

核心逻辑基本就是这些，在这个寒冷的冬天里，我打算利用这些时间开发与优化一些有趣的棋牌类游戏，我的下一个目标是扎金花游戏，这是一个牌类游戏，我打算接着写一个flexcardapi,当然，本文的下一节我将提供中国象棋的扩展类的设计与显示设计。如果时间允许的话，会很快，当然，如果您是一名flex开发者，您也可以直接给我发消息，让您来完成下面的开发，我会把已经完成的设计工作教给你，您也可以学会如何使用这个api,我相信，您会找到乐趣的，您也可以开发一些更简单或复杂的游戏，如乖三棋，动物棋，或者跳棋。  

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

css display:flex 属性
一：display:flex布局display:flex是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵
display:flex 布局详解2
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何垂直居中对齐，方法有很多，但是在学习了flex布局之后，垂直居中更加容易实现HTML代码：1<divclass="demo">2<divclass="inner">3<p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p>4</div
移动端开发
移动端开发知识点pc端软件和移动端apppc端软件是什么，有哪些应用。常见的例子，比如360杀毒，photoShop，VisualStudioCode等等移动端app是什么，有哪些应用。常见的例子，比如手机微信，手机qq，手机浏览器，美颜相机等等PC端与移动端的区别第一：PC考虑的是浏览器的兼容性，移动端考
grid布局笔记
最近挺忙的，准备考试，还有其他的事，没时间研究东西，快周末了，难得学点东西，grid是之前看到的，很好奇，讲的二维的布局，看起来很方便，应该很适合移动端布局，所以今天抽时间学一学，这个当是笔记了。参考的是阮老师的博客。阮一峰：CSSGrid网格布局教程http://www.ruanyifeng.com/blog/2019/03/g
盒模型
display:flex;把容器设置为弹性盒模型（设置为弹性盒模型之后，浮动，定位将不会有效果）给父元素设置的属性：（1）display：flex---把容器设置为弹性盒模型。（2）flex-direction---设置弹性盒模型主轴方向默认情况下主
javascript – Flex禁用Safari键盘快捷键
我在网页上运行了一个Flex应用程序,我想使用Command←组合键在应用程序中触发某些操作.这在大多数浏览器上都很好,但在Safari上,浏览器拦截此键盘事件并导致浏览器“返回”事件.有没有办法,通过Flex或通过页面上的其他地方的JavaScript,我可以告诉Safari不要这样做？解决方法:简短的
flex布局，flex-item
flex布局，flex-item1<template>2<viewclass="container">3<viewclass="greentxt">4A5</view>6<viewclass="redtxt">7B8<
c# – 大屏幕多点触控交互式应用程序设计
我应该设计一个大型多点触控屏幕的应用程序.从大到大,我的意思是新闻广播员(大约55英寸及以上).该应用程序是一个交互式地图.我的问题是：开发应用程序的技术.我的第一个想法是在AdobeFlex中制作,但是HTML5也是如此……必须有一些非常棒的Java库用于触摸交互,但是在Windows平台上
左图有文字的一些CSS样式
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&quo
弹性盒模型：flex多行多列两端对齐，列不满左对齐
【1】需求：  【2】解决方案：最近遇到布局上要求item两端对齐，且最后一行在列不满的情况下要求左对齐，使用flex的justify-content:space-between;实现时发现最后一行不能左对齐，而是两端对齐方式。 不是项目上想要的效果#网上查了一些资料，有两种方法可以实现效果：**1.
AS3无法从Java发送的套接字解​​码AMF3对象
我有一个java套接字服务器,它在连接时将Animal对象发送到Flash客户端.对象发送方式如下：Amf3Outputamf3Output=newAmf3Output(SerializationContext.getSerializationContext());amf3Output.setOutputStream(userSocket.getOutputStream());amf3Output.writeObject(animal)
java – 在JBoss上使用Flex / BlazeDS的Client.Error.MessageSend问题
我正在开发一个Flex3.4应用程序,它通过最新版本的BlazeDS与JBoss-4.2.2服务器上运行的JavaEE后端进行交互.当我在Tomcat上从FlashBuilder4beta2运行Flex应用程序时,一切都很好,Flex应用程序能够进行所需的远程调用.但我的生产环境是在JBoss上,当我将应用程序移动到JBoss时(更
java – NetConnection.Call.Failed偶尔在Flex3 / Tomcat / BlazeDS / Spring中发生
我有一个非常大的问题.我使用Flex3/Tomcat/BlazeDS/Spring编写了一个大型应用程序,在本地开发时运行良好,当我部署到公共开发环境时很好,但是当部署到我们的测试环境时经常失败.当远程处理请求花费大量时间(超过20秒)时,故障似乎最常发生.在我的开发服务器上,错误发生,但仅
HTML5的Day1
弹性和布局display:flex在ie6,ie7不兼容状态，一般在pc用的比较少,在手机端所有的浏览器都是支持的控制子元素在父元素里面的位置关系display:flex是给父元素加的文档流是按照主轴排列，只要父元素加了flex,那么里面的子元素全部可以直接添加宽高主轴的方向
FLEX源码分析
FLEX2.0源码分析（一）https://www.jianshu.com/p/8bc4c5f4b19fFLEX源码分析二（网络监测swizzle）https://www.jianshu.com/p/ffb95f2cbda6FLEX源码分析三（网络监测记录FLEXNetworkRecorder）https://www.jianshu.com/p/66267dc922c5FLEX源码分析四（Systemlog）https://www.jianshu.
页面伸缩布局实例
1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title><itle>6<style>7*{8margin:0;9padding:0;10
弹性盒子圣杯布局
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&qu
flex与inline-flex
flex：将对象作为弹性伸缩盒显示inline-flex：将对象作为内联块级弹性伸缩盒显示两者都是使子元素们弹性布局，但是如果是flex，父元素的尺寸不由子元素尺寸动态调整，不设置时默认是100%，而inline-flex则会使父元素尺寸跟随子元素们的尺寸动态调整。
css实现手机端导航栏左右滑动
<html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>test<itle><stylemedia="screen">.tab-head{list-style-type:no
php – 查找位于指定距离之间的用户(使用用户的邮政编码)
有没有办法使用邮政编码找到径向距离？我的任务是搜索居住在指定距离内的所有用户.我知道用户的zipcodes.例如,距离当前位置25英里的用户.我有其他搜索类别,我正在使用mysql查询.我无法解决距离问题.我的后端是在PHP中Flex的前端和前端.对我来说最好的选择就是www.zip-codes.com
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot