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

更新 : 2024/05/02

by : It is R

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

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

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

りこ

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

アル

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

りこ

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

アル

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

りこ

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

アル

うん、行こう！

りこ

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

アル

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

りこ

ふふふ、そうだった

山田

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

アル

RPG？　作りたい！

りこ

私も！

今回から作るゲームについて
使用する素材《そざい》について
フォルダ構成《こうせい》について
index.htmlファイルを作ろう！
JavaScriptのファイルを、index.htmlから読み込もう！
ゲームエンジンについて

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

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

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

<br /> この<a class="c-link c-link--dark c-link--underline" href="https://original-game.com/it_dictionary/browser/">ブラウザ</a>はiframeタグに対応しておりません。<br />

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

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

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

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

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

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

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

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

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

START(start.png)

GOAL(goal.png)

タイル(tile.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がぶじ読みこまれていることになります。

りこ

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

ゲームエンジンについて

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

アル

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

山田

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

りこ

機能？

山田

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

アル

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

りこ

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

山田

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

アル

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

山田

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

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

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

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

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

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

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

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

アル

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

山田

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

アル

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

山田

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

りこ

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

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