Wind Glide

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

GitHub

TypeScript

React

CSS

C

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

無音

とばくろ

きちこ。

りりち:3

推しアイデア

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

作った背景

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

推し技術

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

プロジェクト詳細

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

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

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

Wind Glideの設計 README

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

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

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

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

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

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

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

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

3.3 小規模ゲームに不要な「銀行レベルの検証パイプラインと監査基盤」 「ただ変なものを作った」では終わらせません。この独自コンパイラが生成した成果物を安全に運用するため、エンタープライズ級の過剰な自動検証・監査基盤を構築しています。

  • ガチすぎる静的解析と安全性検証: 独自の検査機構を構築し、生成された低レイヤーの処理に「危険なメモリ操作」や「不正なスクリプト」が混入していないか、さらにデザイン側からも「外部からの悪意ある読み込み」が含まれていないかを自動検出します。
  • UIとゲーム領域の「完全隔離」証明: 画面の枠組みを作るUI領域と、物理演算を行うゲーム領域が互いに干渉してシステムを破壊しないよう、状態の整合性や描画領域への越境アクセスがないかをビルド段階で徹底的に検証します。
  • 審査通過時のみ稼働する統合ビルド: ワンアクションでソースコードの変換から上記の厳格な安全性・干渉チェックが走り、すべての審査をパスした「安全が証明されたファイル」のみが公開環境へ連携される自動パイプラインを構築しています。
  • 完全連動の監査ログと監視ダッシュボード: 稼働後の画面の状態遷移やデザイン適用の成功・失敗履歴すらもすべてデータベース上の専用テーブルに保存し、管理者画面から時系列で監視できる仕組みを備えています。

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

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

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

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

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

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

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

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

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


チーム

とばくろ

  • ログイン認証(supabase Auth Google認証)
  • スワイプで発生する風の物理演算
  • チュートリアルステージの作成, ステージの保存機能

りりち

  • ダッシュボードUIを刷新し、ステージの検索・並べ替え・編集・テストプレイをカード形式で1画面に統合

きちこ。

  • ホームページ・ステージ作成ページのUI
  • トップ導線と公開ステージ一覧の実装
  • API連携時の状態表示の整備

無音

  • 上記以外すべて
  • CCSS実装

無音

@muon