Wind Glide

https://github.com/otonasi-muonn/megalo2026

GitHub

TypeScript

React

CSS

C

風で運ぶ!CCSS出力も可能なステージ共有型2Dアクション

無音

とばくろ

kitiko

りりち:3

推しアイデア

①風を起こしてキャラを運ぶ物理演算アクション! ②自作ステージを動的OGP画像付きでSNSに共有し、誰でもすぐ遊べる! ③さらに「Reactの画面と全く同じもの」をC言語とCSS(CCSS)だけで出力・操作できる変態的モードを搭載!遊びと無駄技術を両立しました。

作った背景

テーマ「ウィンド」からスワイプで風を起こすゲームを考案。 さらにハッカソンならではの「技術の無駄遣い」を極めるべく、モダンなReactアプリをあえて『C言語+CSS(CCSS)』に変換して出力するという、技術的挑戦をプロダクトにねじ込みたかったためです

推し技術

Reactコードを「C/CSS/Manifest」へ変換する【独自コンパイラ】の実装です! 危険APIの排除機構や、状態遷移をSupabaseへ保存するエンタープライズ級の監査ログシステムを搭載。

プロジェクト詳細

【タイトル案】 風で運ぶ!独自コンパイラ搭載のステージ共有型2Dアクション『Wind Glide』

【一言コンセプト】 「風を操る直感アクション × 狂気のオーバーテクノロジー」

1. 導入:表の顔は「王道アクション&プラットフォーム」

テーマ「ウィンド」の体現 画面をスワイプして風を起こし、その風に乗せてキャラクターをゴールまで導く、直感的な物理演算アクションゲームです。

遊びの拡張性 単にプレイするだけでなく、ユーザー自身でステージを作成し、世界中のプレイヤーと共有できるプラットフォームとして設計しました。

「一見すると、かわいらしい王道の2Dゲームに見えるかもしれません。……しかし、その裏側では『ハッカソンならではの異常なこだわり』が稼働しています」

2. デモプレイ(遊ぶ・創る・雑多)

  • [URL] (遊ぶ:プレイ画面デモ)
  • [URL] (創る:ステージ作成デモ)
  • [URL] (雑多:その他の機能)

3. 裏側の技術・アーキテクチャ

このプロジェクトの真の主役は、ゲームを支える「圧倒的な無駄技術」です。

3.1 ベースは超王道!堅牢なモダンアーキテクチャ フロントエンドと、エッジ環境で動作するバックエンドを完全に分離。両者間で安全にデータ構造のルールを共有できる統合的な開発手法(モノレポ構成)を採用しています。また、認証やデータベース基盤にはクラウド型のバックエンドサービスをフル活用し、高速かつ堅牢なシステムを構築しました。

3.2 【圧倒的無駄技術】独自開発「CCSSトランスパイラ」 ここからが本プロジェクト最大の「技術の無駄遣い」です。 今回のハッカソンのためだけに、モダンなUI部品を「C言語」「CSS」「マニフェストファイル」の3要素に変換して出力する独自のコンパイラを、概念実証(PoC)としてゼロから実装しました。あえてC言語とCSSの組み合わせだけで強引に画面を描画・操作するという、変態的な変換システムが裏側で動いています。

3.3 小規模ゲームに不要な「銀行レベルのセキュリティと監査基盤」 「ただ変なものを作った」では終わらせません。この独自コンパイラに対して、エンタープライズ級の過剰なセキュリティを実装しました。

  • ガチすぎる静的解析: 生成されたC言語コードに対し、メモリ操作などの危険なシステム呼び出しや、不正なスクリプトの混入を自動検出。CSS側からも危険な記述を徹底排除します。
  • 完全連動の監査ログシステム: 画面の状態遷移やデザイン適用の成功・失敗履歴を、すべてデータベース上の監査テーブルに保存します。
  • 監査ダッシュボード: 管理者画面からは、ユーザー操作から画面反映までの時系列データを監視可能です。

たかが2Dゲームに到底不要な、「ガチガチな堅牢性」を無駄に実現しています。

4. 開発の小話・マネジメント

4.1 「コンパイラ1日実装」の種明かし 通常、独自の言語変換器をハッカソンの実質1日で自作するのは不可能です。これは、過去に開発した「コード構造の解析ノウハウ」と、ポートフォリオ用に研究していた「C言語製UIの自動生成基盤」のアイデアを融合させたキメラ・アーキテクチャだからこそ実現できました。ゲーム本編を破壊しないよう、変換器は独立したツールとして完全に切り離して設計しています。

4.2 爆速・非同期開発を可能にした環境構築 短期間で「ゲームの完成度」と「技術の無駄遣い」を両立させるため、極めて効率的な開発フローを確立しました。ダミーデータを用いた先行開発や、ローカル環境でのデータベースエミュレータの即時起動により、フロントエンドとバックエンドが完全に非同期で並行開発できる体制を構築しています。

4.3 徹底したIssue駆動開発 タスク管理にも妥協はありません。すべての課題管理において「背景と目的」「完了の定義」「タスク一覧」「備考」の統一フォーマットを徹底し、実装の迷いを排除しました。

5. 開発を支えた自作ツール(おまけ)

今回の複雑なコード解析や独自コンパイラの実装には、自作のVSCode拡張機能『Code Grimoire(コード・グリモワール)』をフル活用しています。

🔮 Code Grimoireとは? プログラムの構造を解析し、コードの依存関係を「魔方陣」として可視化するツールです。今回の開発でも、プロジェクト内の脆弱性リスクの特定(防衛のルーンモード)や、複雑な関係性の整理に大活躍しました。

現在、VSCode Marketplaceで配信中です。審査員の皆様も、ぜひご自身のコードを魔方陣に変換してみてください! 👉 Code Grimoire - Visual Studio Marketplace

無音

@muon