【個人開発mini】Vimに憧れたプログラミング学習者が迷路ゲームを開発してみた

はじめに

はじめまして。
2024年3月よりプログラミングスクールRUNTEQに入学した、わーちゃんと申します。
スクールを2024年12月に卒業した今、個人開発したミニサービスの中で一つ記事にまとめていなかったものがありましたので、当時の事を振り返るいい機会として、まとめてみたいと思います。

▶サービスURL：Vim maze game

▶Github：リポジトリ

⌨️サービス概要と開発した理由🎮

概要

• Vimのh,j,k,lの操作を使いこなすためだけのミニゲーム
• 一部レベル開発中です！

開発理由

• スクールのイベントでVimというものを知る
• かなり訓練？すれば、マウス操作なしでコーディングできるようになる➡単純にかっこいい。素敵。と思う
• 卒業生の中でVim操作を利用した迷路サービスの存在を知る
• どうやって動いているのか気になる。私も作成してみたいと思う
• ゲームアプリを作ってみたいと思っていた

このような経緯から今回のサービスを開発するに至りました。

⌨️機能一覧🎮

1. 迷路の描画
   • mazeData 配列をもとに、Reactコンポーネントを使って迷路を表示
   • Cell コンポーネントで各マスの種類（壁、通路、スタート、ゴールなど）を判定
2. プレイヤーの移動
   • useState で playerPos（プレイヤーの位置）を管理
   • キーボードの h, j, k, l を押すと、プレイヤーが移動
3. 視界制限
   • プレイヤーの周囲1マスのみが見える
4. 障害物の判定
   • 1（壁）と2（木）は通過できない
5. ゴール判定
   • G に到達するとメッセージを表示

⌨️使用技術🎮

カテゴリ	技術	説明
開発環境	Glitch	Webアプリを開発・ホスティングできるオンラインプラットフォーム
コード管理	GitHub	ソースコードのバージョン管理に使用
フロントエンド	HTML	ベースのページ構造（index.html など）
	CSS	Webページのデザインを担当
	JSON	データ管理や設定情報の保存
	React	フロントエンドのライブラリ（コンポーネントベース）
	JSX	Reactで使われるHTMLのような構文
インフラ	Glitch Hosting	Glitch上でアプリをホスト

⌨️頑張った点、こだわった点🎮

• 迷路がプレイヤー周りの一部だけにしかわからないようにした
• ゴール到達時にメッセージの表示
• 次のステージに進む為にはゴールしないといけない
• 矢印ではなく、指定したキーで移動を可能に

⌨️最後に🎮

Reactを使用してミニサービスを作ってみました。
JavascriptとHTMLのファイルを一緒になって記述できるのはすごいな、と思いました。JSXの特徴。
下記リンク👇Reactの記事こんなにあるとは知らなかったので、興味あるものはみて、何かに取り入れてみようかと思います！
（Vimは難しいな・）