ReactNative 井字游戏 实战

效果展示

需要的插件准备

此实战项目需要用到两个插件。

• react-native-snackbar

  底部信息提示组件。

• react-native-vector-icons

  图标组件。

安装组件：

npm i react-native-snackbar
npm i react-native-vector-icons
npm i @types/react-native-vector-icons // 使用 TS 时需要安装

使用react-native-vector-icons插件时，需要在 IOS 和安卓的配置文件中加入对应的参数配置，而这里我是使用安卓，所以只是展示安卓的配置，IOS 的配置方法可以查看这里。

// 路径是在 android/app/build.gradle 文件中添加如下配置
apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

游戏逻辑

我们棋盘采用数组的方式来维护棋盘下子情况。具体的棋盘布局图如下：

在井字游戏规则中，主要在横着连续三个、竖着连续三个、斜着连续三个棋子都算是获胜，所以通过棋盘布局图，我们可以知道有如下几种情况就可以获取：

1. 数组下标[0,1,2]、[3,4,5]和[6,7,8]中的所有值相同的时候我们就可以判断为获胜
2. 数组下标[0,3,6]、[1,4,7]和[2,5,8]中的所有值相同的时候我们就可以判断为获胜
3. 数组下标[0,4,8]和[2,4,6]中的所有值相同的时候我们就可以判断为获胜

通过上述梳理的规则，我们就可以编写对应判断输赢的逻辑函数。这里就不做代码展示，可以下载完整代码查看。

注意： 数组下标的值必须非初始化的值（本实战中初始值是 empty），所以编写游戏逻辑时需要加上此判断。

实现核心步骤

1. 编写棋子组件

// 这里的Icon组件是react-native-vector-icons组件里面的
type IconParsms = PropsWithChildren<{ name: string }>;
const Icons = (props: IconParsms) => {
  switch (props.name) {
    case "circle":
      return <Icon name="circle-thin" size={38} color="#F7CD2E" />;
      break;
    case "cross":
      return <Icon name="times" size={38} color="#38CC77" />;
      break;
    default:
      return <Icon name="pencil" size={38} color="#0D0D0D" />;
      break;
  }
};

2. 编写下棋动作事件

下棋动作主要是监听棋盘中每个

// 点击事件，修改对应的图标
const onChangeItem = (itemNumber: number) => {
  // 已经有一方赢得比赛时，在点击棋盘时就会使用Snackbar组件给用户信息提示
  if (gameWinner) {
    return Snackbar.show({
      text: gameWinner,
      backgroundColor: "#000000",
      textColor: "#FFFFFF",
    });
  }

  // 判断棋盘每个位置上的棋子情况
  if (gameState[itemNumber] === "empty") {
    gameState[itemNumber] = isCross ? "cross" : "circle";
    setIsCross(!isCross); // 通过修改 isCross 的值判断是 ○ 还是 × 下棋
  } else {
    // 非empty的值都是已经下过子，所以就不能在下
    return Snackbar.show({
      text: "这里已有棋子",
      backgroundColor: "red",
      textColor: "#FFF",
    });
  }

  checkIsWinner(); // 调用判断输赢的逻辑函数
};

1. 编写页面结构（样式代码在完整代码中）

<SafeAreaView>
  <StatusBar />

  {/* 操作/比赛提示 */}
  {gameWinner ? (
    <View style={[styles.playerInfo, styles.winnerInfo]}>
      <Text style={styles.winnerTxt}>{gameWinner}</Text>
    </View>
  ) : (
    <View
      style={[styles.playerInfo, isCross ? styles.playerX : styles.playerO]}
    >
      <Text style={styles.gameTurnTxt}>轮到 {isCross ? "X" : "O"} 下</Text>
    </View>
  )}

  {/* 棋盘 */}
  <FlatList
    numColumns={3}
    data={gameState}
    style={styles.grid}
    renderItem={({ item, index }) => (
      <Pressable
        key={index}
        style={styles.card}
        onPress={() => onChangeItem(index)}
      >
        <Icons name={item} />
      </Pressable>
    )}
  />

  {/* 游戏操作 */}
  <Pressable style={styles.gameBtn} onPress={reloadGame}>
    <Text style={styles.gameBtnText}>
      {gameWinner ? "开始新游戏" : "重置游戏"}
    </Text>
  </Pressable>
</SafeAreaView>

完整代码下载

完整代码