AI完全生成の「你画我猜」Webゲーム

Web
AI完全生成の「你画我猜」Webゲーム

AI完全生成の「你画我猜」Webゲーム

本リポジトリは、AIによって完全生成されたWebベースの「你画我猜（You Draw, I Guess）」ゲームの実装です。プレイヤーが絵を描き、他のプレイヤーがそれを当てるというシンプルなゲームを、Javaを用いたWebSocketサーバーとHTML5/CSS3/JavaScriptで構成されたフロントエンドで実現。AI生成によるREADMEやコードを特徴とし、リアルタイム通信とキャンバス描画を駆使したインタラクティブな体験を提供します。

https://github.com/llll415/You-Draw-I-Guess

概要

「你画我猜（You Draw, I Guess）」は、絵を描いて相手に当ててもらうというシンプルかつ人気のゲームをWeb上で楽しめるようにしたプロジェクトです。本リポジトリは、このゲームを完全にAIによって生成されたコードやドキュメントで構成しており、技術スタックはフロントエンドにHTML5、CSS3、JavaScript（ES6+）、バックエンドにJavaとWebSocket技術を採用しています。リアルタイムな描画共有や文字入力による推測機能をWebSocketで実装し、ユーザー同士のインタラクションをスムーズに実現しています。AI生成のREADMEやコードは今後の自動生成プロジェクトの可能性も示唆しています。

GitHub

リポジトリの統計情報

  • スター数: 1
  • フォーク数: 0
  • ウォッチャー数: 1
  • コミット数: 7
  • ファイル数: 6
  • メインの言語: Java

主な特徴

  • AIによって生成されたREADMEやコードにより構築されたWebゲーム
  • Javaベースの軽量WebSocketサーバーでリアルタイム通信を実現
  • HTML5 Canvasを用いた直感的な描画インターフェース
  • CSS3のFlexboxやアニメーションでレスポンシブかつ美しいUIを実装

技術的なポイント

本プロジェクトは、フロントエンドとバックエンドをシームレスに連携させるため、WebSocket通信を中核技術として活用しています。フロントエンドはHTML5のCanvasを使用し、ユーザーが描いた線や図形をリアルタイムにサーバーへ送信。サーバーはJava言語とJava-WebSocketライブラリで構築されており、複数のクライアント接続を管理しながら、描画データや推測メッセージを全ユーザーにブロードキャストします。これにより、描画と推測がリアルタイムに反映される対話型ゲーム体験を実現しています。

CSS3ではFlexboxを用いたレイアウト設計やアニメーションを駆使し、シンプルながら洗練されたユーザーインターフェースを提供。JavaScript (ES6+)はDOM操作、イベントハンドリング、WebSocketの制御、Canvasへの描画ロジックを担い、ユーザーの入力を効率的に処理しています。特に、描画中のマウスイベントを捕捉し、線の座標データをパケット化してサーバーに送信する仕組みや、サーバーから受け取った描画データをもとにCanvasを更新するロジックが注目されます。

また、本プロジェクトの特徴の一つに「AIによるREADMEやコードの生成」があります。README内でも「该readme主要也是由Gemini生成」と記されているように、AIツールを活用してドキュメントやコードの雛形を作成しており、今後の開発効率化や自動生成技術の応用例として興味深い取り組みです。全体的に、モダンなWeb技術とAI生成技術を融合させた先進的なWebゲーム開発のサンプルとして評価できます。

プロジェクトの構成

主要なファイルとディレクトリ：

  • LICENSE: ライセンス情報
  • README-EN.MD: 英語版README
  • README.MD: 中国語（簡体字）版README（AI生成）
  • img: プロジェクトのスクリーンショット画像を格納
  • pom.xml: Javaプロジェクトのビルド設定（Maven）
  • 他1ファイル: Javaソースコードやフロントエンドコードが含まれる

バックエンドはJavaのMavenプロジェクトとして構成されており、WebSocketサーバーの実装が中心。フロントエンドは静的ファイル群としてHTML/CSS/JSで構成され、imgディレクトリ内のスクリーンショットはゲーム画面のイメージを提供しています。

まとめ

AI生成技術とWebSocketによるリアルタイム連携が融合した革新的Webゲーム。

リポジトリ情報：