懐かしのRPGをJavaScriptで手軽に作れる！ ゲーム好きの心をつかむ「ハックフォープレイ」

「ハックフォープレイ」

　プログラミングに興味を持つお子さんの多くは、ゲームをプレイするのも大好きです。今回紹介する「ハックフォープレイ」は、ある程度のテンプレートをもとに自分オリジナルのゲームステージを制作できるプログラミングツールです。

　子ども向けツールはビジュアルプログラミング型が多い中、テキストコードを扱うのが特徴で、JavaScriptのコードを操作します。なつかしのRPG風のゲームを作ることができ、ゲーム好きの心をつかみそうです。

ゲームの世界でプレイしながら基本を学べる

　「ハックフォープレイ」は、Webブラウザー上で動作するプログラミングツールです。アカウントを作成しなくても利用できますが、自分が作ったステージを保存したり、自分のステージを公開したい場合はアカウントを登録し、ログインして使いましょう。

　アクセスした画面で「はじめてプレイする方はこちら」のエリアにある［ゲームスタート］ボタンから、使い方の説明が始まります。説明といってもゲームの世界でプレイしながらコンセプトを教えてもらえるような感覚です。

使い方説明のゲームがスタートしたところ。懐かしのRPG風

コードを開いて体力の設定数値を変える練習。座標でキャラクターを移動させる練習もある

　説明に使われたのと同様のゲームの世界を、自分なりの設定で作り上げていきます。

解説とマニュアルはすべて動画！

　自分でオリジナルのゲームを作るための操作やコードの説明などは、授業動画が豊富に用意されています。これが動画世代の子ども達にはむしろ便利で馴染みのあるやり方なのでしょう。YouTuber風の動画で小学生は喜びそうです。

授業動画が並ぶ

　動画は最初のいくつかが無料ですが、他は有料プラン（980円/月）に加入すると見ることができます。

　プログラム作成画面は、左側に作成したゲーム、右側にコードが表示されます。背景を変えたり、ゲームの登場キャラクターや登場するものを追加することから始めます。

プログラム作成画面。コードはテキストで記述されているが、クリック操作でコードの追加等ができる

GUIで簡単に入力できるJavaScriptでゲームを自分好みに設計する

　背景を変更し、いくつかの要素を追加してみます。

無害なキャラクター「うま」を追加しているところ

　「茶色のうま」、「りんご」、「木のかいだん」を追加してみました。「木のかいだん」は、別のマップへのワープになり、マップも同時に追加されました。

一覧からキャラクターなどを選ぶだけで、コードが追加される。位置は座標で指定

　さらに、敵「赤色のオニ」と、ゴールになる「プリンス」を追加しました。

キャラクターを追加した。コードは自動で入力されるが、直接手で修正を加えることもできる

　ついでに、自分のキャラクターと、敵のキャラクター（赤色のオニ）のコードを開いて、自分は強く、敵は弱くなるように設定してしまいました。こんな風にちょっとずるい設定も自在にできます。

それぞれのコードで体力、攻撃力などの数値を変更したところ。左側が自分のキャラクター、右側が「赤い色のオニ」のコード

　これでプレイしてみましょう。赤いオニを簡単に倒して、階段で次のマップに進み、すぐにプリンセスを救えるというとってもEASYモードなゲームができました。

ゲームのプレイ画面。左側がマップ1で、右側が階段で移動した先のマップ2

　もっとさまざまなキャラクターや造形を使いプログラムを工夫すれば、複雑でプレイしがいのあるゲームを作ることができます。［みんなのステージ］メニューには、工夫を凝らして作られたゲーム作品が公開されていて、コードを見ることもできます。

手軽な操作でテキストコードに目を慣らす効果が期待できる

　テキストコードは扱いますが、イチからゲームの仕組みを作り上げるわけではないので、キャラクターの性質や関係性を考えながら、部分ごとに理解していくことができるでしょう。手軽な操作で、コードに目を慣らす効果がありそうです。

　開発者の寺本大輝氏は、若くして起業系のコンテストに賞を受けるなどしてハックフォープレイ株式会社を設立し、2015年にはIPAの未踏事業で個人としてスーパークリエータ認定を受けて支援を得るなどしています。プログラミングの技術でこうして道を切りひらく力は、子どもたちにとってひとつのロールモデルとなるのではないでしょうか。