Socket.IO プロトコルに基づくサーバー クライアント通信
| クライアント側* : | サーバー側: |
|---|---|
| HTML、CSS、JS (SocketIO フレームワークを含む) | Python フレームワーク: Flask、Flask SocketIO |
* Web 開発からインスピレーションを得た Tic Tac Toe ボードのフロントエンド要素 簡略化された Tic Tac Toe プロジェクト - 片面 2 プレーヤー機能
オンライン マルチプレイヤー三目並べゲームでは、動きの処理、プレイヤーの接続の処理、プレイヤーのチャット、ゲーム ルームの管理がサーバーによって提供されます (この場合は Flask、Flask SocketIO フレームワークの助けを借りて)。三目並べのルールに従って、1 つのゲームには 2 人のプレーヤーだけが参加します。これは、サーバーが新しいゲーム ルームに接続する前に、ゲーム ルームの存在と、すでに 2 人のプレイヤーがいるかどうかを確認する必要があることを意味します。
ステップ 1 - 接続
ステップ 2 - プレイヤーに通知されます
ステップ 3 - ゲームを開始する
app.py
すべての楽しみが始まるファイル...Flask および Flask Socket IO フレームワークの構成は次のとおりです。構成が完了すると、Flask ルートは@app.route()で修飾され、Flask SocketIO ハンドラーは@socketio.eventで修飾されます。ファイルの最後には、サーバーを起動するsocketio.run(app, debug=True)があります。 「 socketio.run()関数は Web サーバーの起動をカプセル化し、標準の Flask 開発サーバー起動app.run()を置き換えます。」フラスコソケットIO
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 アプリの依存関係パッケージを規定するだけです。
このアプリケーションを実行する 1 つの方法:
python -m venv [directory]pip install -r requirements.txtpython app.pyまたはflask runを実行し、2 つの別々のブラウザー タブでhttp://localhost:5000にアクセスします。 python app.pyまたは
flask runDockerfile からイメージを構築する
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を使用してブラウザでコンテナにアクセスします。
