请选择 进入手机版 | 继续访问电脑版
点击联系客服
客服QQ: 客服微信:
查看: 64|回复: 50

基于React Antd的斗兽场web应用程序

[复制链接]

1

主题

1

帖子

-7

积分

限制会员

积分
-7
发表于 2021-9-14 07:26:53 | 显示全部楼层 |阅读模式
基于React  + Antd  实现的斗兽棋web应用

项目介绍功能规划项目源板渲染mapitemgamemap(部分)map.json国际象棋棋子移动规则特性地形规则游戏结束gamemap(部分)

项目简介

很高兴以这种方式见面。这个项目源于React的官方国际象棋入门,我想以其他方式进行实战。

功能规划

已经实现了

未实现

棋盘渲染

棋子动了

基于国际象棋棋子特性的特殊移动规则

曲面限制

陷阱

进入洞穴

改变围棋
e="checkbox" class="task-list-item-checkbox" disabled="disabled" /> 贴图渲染

  •    界面优化
    项目源码
    具体源码前往: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');
        }
      }

    新人第一次发帖,欢迎大家指正批评。
  • 回复

    使用道具 举报

    0

    主题

    360

    帖子

    -153

    积分

    限制会员

    积分
    -153
    发表于 2021-9-14 07:31:15 | 显示全部楼层
    难得一见的好帖
    回复

    使用道具 举报

    1

    主题

    357

    帖子

    -102

    积分

    限制会员

    积分
    -102
    发表于 2021-9-14 07:51:28 | 显示全部楼层
    前排支持下分享
    回复

    使用道具 举报

    0

    主题

    369

    帖子

    -139

    积分

    限制会员

    积分
    -139
    发表于 2021-9-14 08:15:28 | 显示全部楼层
    我是来刷分的,嘿嘿
    回复

    使用道具 举报

    0

    主题

    375

    帖子

    -147

    积分

    限制会员

    积分
    -147
    发表于 2021-9-14 08:40:44 | 显示全部楼层
    我是来刷分的,嘿嘿
    回复

    使用道具 举报

    1

    主题

    353

    帖子

    -98

    积分

    限制会员

    积分
    -98
    发表于 2021-9-14 09:02:59 | 显示全部楼层
    相当不错,感谢无私分享精神!
    回复

    使用道具 举报

    1

    主题

    356

    帖子

    -134

    积分

    限制会员

    积分
    -134
    发表于 2021-9-14 09:29:39 | 显示全部楼层
    好帖,来顶下
    回复

    使用道具 举报

    1

    主题

    345

    帖子

    -108

    积分

    限制会员

    积分
    -108
    发表于 2021-9-14 09:50:21 | 显示全部楼层
    没看完~~~~~~ 先顶,好同志
    回复

    使用道具 举报

    1

    主题

    351

    帖子

    -162

    积分

    限制会员

    积分
    -162
    发表于 2021-9-14 10:16:00 | 显示全部楼层
    不错
    回复

    使用道具 举报

    0

    主题

    330

    帖子

    -170

    积分

    限制会员

    积分
    -170
    发表于 2021-9-14 10:37:43 | 显示全部楼层
    好好 学习了 确实不错
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|无图版|手机版|小黑屋|汕头@IT精英团

    Powered by Discuz! X3.4 © 2021 Comsenz Inc.

    GMT+8, 2021-9-27 01:55 , Processed in 0.249600 second(s), 19 queries .

    快速回复 返回顶部 返回列表