JavaScriptでRPGを作ろう！スマホにも対応したゲームの作り方

みなさんこんにちは。今日も楽しくプログラミングを学んでいきましょう！

これまでの講座《こうざ》で、JavaScript《ジャバスクリプト》によるゲーム開発《かいはつ》の方法が、なんとなくでも分かっていただけたかな、と思います。
今回からは、これまでの復習《ふくしゅう》もかねて、本格的《ほんかくてき》にRPGをフルスクラッチで作っていこうと思います。

ちなみにフルスクラッチは、ライブラリなどを使わずに一から自分で作る、という意味です。

今回から作るゲームについて

まずは、今回から作っていくゲームを見てみましょう。
このようなゲームを作ります。

（パソコンで遊ぶときは、ゲーム画面をクリックしてから、なにかキーを押してね！）

※音が出ますので、ご注意ください。

パソコンの場合は、ゲーム画面をクリックしてから、なにかキーを押してください。
スマホの場合は、ゲーム画面をタップして、ゲームをはじめてください。

タイトル画面では、スペースキー、もしくはタップで、次に進めます。

ゲーム内では、方向キー、もしくはゲーム左下の方向パッドで、山田先生を操作《そうさ》できます。（方向パッドはスマホのみで対応。パソコンのマウスでは操作できません）

ゲーム内容：
山田先生、りこちゃん、アルくんが、迷宮《めいきゅう》に閉じ込められてしまいました。
前後左右、どこを見ても壁ばかり。でもきっとどこかに出口があるはず……

みんなでゴールを目指そう！

このゲームについて：
このゲームは、JavaScriptで作ったものです。
今回は、タイルマップの作り方、キャラの移動と当たり判定、シーンの変更、音声の鳴らし方、など、RPGを作成するうえで、基本なのにむずかしい、という部分にしぼっています。
戦闘、レベルアップ、アイテム、といったものは、今回は省略《しょうりゃく》していますが、そういったものも作ると、もっとRPGらしくなると思います。

使用する素材《そざい》について

素材《そざい》はこちらを使います。
まとめてダウンロードするには、こちらをクリックしてください。

素材《そざい》の利用《りよう》について

ここで公開している素材は、ここに書かれた範囲内《はんいない》であれば、だれでも自由に使うことができます。

まず、そのままの素材や、ちょっとだけ加工《かこう》したものを「ぼくが作った！」っていうふうに言ったり、再配布《さいはいふ》するのはダメです。もちろん「私が作りましたよ」でもダメです。
ちょっとだけ加工……というのは、たとえば、曲にエコーをかけて、「これぼくが作曲した！」というのはダメです。
BGMに合わせてラップを歌って、「これオレの曲。かっこいいだろ」は、かまいません。

山田先生、りこちゃん、アルくんは、このサイトのオリジナルキャラクターとなります。ですが、画像素材はキャラの変更《へんこう》をしない限《かぎ》り、自由に使ったり、公開したりできます。
キャラの変更……というのは、名前を変えたり、べつの作品のキャラクターにしたりすることです。たとえば、山田先生の画像を白黒反転《はんてん》させて、「白猫プロジェクトのキャトラです」はダメです。もちろん「黒猫のウィズです」もダメです。

白猫や黒猫とは関係なく、曖昧《あいまい》という意味でのグレーな部分は、とりあえずOKにします。たとえば、山田先生の耳を消して「耳をかじられてから、ネズミが怖くなってしまったべ……」は、かまいません。

この素材を使って作ったものを公開するとき、著作権表示《ちょさくけんひょうじ》などは、してもしなくてもOKです。報告《ほうこく》も、してもしなくてもOKです。

※素材の利用については、今後変更される場合があります。

フォルダ構成《こうせい》について

まず、フォルダ構成《こうせい》を見ていきましょう。
フォルダ構成とは、つくりたいものがあるフォルダのなかにどのようなフォルダやファイルがあるのか、という意味です。

今回はrpgというフォルダを作って、そのなかにいろんなフォルダやファイルを作っていきます。
ゲームが完成したとき、フォルダ構成はこのようになります。

