基于React + Antd 实现的斗兽棋web应用

Posted 2021-10-01 悠灵本林

基于React + Antd 实现的斗兽棋web应用

• 项目简介
• • 功能规划
  • 项目源码
  • • 棋盘渲染
    • • mapitem
      • gamemap(部分)
      • map.json
    • 棋子移动 && 规则特性 && 地形规则 && 游戏结束
    • • gamemap(部分)

项目简介

很高兴能以这种方式认识你，这个项目源自于学习了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');
    }
  }

新人第一次发帖，欢迎大家指正批评。