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

Canvas《キャンバス》を使ってみよう！

つづいて、Canvas《キャンバス》を使って、RPGのもとになるプログラムを作っていきます。

js/engine/game.js

'use strict'

/**
 * ゲームづくりの基本となるクラス
 */
class Game {
}

js/engine/game.js

'use strict'

/**
 * ゲームづくりの基本となるクラス
 */
class Game {

	/**
	 * 引数
	 * width : ゲームの横幅
	 * height : ゲームの縦幅
	 */
	constructor( width, height ) {
		//canvas要素を作成
		this.canvas = document.createElement( 'canvas' );
		//作成したcanvas要素をbodyタグに追加
		document.body.appendChild( this.canvas );
		//canvasの横幅（ゲームの横幅）を設定。もし横幅が指定されていなければ320を代入
		this.canvas.width = width || 320;
		//canvasの縦幅（ゲームの縦幅）を設定。もし縦幅が指定されていなければ320を代入
		this.canvas.height = height || 320;
	} //constructor() 終了

}

メインループをつくろう！

つづいて、かんたんにメインループをつくるための機能《きのう》を、Gameクラスに作っていきます。

js/engine/game.js

'use strict'

/**
 * ゲームづくりの基本となるクラス
 */
class Game {

	/**
	 * 引数
	 * width : ゲームの横幅
	 * height : ゲームの縦幅
	 */
	constructor( width, height ) {
		//canvas要素を作成
		this.canvas = document.createElement( 'canvas' );
		//作成したcanvas要素をbodyタグに追加
		document.body.appendChild( this.canvas );
		//canvasの横幅（ゲームの横幅）を設定。もし横幅が指定されていなければ320を代入
		this.canvas.width = width || 320;
		//canvasの縦幅（ゲームの縦幅）を設定。もし縦幅が指定されていなければ320を代入
		this.canvas.height = height || 320;
	} //constructor() 終了

	/**
	 * startメソッドを呼び出すことで、メインループが開始される
	 */
	start() {
		//メインループを呼び出す
		this._mainLoop();
	} //start() 終了

	/**
	 * メインループ
	 */
	_mainLoop() {
		//画家さん（コンテキスト）を呼ぶ
		const ctx = this.canvas.getContext( '2d' );
		//塗りつぶしの色に、黒を指定する
		ctx.fillStyle = '#000000';
		//左上から、画面のサイズまでを、塗りつぶす
		ctx.fillRect( 0, 0, this.canvas.width, this.canvas.height );

		//自分自身（_mainLoop）を呼び出して、ループさせる
		requestAnimationFrame( this._mainLoop.bind( this ) );
	} //_mainLoop() 終了

}

js/main.js

'use strict'

//ブラウザがページを完全に読みこむまで待つ
addEventListener( 'load', () => {

	//変数gameに、あなたはゲームですよ、と教える
	const game = new Game();

	//gameに、ゲームをスタートして、とお願いする
	game.start();

} );

書き換えたら、ブラウザを再読み込みしてみてください。

js/main.js

'use strict'

//ブラウザがページを完全に読みこむまで待つ
addEventListener( 'load', () => {

	//変数gameに、あなたはゲームですよ、と教える
	const game = new Game( 1136, 640 );

	//gameに、ゲームをスタートして、とお願いする
	game.start();

} );

スプライト（画像）を表示してみよう！

つづいて、スプライト（画像）を表示するための機能《きのう》を作っていきましょう。

