cocos creator 制作對戰版中國象棋


1、搭建開發環境

  1、)客戶端采用cocos creator 

  2、)服務器采用Node.js

2、制作前言

  1、因為是雙人對戰,對方的視角和自己的視角是不同的,雖然現實中棋盤只有一個,但是在手機上,每個人都是以自己的手機為主視角,所以需要進行坐標轉換

  這里為了統一,確認紅色方為先手,所以以紅色方的棋盤為基礎棋盤

  2、確定棋盤方向

  X軸和Y軸的確定:這個方向可以隨個人喜好,但是在使用二維數組確定棋盤的時候,為了更加直觀的展示棋子與數據的關系,

  個人寫法: 以左上角為原點,X軸向下,Y軸向右

  數據存儲采用二維數組

  example

    var layer = {

      {...},{...},...

    };

  這樣寫的目的就是 客戶端點擊的棋子轉換為數據后傳到server,server處理就可以直接使用,不用在意棋盤的轉換。

  3、轉換

  當紅色方走棋時,直接校驗紅色方的落子邏輯,確定結果后,返回落子結果,紅色方直接返回,黑色方轉換后再返回。

  red->black原理

  在Server端,數據以紅色棋盤為基礎,所以紅色方不需要轉換

  但是對於黑色方來說,他的棋子坐標系和紅色方是一樣的,但是數據不同,例如紅方選擇(1-1)的棋子,在黑方棋子坐標(1-1)對應是hongfan的棋子,而實際上對應的是坐標(10-9)

  也就是紅方選擇自己右上角的一個棋子,在黑色這邊是選擇自己的右下角的棋子(參考系是上邊設定的參考)

  換算公式

  black.x = (X軸的最大值+1) - red.x

  black.y = (Y軸的最大值+1) -red.y 

  當黑方走棋的時候,先換算成基礎棋盤坐標(紅方)

  4、棋子走法限制

     所有的走法都不能主動送將軍

    1、(將/帥)

      1、保持X軸或者Y軸一致性(至少X軸相同或者Y軸相同)

      2、移動范圍在棋盤之內

      3、田子格內移動,注意區別紅黑的軸(根據參考系來定)

      4、移動路程中間和落子點無自己的棋子

    2、(士/仕)

      1、移動范圍在棋盤之內

      2、區域限制(田子格內)

      3、移動后的X軸和Y軸必須是移動前的對角(左上,右上,左下,右下),偏移差為 1

      4、移動路程中間和落子點無自己的棋子

    3、(相/象)

      1、移動范圍在棋盤之內

      2、移動后的X軸和Y軸必須是移動前的對角(左上,右上,左下,右下),偏移差為 2

      3、移動路程中間和落子點無自己的棋子

    4、(馬)

      1、移動范圍在棋盤之內

      2、先確定行走方向,上下左右偏移 1,無棋子為方向可選,再判定落子方向,行走方向再偏移 1,取垂直的偏移為1的落子點(落子方向和行走方向垂直)

      3、落子點無自己的棋子

    5、(車)

      1、移動范圍在棋盤之內

      2、保持X軸或者Y軸一致性(至少X軸相同或者Y軸相同)

      3、移動路程中間和落子點無自己的棋子

    6、(炮)

      1、移動范圍在棋盤之內

      2、保持X軸或者Y軸一致性(至少X軸相同或者Y軸相同)

      3、以自己為中心同一方向軸的第二個棋子在非自己棋子的前提下可以落子

    7、(兵/卒)

      1、移動范圍在棋盤之內

      2、沒有過河之前,只能前進,過河之后,可以左右移動,和前進

      3、偏移量為1

   5、數據與界面設計

     1、客戶端

      1,添加一層依賴節點(用來獲取點擊的准確位置)

      2,添加顯示棋子節點(按需初始化,層級在依賴節點之下)

      3,保留數據

        var chessnode = {

          "typevalue":1,  //將士相馬車炮兵,每個自定義一個鍵值,代表他們的身份

          "type":1,    //紅黑

          "isriver":false  //是否過河

        }

     2、服務器數據表示可以使用客戶端的 chessnode

  6、生成每個子的落子點(吃棋點,非移動點,例如,炮可以移動到某個位置,但是不能吃子),

    落子前用來判定對方的落子,去除主動送將的行為,移動之后也要生成落子點,判定主動將軍。

    (每次都要主動生成,本來想哪個棋子移動就更新哪個棋子的落子點,但是這里有依賴關系,比如蹩腳馬)

3、開發步驟

  1、客戶端

    1、搭建界面

    


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM