專案簡介

很高興能以這種方式認識你，這個專案源自于學習了React官方的井字棋入門，想換一種方式，實戰一下，

功能規劃

• 已實作

• 未實作

• • 棋盤渲染
• • 棋子移動
• • 根據棋子特性的特別移動規則
• • 地形限制
• • 陷阱
• • 進入洞穴結束
• • 更改選棋
• • 貼圖渲染
• • 界面優化

專案原始碼

具體原始碼前往：https://gitee.com/lin-liangyou/react-beast-fighting-chess

棋盤渲染

和React官方教學案例一樣思路，將棋盤的棋格單獨成組件，設立屬性如mapitem，然后使用gamemap包裹起來處理，

mapitem

import React from 'react';
import './item.css';

const Item = (props)=>{
    return(
        <button 
        id={`type${props.typeId}`}
        onClick={props.onClick}
        className={`itemParent ${props.classType} ${props.isChoose}`}
        data-index={props.index}>
            {props.name}
        </button>
    )
}

export default Item;

gamemap(部分)

const Map = ()=>{
	//...
	const listRush = () =>{
    const mapAll = [];
    let mapLine = [];
    list.forEach(function(item,index) {
      const { listName, type } = mapInit(index);
      mapLine.push(
      <Item 
      key={index} 
      typeId={item}
      classType={(type === 'B')?'typeB':((type === 'A')?'typeA':'')}
      isChoose={ (choose[0] === index || choose[1] === index) ? (nextPlayer==='Red'?'typeACHO':'typeBCHO') : ''}
      name={listName||''} 
      onClick={ (event) => itemTouch(event) }
      index={index}/>);
      if( (index + 1) % 7 === 0 ){
        mapLine.push(<br/>);
        let parentLine = <div className="parentLine">{mapLine}</div>
        mapAll.push(parentLine);
        mapLine = [];
      }
    })
    return mapAll;
  }
    
    return (
      <div className='gameParent'>
        <div className='title'>{`next player:${nextPlayer}`}</div>
        {
          listRush()
        }
      </div>
    )
}
export default Map;

map.json

為了代碼長度縮減，將用到的靜態資料封裝到map.json里面，list是地形布局,mapPOS則是每個棋盤對應的ID，其他的如此類推，ALsit與BList則是存盤棋子的陣列，順序按照listName

{
    "list": [
        0,0,2,3,2,0,0,
        0,0,0,2,0,0,0,
        0,0,0,0,0,0,0,
        0,1,1,0,1,1,0,
        0,1,1,0,1,1,0,
        0,1,1,0,1,1,0,
        0,0,0,0,0,0,0,
        0,0,0,2,0,0,0,
        0,0,2,3,2,0,0
    ],

    "mapPOS": [
         0,  1,  2,  3,  4,  5,  6,
         7,  8,  9, 10, 11, 12, 13,
        14, 15, 16, 17, 18, 19, 20,
        21, 22, 23, 24, 25, 26, 27,
        28, 29, 30, 31, 32, 33, 34,
        35, 36, 37, 38, 39, 40, 41,
        42, 43, 44, 45, 46, 47, 48,
        49, 50, 51, 52, 53, 54, 55,
        56, 57, 58, 59, 60, 61, 62
    ],

    "mapRiver":[
        22, 23, 25, 26,
        29, 30, 32, 33,
        36, 37, 39, 40
    ],

    "mapRiverBank":[
        15, 16, 18, 19,
        21, 24, 27,
        28, 31, 34,
        35, 38, 41,
        43, 44, 46, 47
    ],

    "mapTrap":[
        2, 4, 10, 52, 58 ,60
    ],

    "gameOver":[
        3, 59
    ],
    "listName":[
        "鼠","貓","狗","狼","豹","虎","獅","象"
    ],

    "AList":[
        20, 12,  8, 18, 16,  6,  0, 14
    ],

    "BList":[
        42, 50, 54, 44, 46, 56, 62, 48
    ]
}

棋子移動 && 規則特性 && 地形規則 && 游戲結束

gamemap(部分)

