用React设计和实现实时数据库的井字游戏

部署在Netlify上

在这篇文章中，我们将了解如何设计一个井字游戏，将其与实时数据库绑定，实现逻辑并部署它，最后与你的朋友一起玩。

前提条件

Javascript（因为这是一个网络应用）。
React (主要是功能组件)
ReduxToolkit (状态管理)
Firebase (作为我们的数据库)
Material UI (渲染组件)
Git (版本控制系统)

了解设计

在设计井字游戏时，有几件事需要注意。

这是一个2个玩家的游戏，所以游戏不会面临并发的请求。它基本上是互斥的。
结果只能在玩家玩完一回合后出现，即Player A ，不能在Player B 的时候赢。
实际上只有4种方式可以获胜。横向、纵向、左对角线、右对角线

数据库模式

{ player1: String, player2: String, board: String[N][N], turn: String, gameOver: Boolean, chancesLeft: Integer == N}

有两种情况下我们说游戏结束了。

其中一个玩家已经赢了。
剩下的机会数为零。(平局)

如果玩家满足了以下任何一个条件，他就应该赢得游戏。

水平方向

 let count = 0 for(let i = 0; i< size; i++){ if(arr[i][col] === symbol) count++; }

垂直方向

count = 0 for(let i = 0; i < size; i++){ if(arr[row][i] === symbol) count++; }  if(count === size) return true;

左对角线

let count = 0 for(let i = 0; i < size; i++){ if(arr[i][i] === symbol) count++; }

右对角线

count = 0; for(let i = 0; i< size; i++){ if(arr[i][size -i — 1] === symbol) count++; }

配置数据库

const firebaseConfig = { apiKey: process.env.REACT_APP_API_KEY, authDomain: process.env.REACT_APP_AUTH_DOMAIN, projectId: process.env.REACT_APP_PROJECT_ID, storageBucket: process.env.REACT_APP_STORAGE_BUCKET, messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID, appId: process.env.REACT_APP_APP_ID, measurementId: process.env.REACT_APP_MEASUREMENT_ID };

现在你可以用这个 **db**实例来调用你的Firestore。

注意：还在为如何在你的项目中添加firebase而烦恼吗？请按照这里)的步骤操作

创建房间

创建房间是游戏中最重要的环节之一。房间代码需要对每一对玩家都是唯一的。这个房间代码的另一个方面是这个房间代码也要作为你在Firebase集合里面的document ，其他订阅用户会听的。

其步骤是。

1.通过选择一个随机数字来创建一个5位数的唯一密钥

const getRandom = () => Math.floor(Math.random()*90000) + 10000;

2.2.通过打勾来防止碰撞的发生。

如何使其成为实时的？

Firestore SDK提供了一个名为onSnapshot 的API来监听实时更新。关于它的更多信息，请看这里。

onSnapshot(docRef, (doc) => { // doc.data() will give you latest changes in the db  Your code goes here…. });

那么接下来是什么呢？

基本上就是这样了。这些是整个项目中最困难的部分。
也许现在是时候让你开始编码并做必要的修改了。

想要一个现场演示吗？

是的，当然!我已经在netlify上部署了这个游戏。

还是卡住了？需要参考资料来构建你自己的游戏吗？

这里有一个链接到我的repo。我已经把它公开了。欢迎所有的评论。