rpg/
|-- img/
│   |-- aru.png
│   |-- dpad.png
│   |-- goal.png
│   |-- rico.png
│   |-- start.png
│   |-- tile.png
│   `-- yamada.png
|-- index.html
|-- js/ 
│   |-- engine/
│   │   |-- charactertile.js
│   │   |-- dpad.js
│   │   |-- game.js
│   │   |-- party.js
│   │   |-- scene.js
│   │   |-- sound.js
│   │   |-- sprite.js
│   │   |-- text.js
│   │   |-- tile.js
│   │   `-- tilemap.js
│   |-- main.js
│   `-- map.js
`-- sound/
    |-- bgm.mp3
    |-- clear.mp3
    `-- start.mp3

とてもたくさんのフォルダやファイルがあって、すごく分かりにくいですよね……
大丈夫です。これから順番に作っていくので、まずは以下のこれだけ用意しておいてください。

rpg/
|-- img/
│   |-- aru.png
│   |-- dpad.png
│   |-- goal.png
│   |-- rico.png
│   |-- start.png
│   |-- tile.png
│   `-- yamada.png
|-- index.html
`-- sound/
    |-- bgm.mp3
    |-- clear.mp3
    `-- start.mp3

index.htmlファイルを作ろう！

では、index.htmlファイルを作成しましょう。

ブラウザゲームを作るには、そのゲームを動《うご》かすためのサイトが必要《ひつよう》になります。
index.htmlは、サイトを開いたとき、他のファイルが指定《してい》されていないときに開かれるファイルで、つまりトップページということになります。

では、index.htmlファイルを作っていきましょう。
これはrpgフォルダのなかに作ります。

index.htmlは、次のようにします。

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>くろねこラビリンス</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}
		canvas {
			display: block;
		}
	</style>
</head>
<body>

</body>
</html>

JavaScriptのファイルを、index.htmlから読み込もう！

つづいて、index.htmlから、JavaScriptファイルを読み込んでいきましょう。

rpg/
|-- img （省略）/
|-- index.html
|-- js （追加）/
│   `-- main.js （追加）
`-- sound （省略）/

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>くろねこラビリンス</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}
		canvas {
			display: block;
		}
	</style>
</head>
<body>
	<script src="js/main.js"></script>
</body>
</html>

main.jsファイルが、ちゃんとindex.htmlから読みこまれているか、確かめていきたいと思います。
今回はdocument.write();をつかって、パソコンにお願いをしてみます。

document.write();は、画面に文字やタグなどのデータを表示できるものです。

では、main.jsに、このように入力してください。

js/main.js

document.write( 'くろねこラビリンス' );

ブラウザを開き、「くろねこラビリンス」と表示されていれば、ぶじmain.jsが読みこまれている、ということになります。

さきほどmain.jsファイルを作りましたが、もうひとつ作っておきたいファイルがあります。
それはゲームエンジンをつくるためのものです。

では、jsフォルダにengine《エンジン》というフォルダを作成し、そこにgame.jsファイルをつくりましょう。

