tictactoe

在线多人井字游戏

视频演示：

描述：此网络应用程序旨在成为经典 Tic Tac Toe 纸质游戏的在线“纸质”。该应用程序作为允许玩 TTT 游戏的平台，同时还提供基本的聊天功能，以方便玩家交流。

宏观规格：

• 用于玩 TTT 游戏的在线“游戏板”；
  • 玩家必须能够相互沟通；
• Web App必须提供多房间功能。

d-_-b

工具和技术：

基于Socket.IO协议的服务器客户端通信

客户端* ：	服务器端：
HTML、CSS、JS（包括SocketIO框架）	Python 框架：Flask、Flask SocketIO

^* Tic Tac Toe 棋盘的前端元素灵感来自 Web Dev Simplified Tic Tac Toe 项目 - 一侧 2 玩家功能

游戏特定

• 2 名玩家 ( x | o );
• 第 1 步棋的玩家 => 位置标记 ( x | o )：
• 直到（获胜或平局）：玩家 2 位置标记 => 交换回合 => 玩家 1 位置标记；

实现逻辑

---

在在线多人井字游戏中，处理动作、处理玩家的连接、玩家聊天和游戏室管理都是由服务器提供的（在本例中借助 Flask，Flask SocketIO 框架）。根据井字棋规则，一场比赛中只有两名玩家。这意味着服务器必须在连接新玩家之前检查游戏室是否存在以及是否已经有两名玩家。

第 1 步 - 连接

• 两个客户端连接到服务器。
  • 初步检查：房间是否存在、玩家人数；

第 2 步 - 通知玩家

• 客户端接收有关其玩家 ID 的信息，用于映射玩家的图形（例如十字或圆圈）。

第 3 步 - 开始游戏

• 服务器开始比赛，并在玩家同意开始比赛后通知玩家谁将开始比赛。
  • 第三步，两名选手进行对战。首先，玩家将单击一个字段，该信息将发送到服务器。有关所选场地和下一个玩家的信息由房间中的服务器发送给客户端。这将重复进行，直到平局或一名玩家赢得比赛。

app.py

所有乐趣开始的文件...这是 Flask 和 Flask Socket IO 框架的配置。配置完成后，Flask 路由将用@app.route()装饰，Flask SocketIO 处理程序将用@socketio.event装饰。在文件的底部，有socketio.run(app, debug=True)将启动服务器。 “ socketio.run()函数封装了 Web 服务器的启动，并取代了app.run()标准 Flask 开发服务器的启动。” Flask SocketIO

oophelpers.py

有Player()和GameRoom()对象的建模。类在其内部定义行为和所需的属性。

templates/

基本上， templates/index.html只是一个 HTML 页面，描述页面的内容 - 棋盘游戏和日志区域。页面顶部有“问候语视图”作为模式视图，当服务器事件发出房间可用性时，它将更改状态： display: show -> display: none 。

static/styles/

这就是用于描述页面美感的 CSS 文件。

static/scripts/

main.js文件中包含使 Web 应用程序交互成为可能的脚本。该文件以顶部的“ VARIABLE DECLARATIONS ”开头，然后在joinButton的addEventListener匿名函数上通过async和await函数验证roomAvailability() 。一旦确认房间可用，就会调用userConnectedHandlers() 。聊天和游戏功能通过附加到sendButton 、 startGameButton 、 restartButton按钮的 EventListener 提供。

requirements.txt

该文件仅规定了此 Web 应用程序的依赖项包。

重现网络应用程序

运行此应用程序的一种方法：

• 创建Python虚拟环境；

python -m venv [directory]

• 在虚拟环境中安装需求；

pip install -r requirements.txt

• 运行python app.py或flask run并在两个单独的浏览器选项卡中访问http://localhost:5000 。

python app.py

或者

flask run

使用 docker 进行容器化

从 Dockerfile 构建镜像

docker build -t < img_name > .        

docker build -t flask-tictactoe .        

在后台运行容器并将容器的端口发布到主机

docker run -d -p < host_port > : < container_port > < image_name >    

docker run -d -p 80:5000 flask-tictactoe  

使用以下方式在浏览器中访问容器： http://localhost或http://127.0.0.1