🔎 Code Clashのご紹介

Code Clashは、ありきたりなアルゴリズム対戦プラットフォームではありません。アイテムを使用して相手を妨害するアーケードゲームの要素と、アルゴリズム対戦を融合させた新しい形のリアルタイム対戦ゲームです。 ユーザーはルームを作成して他のプレイヤーと参加し、リアルタイムでアーケードスタイルのプログラミング対戦（PS）を楽しむことができます。

勝率や正答率といった指標を通じて健全な競争を促しつつ、少し堅苦しくなりがちなプログラミング対戦に「アイテム」という遊び心を加えることで、より親しみやすく、誰もが楽しめるサービスを目指しました。

▼ Code Clashを体験する
https://codeclash.duckdns.org
(現在、対戦でご利用いただける言語はJavaScriptのみとなっております。)

(現在はNCPの無償トークン期限終了に伴い、サーバーは停止しています。)

👨‍👩‍👧‍👦 チームメンバー

J091_イグンソン	J096_イドンハ	J152_ジヒョンベ	J167_ヒョンチャヌ
@Geun Seong Lee	@kushinada	@ruok	@ChanWoo Hyun

🚀 担当した役割と貢献

1. サーバーアーキテクチャの設計とリアルタイム通信環境の構築

   Nginxをリバースプロキシとして導入し、静的・動的リクエストを分離することでAPIサーバーの負荷分散を行いました。また、Polling方式に比べてサーバーリソースとパフォーマンスに利点があるWebSocket技術を採用し、遅延のないリアルタイムなチャット及びゲーム環境の構築に成功しました。

   • (詳細な技術解説: NginxでのHTTPS設定 / WebSocketの選定理由)

2. 主体的な役割再分配によるチーム開発の生産性向上

   ペアプログラミングの過程で生じた開発スタイルの違いやコミュニケーションの非効率を解決するため、私がWebSocket機能実装のオーナーシップを持つことを提案し、役割を再分配しました。これにより、チームメンバーの業務集中度を高め、コードの一貫性を確保することで、チーム全体の開発生産性を大きく向上させた経験があります。

   • (課題解決のプロセス: チーム開発プロセスの改善)

3. FE/BE通信構造のリファクタリングによる保守性の向上

   FEのコード重複問題を解決するため、自らFEコードを分析し、データ転送ロジックを分離する新たなイベント構造(room_info)を設計・実装しました。このリファクタリングを通じて、FE/BE間の結合度を下げ、システム全体の拡張性と保守性を大きく向上させました。

   • (技術的な詳細解説: FEとBEの結合度を下げ、保守性を向上させたWebSocketイベント設計)

🎬 主な機能

ログインとロビー接続

ルームへの入場

チャット

ゲーム開始

コード作成

コードの提出と実行

ゲーム終了と結果表示

⚙️ 技術スタック

FE (フロントエンド)

BE (バックエンド)

⚒️ アーキテクチャ