rpg/
|-- img （省略）/
|-- index.html
|-- js/
|   |-- engine （追加）/
|   |   `-- game.js （追加）
|   `-- main.js
`-- sound （省略）/

このあと、必要《ひつよう》なときにファイルを追加《ついか》していきますが、まずはこれだけで進めていきましょう。

では、index.htmlからgame.jsを読みこみます。

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>くろねこラビリンス</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}
		canvas {
			display: block;
		}
	</style>
</head>
<body>
	<script src="js/engine/game.js"></script>
	<script src="js/main.js"></script>
</body>
</html>

さらに、game.jsファイルは、このようにします。

js/engine/game.js

document.write( 'ゲームエンジン' );

これでブラウザを再読みこみし、「ゲームエンジン くろねこラビリンス」と表示されれば、game.jsとmain.jsがぶじ読みこまれていることになります。

ゲームエンジンについて

さて、さきほどからゲームエンジンといっていますが、ゲームエンジンとはなんなのでしょうか。

では、ここでクッキーの話をしましょう。
クッキー。おいしいですよね。

たとえば、AさんとBさんがいたとします。
そして2人は、クッキーをつくることにしました。

Aさんはとっても作業《さぎょう》がはやいです。スピードでは誰にも負けません。
スマホでささっとレシピを調べ、さっそくクッキーづくりにとりかかり、焼き上がるまで20分ほどでした。

Bさんは、料理が大好きです。
いろんなサイトでいろんなレシピを見て、どうやってつくるか考えます。もちろんあれこれ考えるのも、Bさんにとっての楽しみのひとつです。
Bさんは、材料《ざいりょう》の分量《ぶんりょう》など、作り方をかんたんにメモすると、小麦粉の量をはかり、カップに線を引きました。これでこのカップを使えば小麦粉の分量が分かるので、次にクッキーを作るときは楽ちんです。もちろん、メモした紙も、ちゃんとファイルにしまっておきました。
そんなこんなで、Bさんはクッキーを焼き上げるまでに、40分かかりました。

さて、数日後……２人は、もう一度クッキーを作ろう、という話になりました。

Aさんは、前回作ったサイトときに参考《さんこう》にしたサイトを探《さが》します。作ったのは数日前なので、履歴《りれき》も消してしまっていました。作ったときの記憶《きおく》も、もう薄《うす》れてしまっています。分量なんて、まったく覚えていません。
まぁクッキーなんてどのレシピを見たって一緒《いっしょ》だろ、と思い、前回とはべつのサイトを参考《さんこう》に作りました。クッキーを焼き上げるまでにかかった時間は、前回と同じ20分でした。

Bさんは、ちゃんと前回見たサイトに書いてあった分量をメモしていました。今回はそのメモを見ながら作業をしています。
しかも、カップに線を引いておいたので、小麦粉の分量をはかるのは一瞬でできます。しかし前回、ちょっと小麦粉の量が多かった気がしたので、今回はその線よりすこし少なめにしました。
Bさんはクッキーを焼き上げるまでに、10分しかかかりませんでした。

では、次のページからは、実際にゲームエンジンを作っていきます。

このシリーズの一覧はこちら

1. 小学生からのプログラミング入門。プログラミングってなぁに？
2. Scratchの使い方と、ゲーム作りの基礎知識を学ぼう！　小学生からのプログラミング入門
3. Scratchでじゃんけんゲームを作ろう！　小学生からのプログラミング入門
4. Scratchでシューティングゲームを作ろう！　小学生からのプログラミング入門
5. Scratchでピアノ鍵盤を作って音を鳴らそう！　小学生からのプログラミング入門
6. テキストエディタ（Visual Studio Code）をインストールしてみよう！　小学生からのプログラミング入門
7. Visual Studio Codeを日本語化してみよう！　小学生からのプログラミング入門
8. JavaScriptでおみくじを作ろう！　小学生からのプログラミング入門
9. JavaScriptで今月の残り日数を計算してみよう！　小学生からのプログラミング入門
10. JavaScriptで画像を表示してみよう！　小学生からのプログラミング入門
11. JavaScriptで画像を移動してみよう！　小学生からのプログラミング入門
12. 【JavaScript】キー入力でキャラを動かしてみよう！　小学生からのプログラミング入門
13. 【JavaScript】ファイルを分けて管理してみよう！　小学生からのプログラミング入門
14. 【JavaScript】オブジェクトを使ってみよう！　小学生からのプログラミング入門
15. 【JavaScript】ゲームのメインループを作ってみよう！　小学生からのプログラミング入門
16. 【JavaScript】キャラを決まった間隔ずつ動かす！　小学生からのプログラミング入門
17. HTML5とCanvasを使ってみよう！　小学生からのプログラミング入門
18. 【JavaScript】迷路やRPGで使えるマップを作ってみよう！　小学生からのプログラミング入門
19. 【JavaScript】マップでキャラを動かせるようにしよう！　小学生からのプログラミング入門
20. 【JavaScript】クラスの概念をしっかりと理解しよう！　小学生からのプログラミング入門
21. 【JavaScript】プログラム全体をクラスを使って作ってみよう！　小学生からのプログラミング入門
22. 【JavaScript】文字を表示するクラスを作ってみよう！　小学生からのプログラミング入門
23. 【JavaScript】改行と一文字ずつ画面に表示する方法！　小学生からのプログラミング入門
24. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法！　小学生からのプログラミング入門
25. JavaScriptでRPGを作ろう！スマホにも対応したゲームの作り方
26. webpackを使ってゲームエンジンを作ろう！（JSライブラリの作り方）
27. WindowsにPythonをインストールしてみよう！小学生からのPython入門
28. MacにPythonをインストールしてみよう！小学生からのPython入門
29. Pythonでじゃんけんゲームを作ってみよう！小学生からのPython入門
30. Pythonのtkinterを使って、ウィンドウを表示してみよう！
31. Pythonのtkinterで、画像つきのおみくじゲームを作ろう！

• Tweet
• Facebook
• はてブ
• Pocket