コマンドラインが怖い人のために、AIと一緒にRPGを作ってみた【AI QUEST】
この記事でわかること
- AI QUESTとは
- 学べるコマンド5つ
- 技術的な話
- 作ってみた感想
- 関連記事
「ターミナルって、なんか怖い」
そう思っている人は、きっと多い。黒い画面、英字の羅列、エラーメッセージ。初心者が最初につまずく壁のひとつだと思う。
そこで Claude と一緒に、コマンドラインをRPG形式で学べるブラウザゲーム「AI QUEST」を作ってみた。
AI QUESTとは
HTML・CSS・JavaScriptだけで動く、ブラウザ完結型のビジュアルノベルRPG。
主人公が「謎のAI」に導かれながら、実際のLinuxコマンドを入力してクエストをクリアしていく。インストール不要で、スマホでも動く。
物語のテーマは「小さな成功で自分を取り戻す」。
コマンドが一つ増えるたびに「自己信頼ゲージ」が上がっていく仕組みになっていて、ゲームをクリアする頃には5つの基本コマンドが自然に身についている。
学べるコマンド5つ
| Chapter | コマンド | 意味 |
|---|---|---|
| Chapter 1 | pwd |
今いる場所を確認する |
| Chapter 2 | ls |
ファイルを一覧表示する |
| Chapter 3 | cd documents |
別のフォルダに移動する |
| Chapter 4 | mkdir quest |
フォルダを作る |
| Chapter 5 | touch hero.txt |
ファイルを作る |
どれも3〜5文字の短いコマンドだけど、ターミナルを使うときの「基礎の基礎」になるもの。これを覚えるだけでも、黒い画面への恐怖がだいぶ薄れると思う。
技術的な話
実は特殊なライブラリやフレームワークはゼロ。
index.html 1ファイルの中に
├── HTML ── 画面の骨格
├── CSS ── 演出・アニメーション
└── JavaScript ── ゲームロジック・BGM
BGMや効果音も、音声ファイルなしでWeb Audio APIで数式から生成している。ターミナル風のスキャンラインやASCIIアートのグラフィックも、すべてCSSとテキストだけ。
「Webブラウザがあれば何でも作れる」をあらためて実感した。
作ってみた感想
Claude に「こういうゲームが作りたい」と話しながら、ストーリーもコードも一緒に考えていった。
最初はPrologueとChapter 1だけの短いデモだったけど、「続きが欲しい」「グラフィックも入れたい」と話すうちにどんどん育っていった。AIと一緒にものを作るのって、こういう感じなんだな、と思った。
コマンドラインを怖いと思っている人に、まず触れてみるきっかけになればいいなと思っている。
関連記事
TAG
