1. HOME»
  2. プログラミング・Web»
  3. JavaScript»
  4. JavaScriptでRPGを作ろう!スマホにも対応したゲームの作り方

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

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

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

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

りこ

ねぇ、アル。私たち、今までにいっぱいプログラミングを学んできたでしょ?

アル

うん、いろんなことをおぼえたよね

りこ

そろそろ1つぐらいゲームを完成させられるんじゃないかなって思って

アル

あ、そうだよね。ぼくたち、もうゲームをつくれるような気がするよね!

りこ

今から山田先生にききに行ってみない?

アル

うん、行こう!

りこ

山田先生! そろそろちゃんとしたゲームを作りたいってアルが

アル

ちょっと、りこちゃんが言い出したんじゃないか

りこ

ふふふ、そうだった

山田

まぁまぁ。じゃあ、今回から本格的にRPGを作っていくべか?

アル

RPG? 作りたい!

りこ

私も!

目次
  1. 今回から作るゲームについて
  2. 使用する素材そざいについて
  3. フォルダ構成こうせいについて
  4. index.htmlファイルを作ろう!
  5. JavaScriptのファイルを、index.htmlから読み込もう!
  6. ゲームエンジンについて

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

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

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

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

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

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

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

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

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

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

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

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

山田先生(yamada.png)
りこちゃん(rico.png)
アルくん(aru.png)
START(start.png)
GOAL(goal.png)
タイル(tile.png)
D-PAD(dpad.png)
スタート(start.mp3)
クリア(clear.mp3)
BGM(bgm.mp3)

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

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

まず、そのままの素材や、ちょっとだけ加工かこうしたものを「ぼくが作った!」っていうふうに言ったり、再配布さいはいふするのはダメです。もちろん「私が作りましたよ」でもダメです。
ちょっとだけ加工……というのは、たとえば、曲にエコーをかけて、「これぼくが作曲した!」というのはダメです。
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
山田

imgフォルダやsoundフォルダに入っているファイルは、さきほどの素材からダウンロードしたものを使ってほしいべ

ただ、index.htmlファイルは自分で作成するべよ

りこ

内容はどうするの?

山田

いまから説明していくべよ!

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

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

アル

えっと、まずなにからはじめるんだっけ?

りこ

ホームページをつくるのよ

アル

あ、そうか。ブラウザあそぶゲームだから、ホームページ必要ひつようなんだったよね

えっと、いんでっくす、えいちてぃーえむえるだっけ?

りこ

そうそう、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>
山田

index.htmlファイルを作ったら、それをブラウザで開いてほしいんだべ

アル

開いたけど、まだ画面が真っ白だね……

りこ

ほんどだ

山田

まだなにも表示ひょうじしてないべからな……
じゃあ、作っていくべよ

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

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

山田

まずは読みこむJavaScriptファイルを作るべ

rpgフォルダに、jsフォルダを作って、そこにmain.jsファイル追加ついかしてほしいんだべ

rpg/
|-- img (省略)/
|-- index.html
|-- js (追加)/
│   `-- main.js (追加)
`-- sound (省略)/
りこ

main.jsには、まだなにも書きこまなくていいんだよね?

山田

そうだべよ

アル

えっと、次はどうするんだ……

山田

index.htmlから、main.jsを読みこむべよ
bodyタグのなかに、main.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/main.js"></script>
</body>
</html>
アル

入力したよ!

りこ

でも、ちゃんと読みこめてるかな……

山田

ちゃんと読みこまれてるか、main.jsにちょっとコマンドを追加して、確かめてみるべ

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

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

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

js/main.js

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

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

山田

「くろねこラビリンス」って表示されたべか?
もし表示されなからった、main.jsまでのパスと、ファイルの場所が、ちゃんと合っているか確認してほしいんだべ

アル

えっと、パスってなんだっけ?

りこ

目的のファイルまでの道順みちじゅんのことよ
今回だったら、main.jsがどこにあるのかってやつ
さっきindex.htmlに追加した「js/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がぶじ読みこまれていることになります。

テキストが2つ表示されていれば、2つのファイルが読み込めているよ!
りこ

「ゲームエンジン」「くろねこラビリンス」の、両方のテキストが表示されてるってことは、2つのファイルが読み込まれてるってことね!

ゲームエンジンについて

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

アル

ねぇ、さっきから言ってるゲームエンジンってなんなのさ

山田

まぁ、簡単かんたんなものになってしまうべけど、ゲームづくりに使う機能きのうをまとめたものをあらかじめつくっておくんだべ

りこ

機能?

山田

たとえば、画像(スプライト)や文字を表示する機能、それを動かす機能、画像同士がぶつかったかどうかをチェックする機能など、いろいろつくっておくんだべ

アル

なんだかむずかしいよ! 画像を表示したければ表示するプログラム書いて、動かしたければ動かすプログラムを書けばいいじゃん!

りこ

うん……作りたいものから順番じゅんばんに、そのままつくっちゃだめなの?

山田

作りたいものをそのままつくってしまうと、また次の新作をつくりたいって思ったとき、もういちど1からつくらなくちゃいけなくなるんだべ
よく使う機能をまとめたものをあらかじめ作っておけば、今後こんごのゲームづくりでそれを使い回せるし、ソースも綺麗きれいになるべよ

アル

うーん。いまいちピンとこないな……

山田

そうだべか……じゃあ、こんな話をしてあげるべ

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

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

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

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

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

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

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

アル

なんだよこの話。プログラミング関係かんけいないじゃん!

山田

まぁまぁ。じゃあアルくん、この話、どっちが効率こうりつがいいと思うべ?

アル

うーん、さいしょはAさんの方がいいと思ったけど、Bさんのほうが要領ようりょうをつかんでるよね
でも2回を合わせれば、Aさんは40分で、Bさんは50分。最終的にはAさんのほうがはやいよ

山田

クッキーづくりを2回しかおこなわなければ……だべよ

りこ

そっか。クッキーをつくる回数がおおいほど、Bさんの方が効率こうりつがいいってことが分かるね

あ、それにBさんは、小麦粉の量を調整ちょうせいしたりして、より美味おいしくつくろうとしてる!

山田

そうなんだべ。Aさんはクッキー作ることばかり考えてしまって、工夫くふうすることを忘れてしまっているべよ

りこ

でも、これとプログラミング、なんの関係があるの?

山田

ふっふっふ。Bさんは作り方をメモしたり、カップに線を引いたり……この作業のおかげで、Bさんはちょっと味に工夫をしてみたり、効率的こうりつてきにクッキーをつくったりできたんだべ
そしてゲームエンジンをつくる、というのは、その作業と同じなんだべ

りこ

分かった。クッキーをつくるための道具どうぐをつくるみたいに、ゲームを作るための道具をつくるのね!

そしてゲームに工夫を加えたいとき、ゲームエンジンのほうを工夫していけば……ゲームをつくればつくるほど、クオリティが上がっていく!

山田

そういうことだべ!

ゲームエンジンは、ゲームをつくりやすくするためのプログラムです。
よく使われるゲームエンジンには、

  • Unity
  • Unreal Engine

などがあります。

上のゲームエンジンはツールとなっていますが、ライブラリのものもあります。

  • melon.js
  • phina.js
  • enchant.js

などがあります。

これらを使えば、ゲーム開発がやりやすくなりますが、今回はゲームエンジンも自作していきます。

また、今回から作成するのは、ライブラリの方です。

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

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

  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で、画像つきのおみくじゲームを作ろう!
オリジナルゲーム.com