const itemTouch = (e)=>{
    let point = Number(e.target.dataset.index);
    //判斷是否為首次選子
    if(choose[0] === 99){//選子狀態
      //合理判斷
      if(nextPlayer === 'Red'){
        if(AList.indexOf(point) === -1){
          message.warn('選子錯誤！');
          return;
        }else{//合理 -> 記錄棋子型別
          setChessType( AList.indexOf(point) );
        }
      }else{
        if(BList.indexOf(point) === -1){
          message.warn('選子錯誤！');
          return;
        }else{//合理 -> 記錄棋子型別
          setChessType( BList.indexOf(point) );
        }
      }
      //合理 -> 選子
      setChoose([point,99]);
    }else{//落子狀態
      //落子邏輯 -> 落子點判斷
      const fristPoint = mapPOS.indexOf(choose[0]);
      const comparePoint = mapPOS.indexOf(point);
      const number = comparePoint - fristPoint;
      if( Math.abs(number) === 7 || Math.abs(number) === 1){//距離計算 value：1
        //下水判斷
        if( mapRiver.indexOf(point) !== -1 ){// 落子點 是否為水
          if(chessType === 0){

          }else{
            message.warn('落子錯誤，只有鼠才能入水！');
            return
          }
        }
      }else if(chessType === 6 || chessType === 5){
        console.log(`當前位置：${choose[0]}`);
        if(mapRiverBank.indexOf(choose[0]) !== -1){//河岸判斷
          if( Math.abs(number) === 28 || Math.abs(number) === 3){//距離計算 value：3 || 2

          }else{
            message.warn('落子錯誤，你怎么躍的？！');
            return;
          }
        }else{
          message.warn('落子錯誤，前往河岸才可跳躍！');
          return;
        }
      }else{
        message.warn('落子錯誤，行動格錯誤！');
        return;
      }
      // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
      //   吃子 && 行動 邏輯程序
      // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
      if(nextPlayer === 'Red'){//玩家判斷 -> Red行動
        if( AList.indexOf(point) === -1){//踩子判斷
          //吃子判斷
          const enemy = BList.indexOf(point);
          if(enemy !== -1){// 落子點 踩敵判斷
            // 踩敵 -> 大小比拼
            if( chessType >= enemy ){
              //串列移除
              BList[enemy] = 99;
            }else if( chessType === 0 && enemy === 7){//特殊點 1 鼠象關系
              //串列移除
              BList[enemy] = 99;
            }else if( mapTrap.indexOf(point) !== -1 ){//陷阱判斷
              //串列移除
              BList[enemy] = 99;
            }else{
              message.warn(`落子錯誤，打不過！它比你大${enemy-chessType}級`);
              return;
            }
          }
          //棋格行動
          const obj = AList.indexOf(choose[0]);
          AList[obj] = point; 
        }else{
          message.warn('落子錯誤，落子點有同伴！');
          return;
        }
      }else{//Blue行動
        if( BList.indexOf(point) === -1){//踩子判斷
          //吃子判斷
          const enemy = AList.indexOf(point);
          if(enemy !== -1){// 落子點 踩敵判斷
            // 踩敵 -> 大小比拼
            if( chessType >= enemy ){
              //串列移除
              AList[enemy] = 99;
            }else if( chessType === 0 && enemy === 7){
              //串列移除
              AList[enemy] = 99;
            }else if( mapTrap.indexOf(point) !== -1 ){//陷阱判斷
              //串列移除
              AList[enemy] = 99;
            }else{
              message.warn(`落子錯誤，打不過！它比你大${enemy-chessType}級`);
              return;
            }
          }
          //棋格行動
          const obj = BList.indexOf(choose[0]);
          BList[obj] = point;
        }else{
          message.warn('落子錯誤，落子點有同伴！');
          return;
        }
      }
      //游戲結束狀態判斷
      if(gameOver.indexOf(point) !== -1){
        alert(`游戲結束，恭喜${nextPlayer}勝利\n點擊確認重新開始！！`);
        window.location.reload();
      }
      //落子還原 -=-=- 結束動作
      setChoose([99,99]);
      setChessType(null);
      if( nextPlayer === 'Red' )setNextPlayer('Blue');
      else setNextPlayer('Red');
    }
  }

新人第一次發帖，歡迎大家指正批評，