ショートカットキーダンジョン

製品概要

デモ動画

限定公開でデモ動画となっています →こちら

背景(製品開発のきっかけ、課題等）

近年のGIGAスクール構想などの教育現場の情報化により，小中学校へのパソコン普及率は飛躍的に上がりました． しかし，一般のご家庭で普段からパソコンを触っている割合は低く，基本的な操作につまずきやすいのが現状です． 実際、基本的な操作であるショートカットキーは業務や作業でしか使うことしかなくつまらなくて覚えるのもめんどくさい というのが子供の視点です。 そこで私たちは「どうやったらパソコンを触る時間を増やせるのか」「どうすれば楽しくなるか」という点で考えたとき、 ショートカットキーを活用したパズルゲームというものを考案しました。 実際の前例として寿司打というタイピング×ゲームの成功例があるためある程度は効果が期待できるものとなっています。

参考文献:文部科学省　GIGAスクール構想

参考文献:一般のご家庭のパソコン普及率

---

製品説明（具体的な製品の説明）

webアプリケーションゲームであり，パソコンで頻繁に使用するショートカットキーを勉強するのがテーマです． ゲームの内容は，キーボードとマウスを操作してパズルステージをショートカットキーを使いながらキャラクターを操作して脱出を目指すものとなってます． また、実際の教育現場に導入をしやすいようにgoogleアカウントでログインしてホスト(先生)がルームを作成して授業で使うことも可能です。 今回scrachといったゲーム作成フレームワークをあえて使わなかったのも、教育現場などで使うとするとセキュリティにも気を付ける必要があるので、一から作成しました。

基本的な操作

プレイヤーの移動：

w a s d　または　←　↑　→　↓　の4方向移動

使用するショートカットキー：

• ctrl c　木箱などのオブジェクトをコピー
• ctrl v　コピーしたオブジェクトをペースト
• ctrl a　画面内にあるオブジェクト全てを選択
• ctrl z　ひとつ前に戻す．このときオブジェクトキャラクターの位置，スキルポイントまですべてが戻る
• ctrl y　ひとつ前に進める．このときオブジェクトキャラクターの位置，スキルポイントまですべてが進める

ギミック

• 木箱
  オブジェクトの道をふさぐもの．ショートカットキーで操作ができる．水たまりのマスに置くことでその上を通過できるようになる

---

• 色付き木箱　
  基本的に木箱と同じ特性を持つが，唯一水たまりのマスに置くことができない

---

• 色付きスイッチ
  スイッチの色に対応した木箱を設置することで開閉する壁が開く

---

• 色付き開閉する壁
  色付きスイッチによって開く壁．色付きスイッチと同じ色の壁が対応

---

• 水たまり
  通常では通れないが，木箱を置くことで通れるようになる
  色付き木箱は置けないマス

---

• レーザー
  触れたらゲームオーバーになる．木箱を置いて防ぐことも可能

---

• スキルポーション
  ペーストや全選択の使用回数を1増やすためのアイテム

---

特長

1. 特長1

教育現場にすぐ使えるシステム設計．教師側の画面からステージを選択したり生徒の進み具合を監視したり，して生徒の進み具合に合わせた対応が可能

2. 特長2

小中学生が楽しく理解できる． 普段からよく使うショートカットキーのみを実装し，パズルの難易度も簡単なものから難しいものまで幅広く作りました．

3. 特長3

プレイするだけではなくステージを作ることも可能． このリポジトリをインストールして，stage-editorからnpm run devでローカルサーバーを起動．

---

解決出来ること

1. 解決

キーボード操作に慣れていない小中学生が，プライベートでゲーム感覚で楽しく，ショートカットキーを覚えられるようになること．

2. 解決

小中学校のパソコンを触る授業内で，生徒に操作を上手く教えることができず困っている先生が，意図した現在の生徒に適切なステージを管理画面で操作することで快適に授業することができる．

注力したこと（こだわり等）

• ログインを可能にしたことにより，生徒一人一人の進捗具合を確認できることと同時に，クリアデータを保存することを設計したこと．

---

開発技術

活用した技術

API・データ

• supabase

フレームワーク・ライブラリ・モジュール

デバイス

独自技術

ハッカソンで開発した独自機能・技術

• 独自で開発したものの内容をこちらに記載してください
• 特に力を入れた部分をファイルリンク、またはcommit_idを記載してください。