1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. 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

などがあります。

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

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

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

スポンサードリンク

関連コンテンツ

オススメ記事

wordpress

【WordPress】パンくずリストをプラグイン無しで自作する方法

※追記(2018/2/12) もっと高機能になるように、改良修正しました。 人生で3回ほど死にそうになったことがある@It_is_Rです。 WordPressのパンくずリストを作

zsh

enhancd で cd コマンドを超便利に! インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。 やかましいわ。 ターミナルをカッコよくするシリーズ4回目です。 今回は enhancd というプラグインを使って cd コマンドを便利

マップ上をキャラが移動できるようにしよう!

【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、今回もはじめていきましょう! 前回は、JavaScriptでのマップの作り方を紹介《しょうかい》しました。しかし、まだマップを配置《はいち》しただけで

とってもかんたん!iPhoneアプリ開発

SwiftUIでじゃんけんゲームを作ろう。かんたんiPhoneアプリ開発入門

SwiftUIは、2019年にアップルが発表したフレームワークです。 SwiftUIを使って、iPhoneで遊べるじゃんけんゲームを作成してみましょう。 この入門ではXcodeを使いますので、

npm-scriptsの使い方。自作のコマンドによるタスク実行方法

畳んだ布団が飼い猫のお気に入りの場所になってます。@It_is_Rです。 npm-scriptsを使うことで、あらかじめタスクをかんたんな名前で指定しておき、そのタスクを素早く実行できるように

【Xcode7】Swift2でMacアプリ開発。Storyboardでボタンを作る。

喧嘩するほど仲がいいとは言いますが、喧嘩する相手がいません。友達がいないということでしょうか。@It_is_Rです。 前回、StoryboardでMacのウィンドウに文字を表示しました。しかし、

ファイルを分けるべよ!

【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 前回はりこちゃんを方向キーで操作《そうさ》することができるようになりました。しか

WordPressカスタムヘッダーを完璧に使いこなしたい人へ告ぐ!

森の中に昔から住んでる@It_is_Rです。 WordPressのカスタマイズをする上で、カスタムヘッダーを使うと、色やヘッダー画像をWordPressの管理画面から操作できるようになり便利です

小学校プログラミング必修化。どんなことを学べばいいの?

2020年からのプログラミング必修化において、お子さんのいる方は、「いったいどんなことを学べばいいんだろう?」、「プログラミングなんてまったく分からないのに、どうやって教えてあげればいいんだろう……

enchant.js100行未満!!本格シューティングゲーム作り方

昨日歩き回ったせいで、足がかなり痛い@It_is_Rです。 さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてし

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です