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