rpg/
|-- img （省略）/
|-- index.html
|-- js/
|   |-- engine/
|   |   |-- game.js
|   |   `-- sprite.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/engine/sprite.js"></script>
	<script src="js/engine/game.js"></script>
	<script src="js/main.js"></script>
</body>
</html>

js/engine/sprite.js

'use strict'

/**
 * スプライトに関してのクラス
 */
class Sprite {

	/**
	 * 引数
	 * img : 画像ファイルまでのパス
	 */
	constructor( img ) {
		//this.imgに、あなたは画像ですよ、と教える
		this.img = new Image();
		//this.img.srcに画像ファイルまでのパスを代入
		this.img.src = img;
		//画像の初期位置
		this.x = this.y = 0;
	} //constructor() 終了

	/**Gameクラスのメインループからずっと呼び出され続ける
	 *
	 * 引数
	 * canvas : 紙（キャンバス）
	 */
	update( canvas ) {
		//画像などを画面に表示するためのメソッドを呼び出す
		this.render( canvas );
	} //update() 終了

	/**
	 * 画像などを画面に表示するためのメソッド
	 *
	 * 引数
	 * canvas : 紙（キャンバス）
	 */
	render( canvas ) {
		//画家さん（コンテキスト）を呼ぶ
		const _ctx = canvas.getContext( '2d' );
		//画家さんに、絵を描いてとお願いする
		_ctx.drawImage( this.img, this.x, this.y );
	} //render() 終了

}

js/engine/game.js

'use strict'

/**
 * ゲームづくりの基本となるクラス
 */
class Game {

	/**
	 * 引数
	 * width : ゲームの横幅
	 * height : ゲームの縦幅
	 */
	constructor( width, height ) {
		//canvas要素を作成
		this.canvas = document.createElement( 'canvas' );
		//作成したcanvas要素をbodyタグに追加
		document.body.appendChild( this.canvas );
		//canvasの横幅（ゲームの横幅）を設定。もし横幅が指定されていなければ320を代入
		this.canvas.width = width || 320;
		//canvasの縦幅（ゲームの縦幅）を設定。もし縦幅が指定されていなければ320を代入
		this.canvas.height = height || 320;

		//ゲームに登場する全てのもの（オブジェクト）を入れるための配列
		this.objs = [];
	} //constructor() 終了

	/**
	 * startメソッドを呼び出すことで、メインループが開始される
	 */
	start() {
		//メインループを呼び出す
		this._mainLoop();
	} //start() 終了

	/**
	 * メインループ
	 */
	_mainLoop() {
		//画家さん（コンテキスト）を呼ぶ
		const ctx = this.canvas.getContext( '2d' );
		//塗りつぶしの色に、黒を指定する
		ctx.fillStyle = '#000000';
		//左上から、画面のサイズまでを、塗りつぶす
		ctx.fillRect( 0, 0, this.canvas.width, this.canvas.height );

		//ゲームに登場する全てのもの（オブジェクト）の数だけ繰り返す
		for ( let i=0; i<this.objs.length; i++ ) {
			//スプライトやテキストなど、すべてのオブジェクトのupdateメソッドを呼び出す
			this.objs[i].update( this.canvas );
		}

		//自分自身（_mainLoop）を呼び出して、ループさせる
		requestAnimationFrame( this._mainLoop.bind( this ) );
	} //_mainLoop() 終了

}

js/engine/game.js

'use strict'

/**
 * ゲームづくりの基本となるクラス
 */
class Game {

	/**
	 * 引数
	 * width : ゲームの横幅
	 * height : ゲームの縦幅
	 */
	constructor( width, height ) {
		//canvas要素を作成
		this.canvas = document.createElement( 'canvas' );
		//作成したcanvas要素をbodyタグに追加
		document.body.appendChild( this.canvas );
		//canvasの横幅（ゲームの横幅）を設定。もし横幅が指定されていなければ320を代入
		this.canvas.width = width || 320;
		//canvasの縦幅（ゲームの縦幅）を設定。もし縦幅が指定されていなければ320を代入
		this.canvas.height = height || 320;

		//ゲームに登場する全てのもの（オブジェクト）を入れるための配列
		this.objs = [];
	} //constructor() 終了

	/**
	 * startメソッドを呼び出すことで、メインループが開始される
	 */
	start() {
		//メインループを呼び出す
		this._mainLoop();
	} //start() 終了

	/**
	 * メインループ
	 */
	_mainLoop() {
		//画家さん（コンテキスト）を呼ぶ
		const ctx = this.canvas.getContext( '2d' );
		//塗りつぶしの色に、黒を指定する
		ctx.fillStyle = '#000000';
		//左上から、画面のサイズまでを、塗りつぶす
		ctx.fillRect( 0, 0, this.canvas.width, this.canvas.height );

		//ゲームに登場する全てのもの（オブジェクト）の数だけ繰り返す
		for ( let i=0; i<this.objs.length; i++ ) {
			//スプライトやテキストなど、すべてのオブジェクトのupdateメソッドを呼び出す
			this.objs[i].update( this.canvas );
		}

		//自分自身（_mainLoop）を呼び出して、ループさせる
		requestAnimationFrame( this._mainLoop.bind( this ) );
	} //_mainLoop() 終了

	/**
	 * オブジェクトをゲームに追加できるようになる、addメソッドを作成
	 *
	 * 引数
	 * obj : 追加したいオブジェクト
	 */
	add( obj ) {
		//this.objs配列の末尾に、objの値を追加
		this.objs.push( obj );
	} //add() 終了

}

js/main.js

'use strict'

//ブラウザがページを完全に読みこむまで待つ
addEventListener( 'load', () => {

	//変数gameに、あなたはゲームですよ、と教える
	const game = new Game();

	//変数yamadaに、あなたは山田先生のスプライト画像ですよ、と教える
	const yamada = new Sprite( 'img/yamada.png' );
	//gameに、山田先生のスプライト画像を表示して、とお願いする
	game.add( yamada );

	//gameに、ゲームをスタートして、とお願いする
	game.start();

} );

では、ブラウザを再読み込みしてみましょう！

js/engine/sprite.js

'use strict'

/**
 * スプライトに関してのクラス
 */
class Sprite {

	/**
	 * 引数
	 * img : 画像ファイルまでのパス
	 * width : 画像の表示する範囲（横幅）
	 * height : 画像の表示する範囲（縦幅）
	 */
	constructor( img, width, height ) {
		//this.imgに、あなたは画像ですよ、と教える
		this.img = new Image();
		//this.img.srcに画像ファイルまでのパスを代入
		this.img.src = img;
		//画像の初期位置
		this.x = this.y = 0;
		//画像を表示する範囲の横幅。引数widthが指定されていない場合、this.widthに32を代入
		this.width = width || 32;
		//画像を表示する範囲の縦幅。引数heightが指定されていない場合、this.heightに32を代入
		this.height = height || 32;
		//何番目の画像を表示するか
		this.frame = 0;
	} //constructor() 終了

	/**Gameクラスのメインループからずっと呼び出され続ける
	 *
	 * 引数
	 * canvas : 紙（キャンバス）
	 */
	update( canvas ) {
		//画像などを画面に表示するためのメソッドを呼び出す
		this.render( canvas );
	} //update() 終了

	/**
	 * 画像などを画面に表示するためのメソッド
	 *
	 * 引数
	 * canvas : 紙（キャンバス）
	 */
	render( canvas ) {
		//キャンバスの外にスプライトがあるとき、ここでこのメソッドを終了する
		if ( this.x < -1 * this.width || this.x > canvas.width ) return;
		if ( this.y < -1 * this.height || this.y > canvas.height ) return;

		//X,Y方向に、何番目の画像か
		const _frameX = this.frame % ( this.img.width / this.width );
		const _frameY = ~~( this.frame / ( this.img.width / this.width ) );

		//画家さん（コンテキスト）を呼ぶ
		const _ctx = canvas.getContext( '2d' );
		//画家さんに、絵を描いてとお願いする
		_ctx.drawImage(
			this.img,
			this.width * _frameX,
			this.height * _frameY,
			this.width,
			this.height,
			this.x,
			this.y,
			this.width,
			this.height
		);
	} //render() 終了

}

再び、ブラウザを再読み込みしてみましょう！

次のページでは、山田先生がキー入力で動くようになります。

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

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