webpackを使ってゲームエンジンを作ろう！（JSライブラリの作り方）

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

前回の「JavaScriptでRPGを作ろう！スマホにも対応したゲームの作り方」では、JavaScriptでゲームエンジンを作りながら、フルスクラッチでのRPGの作り方を学びました。
しかし、いくつかのファイルに分けてプログラムを作ったので、読み込むファイルがたくさんありました。

そこで今回は、前回作ったゲームエンジンを、webpackを使って、ひとつのファイルにまとめる方法を学んでいきたいと思います。

ゲームエンジンを作るための、フォルダ構成について

では、webpackをつかって、ゲームエンジンを作ってみましょう！
ただ今回は、ゲームエンジン（ライブラリ）の作り方のみを紹介していきます。webpackの使い方を知りたい場合は「【初心者向け】webpack 4入門。一番簡単で詳しい使い方」をご覧ください。

まずは、ゲームエンジンを作るためのフォルダ構成《こうせい》をみていきましょう！

rpg/
|-- img/
|   `-- 〜省略〜
|-- 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/
    `-- 〜省略〜

game/
|-- rpg/
|   |-- img/
|   |   `-- 〜省略〜
|   |-- index.html
|   |-- js/
|   |   |-- main.js
|   |   `-- map.js
|   `-- sound/
|       `-- 〜省略〜
`-- src/
    |-- charactertile.js
    |-- dpad.js
    |-- game.js
    |-- party.js
    |-- scene.js
    |-- sound.js
    |-- sprite.js
    |-- text.js
    |-- tile.js
    `-- tilemap.js

npmを使って、webpackをインストールしよう！

つづいて、webpackをインストールしていきます。

---

Windows10にNode.jsをインストールする方法

MacにNode.jsをインストールする方法

---

$ npm -v
6.14.11

$ cd [gameフォルダへのパス]

$ npm init -y
$ npm install webpack webpack-cli --save-dev

エントリーポイントってなぁに？

webpackを使う上で、知っておきたい言葉があります。それはエントリーポイントです。
ではエントリーポイントとはいったいなんなのでしょうか。

src/index.js

'use strict'

export { default as CharacterTile } from './charactertile.js';
export { default as DPad } from './dpad.js';
export { default as Game } from './game.js';
export { default as Party } from './party.js';
export { default as Scene } from './scene.js';
export { default as Sprite } from './sprite.js';
export { default as Text } from './text.js';
export { default as Tile } from './tile.js';
export { default as Tilemap } from './tilemap.js';

webpackの設定ファイルを作ろう！

つづいて、webpackの設定ファイルを作っていきます。

webpack.config.js

module.exports = {
	output: {
		path: __dirname + '/rpg/js/engine',
		filename: 'kuroneko.js',
		libraryTarget: 'umd'
	}
};

webpack.config.js

module.exports = {
	output: {
		path: __dirname + '/rpg/js/engine',
		filename: 'kuroneko.js',
		library: 'Kuroneko',
		libraryTarget: 'umd'
	}
};

const sprite = new Kuroneko.Sprite();

importとexportを使ってみよう！

つづいて、importとexportを使ってみましょう！

src/charactertile.js

'use strict'

//Tileクラスをインポートする
import Tile from './tile.js';

/**
 * キャラクタータイルに関するクラス
 */
export default class CharacterTile extends Tile {

	/**
	 * 引数
	 * img : 画像ファイルまでのパス
	 * size : タイルの一辺の長さ
	 *
	 * ※注意
	 * directionやanimationを指定すると自動的にスプライト画像も変更されるが、画像自体を対応したものにする必要がある
	 * CharacterTileクラスで、frameを使うことはできない
	 */
	constructor( img, size ) {
		//親クラスのコンストラクタを呼び出す
		super( img, size );
		//キャラクターの向き（0:正面 1:左 2:右 3:後ろ）
		this.direction = 0;
		//スプライトのアニメーション。1が通常。0~2を切り替えることで、歩いているアニメーションを作ることができる
		this.animation = 1;
	} //constructor() 終了

	/**
	 * 画像などを画面に表示するためのメソッド
	 *
	 * 引数
	 * canvas : 紙（キャンバス）
	 */
	render( canvas ) {
		//画面の外にスプライトがあるとき、表示しないようにする
		if ( this.x + this.shiftX < -1 * this.size || this.x + this.shiftX > canvas.width ) return;
		if ( this.y + this.shiftY < -1 * this.size || this.y + this.shiftY > canvas.height ) return;
		//画家さん（コンテキスト）を呼ぶ
		const _ctx = canvas.getContext( '2d' );
		//スプライトを回転させるときの中心位置を変更するための、canvasの原点の移動量
		const _translateX = this.x + this.width/2 + this.shiftX;
		const _translateY = this.y + this.height/2 + this.shiftY;
		//描画状態を保存する
		_ctx.save();
		//canvasの原点の移動
		_ctx.translate( _translateX, _translateY );
		//canvasを回転
		_ctx.rotate( this.rotate * Math.PI / 180 );
		//移動したcanvasの原点を戻す
		_ctx.translate( -1*_translateX, -1*_translateY );
		//画家さんに、絵を描いてとお願いする
		_ctx.drawImage(
			this.img,
			this.size * this.animation,
			this.size * this.direction,
			this.size,
			this.size,
			this.x + this.shiftX,
			this.y + this.shiftY,
			this.size,
			this.size
		);
		//保存しておいた描画状態に戻す
		_ctx.restore();
	} //render() 終了

}

src/tile.js

'use strict'

//Spriteクラスをインポートする
import Sprite from './sprite.js';

/**
 * タイルに関してのクラス
 */
export default class Tile extends Sprite {

	/**
	 * 引数
	 * img : 画像ファイルまでのパス
	 * size : タイルの大きさ
	 */
	constructor( img, size ) {
		//親クラスのコンストラクタを呼び出す
		super( img, size, size );
		//引数sizeが指定されていない場合、this.sizeに32を代入
		this.size = size || 32;
		//マップ座標に0を代入。（マップ座標は、タイルマップの左上から何番目のタイルの位置にあるのか、という意味でここでは使っています）
		this.mapX = this.mapY = 0;
		//タイルマップと同期して動くかどうか
		this.isSynchronize = true;
	} //constructor() 終了

	/**
	 * タイル同士が重なっているかどうかを取得できるメソッド
	 *
	 * 引数
	 * tile : 重なっているかを判定したいタイル
	 */
	isOverlapped( tile ) {
		//引数がTileのとき
		if ( tile instanceof Tile ) {
			//タイル同士が重なっているかどうか
			const _isOverlapped = ( this.mapX === tile.mapX && this.mapY === tile.mapY );
			//タイル同士が重なっているかどうかの結果を返す
			return _isOverlapped;
		}
		//引数がTileでなければ、コンソールにエラーを表示
		else console.error( 'Tilemapに追加できるのはTileだけだよ！' );
	} //isOverlapped() 終了

}

src/sprite.js

'use strict'

/**
 * スプライトに関してのクラス
 */
export default 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;
		//数値によってスプライトを移動させることができる（移動速度）
		this.vx = this.vy = 0;
		//スプライトの位置を、数値の分、ずらすことができる
		this.shiftX = this.shiftY = 0;
		//スプライトの角度
		this.rotate = 0;
	} //constructor() 終了

	/**Gameクラスのメインループからずっと呼び出され続ける
	 *
	 * 引数
	 * canvas : 紙（キャンバス）
	 */
	update( canvas ) {
		//画像などを画面に表示するためのメソッドを呼び出す
		this.render( canvas );
		//スプライトを動かしたり、なにかのきっかけでイベントを発生させたりするために使うメソッドを呼び出す
		this.onenterframe();
		//スプライトを移動する
		this.x += this.vx;
		this.y += this.vy;
	} //update() 終了

	/**
	 * 画像などを画面に表示するためのメソッド
	 *
	 * 引数
	 * canvas : 紙（キャンバス）
	 */
	render( canvas ) {
		//キャンバスの外にスプライトがあるとき、ここでこのメソッドを終了する
		if ( this.x + this.shiftX < -1 * this.width || this.x + this.shiftX > canvas.width ) return;
		if ( this.y + this.shiftY < -1 * this.height || this.y + this.shiftY > 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' );
		//スプライトを回転させるときの中心位置を変更するための、canvasの原点の移動量
		const _translateX = this.x + this.width/2 + this.shiftX;
		const _translateY = this.y + this.height/2 + this.shiftY;
		//描画状態を保存する
		_ctx.save();
		//canvasの原点の移動
		_ctx.translate( _translateX, _translateY );
		//canvasを回転
		_ctx.rotate( this.rotate * Math.PI / 180 );
		//移動したcanvasの原点を戻す
		_ctx.translate( -1*_translateX, -1*_translateY );
		//画家さんに、絵を描いてとお願いする
		_ctx.drawImage(
			this.img,
			this.width * _frameX,
			this.height * _frameY,
			this.width,
			this.height,
			this.x + this.shiftX,
			this.y + this.shiftY,
			this.width,
			this.height
		);
		//保存しておいた描画状態に戻す
		_ctx.restore();
	} //render() 終了

	/**
	 * タッチした指の、相対的な位置（タッチしたオブジェクトの左上からの位置）を取得できるメソッド
	 *
	 * 引数
	 * fingerPosition : 指の位置の座標
	 */
	getRelactiveFingerPosition( fingerPosition ) {
		//タッチしたものの、左上部分からの座標
		const _relactiveFingerPosition = {
			x: fingerPosition.x - this.x - this.shiftX,
			y: fingerPosition.y - this.y - this.shiftY
		};

		//数値が範囲内にあるかどうかを取得できる関数
		const inRange = ( num, min, max ) => {
			//数値が範囲内にあるかどうか
			const _inRange = ( min <= num && num <= max );
			//結果を返す
			return _inRange;
		}

		//タッチした位置がオブジェクトの上の場合、相対的な位置を返す
		if ( inRange( _relactiveFingerPosition.x, 0, this.width ) && inRange( _relactiveFingerPosition.y, 0, this.height ) ) return _relactiveFingerPosition;
		//オブジェクトから外れていれば、falseを返す
		return false;
	} //getRelactiveFingerPosition() 終了

	/**
	 * タッチイベントを割り当てるためのメソッド
	 *
	 * 引数
	 * eventType : イベントのタイプ
	 * fingerPosition : 指の位置
	 */
	assignTouchevent( eventType, fingerPosition ) {
		//相対的な座標（タッチしたオブジェクトの、左上からの座標）を取得
		const _relactiveFingerPosition = this.getRelactiveFingerPosition( fingerPosition );

		//イベントのタイプによって呼び出すメソッドを変える
		switch ( eventType ) {
			case 'touchstart' :
				//指の場所がスプライトの上にあるとき、ontouchstartメソッドを呼び出す
				if ( _relactiveFingerPosition ) this.ontouchstart( _relactiveFingerPosition.x, _relactiveFingerPosition.y );
				break;
			case 'touchmove' :
				//指の場所がスプライトの上にあるとき、ontouchmoveメソッドを呼び出す
				if ( _relactiveFingerPosition ) this.ontouchmove( _relactiveFingerPosition.x, _relactiveFingerPosition.y );
				break;
			case 'touchend' :
				//ontouchendメソッドを呼び出す
				this.ontouchend( _relactiveFingerPosition.x, _relactiveFingerPosition.y );
				break;
		}
	} //assignTouchevent() 終了

	/**
	 * 常に呼び出され、スプライトの移動やイベントの発生などに使うメソッド。空なのはオーバーライド（上書き）して使うため
	 */
	onenterframe() {}

	/**
	 * タッチされたときに呼び出される
	 */
	ontouchstart() {}

	/**
	 * 指が動かされたときに呼び出される
	 */
	ontouchmove() {}

	/**
	 * 指がはなされたときに呼び出される
	 */
	ontouchend() {}

}

src/dpad.js

'use strict'

//Spriteクラスをインポートする
import Sprite from './sprite.js';

/**
 * D-Padに関してのクラス
 */
export default class DPad extends Sprite {

	/**
	 * 引数
	 * img : 画像ファイルまでのパス
	 * size : D-Padの大きさ
	 */
	constructor( img, size ) {
		//親クラスのコンストラクタを呼び出す
		super( img, size, size );
		//this.sizeに、指定されたサイズを代入
		this.size = size;
		//方向ボタンが押されているかどうか
		this.arrow = {
			up: false,
			down: false,
			left: false,
			right: false
		};
	} //constructor() 終了

	/**
	 * 画面がタッチされたときに呼ばれるメソッド
	 *
	 * 引数
	 * fingerPositionX: タッチされたX座標
	 * fingerPositionY: タッチされたY座標
	 */
	ontouchstart( fingerPositionX, fingerPositionY ) {
		//_applyToDPadメソッドを呼び出す
		this._applyToDPad( fingerPositionX, fingerPositionY );
	} //ontouchstart() 終了

	/**
	 * タッチされた指が動かされたときに呼ばれるメソッド
	 *
	 * 引数
	 * fingerPositionX: 指が触れている部分のX座標
	 * fingerPositionY: 指が触れている部分のY座標
	 */
	ontouchmove( fingerPositionX, fingerPositionY ) {
		//_applyToDPadメソッドを呼び出す
		this._applyToDPad( fingerPositionX, fingerPositionY );
	} //ontouchmove() 終了

	/**
	 * 画面から指がはなされたときに呼ばれるメソッド
	 *
	 * 引数
	 * fingerPositionX: 指がはなされた部分のX座標
	 * fingerPositionY: 指がはなされた部分のY座標
	 */
	ontouchend( fingerPositionX, fingerPositionY ) {
		//画像を切り替える
		this.frame = 0;
		//ボタンを初期化
		this.arrow = {
			up: false,
			down: false,
			left: false,
			right: false
		};
	} //ontouchend() 終了

	/**
	* D-Padに反映させる
	*
	* 引数
	* fingerPositionX: 指が触れている部分のX座標
	* fingerPositionY: 指が触れている部分のY座標
	*/
	_applyToDPad( fingerPositionX, fingerPositionY ) {
		//画像を切り替える
		this.frame = 1;
		//ボタンを初期化
		this.arrow = {
			up: false,
			down: false,
			left: false,
			right: false
		};
		//上ボタンが押されたとき、arrow.upをtrueにし、D-Padの角度を0度にする
		if ( fingerPositionX > fingerPositionY && fingerPositionX < this.size - fingerPositionY ) {
			this.arrow.up = true;
			this.rotate = 0;
		}
		//下ボタンが押されたとき、arrow.downをtrueにし、D-Padの角度を180度にする
		else if ( fingerPositionX > this.size - fingerPositionY && fingerPositionX < fingerPositionY ) {
			this.arrow.down = true;
			this.rotate = 180;
		}
		//左ボタンが押されたとき、arrow.leftをtrueにし、D-Padの角度を270度にする
		else if ( fingerPositionY > fingerPositionX && fingerPositionY < this.size - fingerPositionX ) {
			this.arrow.left = true;
			this.rotate = 270;
		}
		//右ボタンが押されたとき、arrow.rightをtrueにし、D-Padの角度を90度にする
		else if ( fingerPositionY > this.size - fingerPositionX && fingerPositionY < fingerPositionX ) {
			this.arrow.right = true;
			this.rotate = 90;
		}
	} //_applyToDPad() 終了
}

src/scene.js

'use strict'

//Sprite、Text、Tilemapクラスをインポートする
import Sprite from './sprite.js';
import Text from './text.js';
import Tilemap from './tilemap.js';

/**
 * シーンに関してのクラス
 */
export default class Scene {

	constructor() {
		this.objs = [];
	} //constructor() 終了

	/**
	 * シーンにオブジェクトを追加するときに呼び出されるメソッド
	 *
	 * 引数
	 * obj : スプライトやテキストなど（オブジェクト）
	 */
	add( obj ) {
		//引数がSprite、Text、Tilemapのとき、this.objsの末尾にobjを追加
		if ( obj instanceof Sprite || obj instanceof Text || obj instanceof Tilemap ) this.objs.push( obj );
		//引数がSprite、Text、Tilemapでなければ、コンソールにエラーを表示
		else console.error( 'Sceneに追加できるのはSprite、Text、Tilemapだけだよ！' );
	} //add() 終了

	/**Gameクラスのメインループからずっと呼び出され続ける
	 *
	 * 引数
	 * canvas : 紙（キャンバス）
	 */
	update( canvas ) {
		//スプライトを動かしたり、なにかのきっかけでイベントを発生させたりするために使うメソッドを呼び出す
		this.onenterframe();
	} //update() 終了

	/**
	 * タッチイベントを割り当てるためのメソッド
	 *
	 * 引数
	 * eventType : イベントのタイプ
	 * fingerPosition : 指の位置
	 */
	assignTouchevent( eventType, fingerPosition ) {
		//イベントのタイプによって呼び出すメソッドを変える
		switch ( eventType ) {
			case 'touchstart' :
				//現在のシーンのtouchstartメソッドを呼び出す
				this.ontouchstart( fingerPosition.x, fingerPosition.y );
				break;
			case 'touchmove' :
				//現在のシーンのtouchmoveメソッドを呼び出す
				this.ontouchmove( fingerPosition.x, fingerPosition.y );
				break;
			case 'touchend' :
				//現在のシーンのtouchendメソッドを呼び出す
				this.ontouchend( fingerPosition.x, fingerPosition.y );
				break;
		}

		//シーンにあるオブジェクトの数だけ繰り返す
		for ( let i=0; i<this.objs.length; i++ ) {
			//シーンにあるオブジェクトの、タッチイベントを割り当てるためのメソッドを呼び出す
			this.objs[i].assignTouchevent( eventType, fingerPosition );
		}
	} //assignTouchevent() 終了

	/**
	 * 常に呼び出され、スプライトの移動やイベントの発生などに使うメソッド。空なのはオーバーライド（上書き）して使うため
	 */
	onenterframe() {}

	/**
	 * タッチされたときに呼び出される
	 */
	ontouchstart() {}

	/**
	 * 指が動かされたときに呼び出される
	 */
	ontouchmove() {}

	/**
	 * 指がはなされたときに呼び出される
	 */
	ontouchend() {}

	/**
	 * シーンが切り替わったときに呼び出される
	 */
	onchangescene() {}

}

src/text.js

'use strict'

/**
 * テキストに関してのクラス
 */
export default class Text {

	/**
	 * 引数
	 * text : 表示する文字列
	 */
	constructor( text ) {
		//this.textに表示する文字列を代入
		this.text = text;
		//デフォルトのフォントを指定
		this.font = "游ゴシック体, 'Yu Gothic', YuGothic, sans-serif";
		//テキストを表示する位置
		this.x = this.y = 0;
		//数値によってテキストを移動させることができる（移動速度）
		this.vx = this.vy = 0;
		//テキストのベースラインの位置
		this.baseline = 'top';
		//テキストのサイズ
		this.size = 20;
		//テキストの色
		this.color = '#ffffff';
		//テキストの太さ
		this.weight = 'normal';
		//テキストの幅
		this._width = 0;
		//テキストの高さ
		this._height = 0;
		//テキストを左右中央の位置にするかどうか
		this._isCenter = false;
		//テキストを上下中央の位置にするかどうか
		this._isMiddle = false;
	} //constructor() 終了

	/**
	 * 呼び出すと、テキストを左右中央の位置に配置できるメソッド
	 */
	center() {
		//テキストを左右中央の位置に配置するかどうかのプロパティにtrueを代入
		this._isCenter = true;
		//thisを返すことで、メソッドをチェーンにすることができる
		return this;
	} //center() 終了

	/**
	 * 呼び出すと、テキストを上下中央の位置に配置できるメソッド
	 */
	middle() {
		//テキストのベースラインの位置を変更
		this.baseline = 'middle'
		//テキストを上下中央の位置に配置するかどうかのプロパティにtrueを代入
		this._isMiddle = true;
		//thisを返すことで、メソッドをチェーンにすることができる
		return this;
	} //middle() 終了

	/**Gameクラスのメインループからずっと呼び出され続ける
	 *
	 * 引数
	 * canvas : 紙（キャンバス）
	 */
	update( canvas ) {
		//画家さん（コンテキスト）を呼ぶ
		const _ctx = canvas.getContext( '2d' );

		//テキストの太さ、サイズ、フォントを設定
		_ctx.font = `${this.weight} ${this.size}px ${this.font}`;
		//テキストの色を設定
		_ctx.fillStyle = this.color;
		//テキストのベースラインの位置を設定
		_ctx.textBaseline = this.baseline;

		//テキストの幅を計算
		this._width = _ctx.measureText( this.text ).width;
		//テキストの高さを計算
		this._height = Math.abs( _ctx.measureText( this.text ).actualBoundingBoxAscent ) + Math.abs( _ctx.measureText( this.text ).actualBoundingBoxDescent );

		//テキストを左右中央に配置したいときの、X座標の計算
		if ( this._isCenter ) this.x = ( canvas.width - this._width ) / 2;
		//テキストを上下中央に配置したいときの、Y座標の計算
		if ( this._isMiddle ) this.y = canvas.height / 2;

		//画像などを画面に表示するためのメソッドを呼び出す
		this.render( canvas, _ctx );
		//テキストを動かしたりするために使うメソッドを呼び出す
		this.onenterframe();

		//テキストを移動する
		this.x += this.vx;
		this.y += this.vy;
	} //update() 終了

	/**
	 * テキストを画面に表示するためのメソッド
	 *
	 * 引数
	 * canvas : 紙（キャンバス）
	 */
	render( canvas, ctx ) {
		//画面の外にテキストがあるとき、表示しないようにする
		if ( this.x < -1 * this._width || this.x > canvas.width ) return;
		if ( this.y < -1 * this._height || this.y > canvas.height + this._height ) return;
		//テキストを表示
		ctx.fillText( this.text, this.x, this.y );
	} //render() 終了

	/**
	 * タッチした指の、相対的な位置（タッチしたオブジェクトの左上からの位置）を取得できるメソッド
	 *
	 * 引数
	 * fingerPositionX : 指の位置の座標
	 */
	getRelactiveFingerPosition( fingerPosition ) {
		//タッチしたテキストの、左上部分からの座標。テキストのbaselineによって位置を調節する
		let _relactiveFingerPosition = {
			x: fingerPosition.x - this.x,
			y: fingerPosition.y - this.y + this._height
		};
		if ( this.baseline === 'top' || this.baseline === 'hanging' ) {
			_relactiveFingerPosition = {
				x: fingerPosition.x - this.x,
				y: fingerPosition.y - this.y
			};
		}
		if ( this.baseline === 'middle' ) {
			_relactiveFingerPosition = {
				x: fingerPosition.x - this.x,
				y: fingerPosition.y - this.y + this._height/2
			};
		}

		//数値が範囲内にあるかどうかを取得できる関数
		const inRange = ( num, min, max ) => {
			//数値が範囲内にあるかどうか
			const _inRange = ( min <= num && num <= max );
			//結果を返す
			return _inRange;
		}

		//タッチした位置がオブジェクトの上の場合、相対的な位置を返す
		if ( inRange( _relactiveFingerPosition.x, 0, this._width ) && inRange( _relactiveFingerPosition.y, 0, this._height ) ) return _relactiveFingerPosition;
		//オブジェクトから外れていれば、falseを返す
		return false;
	} //getRelactiveFingerPosition() 終了

	/**
	 * タッチイベントを割り当てるためのメソッド
	 *
	 * 引数
	 * eventType : イベントのタイプ
	 * fingerPosition : 指の位置
	 */
	assignTouchevent( eventType, fingerPosition ) {
		//相対的な座標（タッチしたオブジェクトの、左上からの座標）を取得
		const _relactiveFingerPosition = this.getRelactiveFingerPosition( fingerPosition );

		//イベントのタイプによって呼び出すメソッドを変える
		switch ( eventType ) {
			case 'touchstart' :
				//指の場所がテキストの上にあるとき、ontouchstartメソッドを呼び出す
				if ( _relactiveFingerPosition ) this.ontouchstart( _relactiveFingerPosition.x, _relactiveFingerPosition.y );
				break;
			case 'touchmove' :
				//指の場所がテキストの上にあるとき、ontouchmoveメソッドを呼び出す
				if ( _relactiveFingerPosition ) this.ontouchmove( _relactiveFingerPosition.x, _relactiveFingerPosition.y );
				break;
			case 'touchend' :
				//ontouchendメソッドを呼び出す
				this.ontouchend( _relactiveFingerPosition.x, _relactiveFingerPosition.y );
				break;
		}
	} //assignTouchevent() 終了

	/**
	 * 常に呼び出されるメソッド。空なのはオーバーライド（上書き）して使うため
	 */
	onenterframe() {}

	/**
	 * タッチされたときに呼び出される
	 */
	ontouchstart() {}

	/**
	 * 指が動かされたときに呼び出される
	 */
	ontouchmove() {}

	/**
	 * 指がはなされたときに呼び出される
	 */
	ontouchend() {}

}

src/tilemap.js

'use strict'

//Tileクラスをインポートする
import Tile from './tile.js';

/**
 * タイルマップに関するクラス
 */
export default class Tilemap {

	/**
	 * 引数
	 * img : 画像ファイルまでのパス
	 * size : タイルひとつの大きさ（一辺の長さ）
	 *
	 * タイルひとつは正方形にする
	 */
	constructor( img, size ) {
		//Imageのインスタンスを作成
		this.img = new Image();
		//this.img.srcに画像ファイルまでのパスを代入
		this.img.src = img;
		//画像の初期位置
		this.x = this.y = 0;
		//数値によってタイルマップを移動させることができる（移動速度）
		this.vx = this.vy = 0;
		//引数sizeが指定されていない場合、this.sizeに32を代入
		this.size = size || 32;
		//二次元配列で数値を入力すると、マップをつくることができる
		this.data = [];
		//タイルマップに重ねるように置きたいタイルを追加できる
		this.tiles = [];
		//壁や天井など、移動できないタイルを指定できる
		this.obstacles = [0];
	} //constructor() 終了

	/**
	 * タイルマップの上にタイルを重ねるように追加できるメソッド
	 *
	 * 引数
	 * tile : 追加したいタイル
	 */
	add( tile ) {
		//引数がTileのとき
		if ( tile instanceof Tile ) {
			//タイルのマップ座標を計算
			tile.mapX = tile.x / this.size;
			tile.mapY = tile.y / this.size;
			//もし、タイルがタイルマップと同期していないときは、マップ座標を計算しなおす
			if ( !tile.isSynchronize ) {
				tile.mapX = ( tile.x - this.x ) / this.size;
				tile.mapY = ( tile.y - this.y ) / this.size;
			}
			//this.tilesの末尾にtileを追加
			this.tiles.push( tile );
		}
		//引数がTileでなければ、コンソールにエラーを表示
		else console.error( 'Tilemapに追加できるのはTileだけだよ！' );
	} //add() 終了

	/**
	 * 指定された場所のタイルが、移動できないかどうかを取得できるメソッド
	 *
	 * 引数
	 * mapX : タイルマップ上のX座標
	 * mapY : タイルマップ上のY座標
	 */
	hasObstacle( mapX, mapY ) {
		//指定された場所のタイルが、壁や天井など、移動できないかどうか
		const _isObstacleTile = this.obstacles.some( obstacle => obstacle === this.data[mapY][mapX] );
		//移動できないかどうかを返す
		return _isObstacleTile;
	} //hasObstacle() 終了

	/**Gameクラスのメインループからずっと呼び出され続ける
	 *
	 * 引数
	 * canvas : 紙（キャンバス）
	 */
	update( canvas ) {
		//画像などを画面に表示するためのメソッドを呼び出す
		this.render( canvas );
		//常に呼び出される、オーバーライド用のメソッドを呼び出す
		this.onenterframe();
		//タイルマップを移動する
		this.x += this.vx;
		this.y += this.vy;

		//タイルの数だけ繰り返す
		for ( let i=0; i<this.tiles.length; i++ ) {
			//タイルとタイルマップの位置を同期させるとき
			if ( this.tiles[i].isSynchronize ) {
				//タイルマップの位置の分、それぞれのタイルの位置をずらす
				this.tiles[i].shiftX = this.x;
				this.tiles[i].shiftY = this.y;
			}
			//それぞれのタイルのupdateメソッドを呼び出す
			this.tiles[i].update( canvas );

			//タイルのマップ座標を計算
			this.tiles[i].mapX = this.tiles[i].x / this.size;
			this.tiles[i].mapY = this.tiles[i].y / this.size;
			//もし、タイルがタイルマップと同期していないときは、マップ座標を計算しなおす
			if ( !this.tiles[i].isSynchronize ) {
				this.tiles[i].mapX = ( this.tiles[i].x - this.x ) / this.size;
				this.tiles[i].mapY = ( this.tiles[i].y - this.y ) / this.size;
			}
		}
	} //update() 終了

	/**
	 * Gameクラスのメインループからずっと呼び出され続ける。画像を表示したりするためのメソッド
	 *
	 * 引数
	 * canvas : 紙（キャンバス）
	 */
	render( canvas ) {
		//マップの縦方向の数だけ繰り返す
		for (let y=0; y<this.data.length; y++) {
			//タイルの縦の位置
			const _tileY = this.size * y + this.y;
			//タイルが、画面から縦にはみ出しているとき、この下をスキップして、次から繰り返し
			if ( _tileY < -1 * this.size || _tileY > canvas.height ) continue;

			//マップの横方向の数だけ繰り返す
			for (let x=0; x<this.data[y].length; x++) {
				//タイルの横の位置
				const _tileX = this.size * x + this.x
				//タイルが、画面から横にはみ出しているとき、この下をスキップして、次から繰り返し
				if ( _tileX < -1 * this.size || _tileX > canvas.width ) continue;

				//X方向に、何番目の画像か
				const _frameX = this.data[y][x] % ( this.img.width / this.size );
				//Y方向に、何番目の画像か
				const _frameY = ~~( this.data[y][x] / ( this.img.width / this.size ) );

				//画家さん（コンテキスト）を呼ぶ
				const _ctx = canvas.getContext( '2d' );

				//タイルを表示
				_ctx.drawImage(
					this.img,
					this.size * _frameX,
					this.size * _frameY,
					this.size,
					this.size,
					_tileX,
					_tileY,
					this.size,
					this.size
				);
			}
		}
	} //render() 終了

	/**
	 * タッチした指の、相対的な位置（タッチしたオブジェクトの左上からの位置）を取得できるメソッド
	 *
	 * 引数
	 * fingerPositionX : 指の位置の座標
	 */
	getRelactiveFingerPosition( fingerPosition ) {
		//タッチしたものの、左上部分からの座標
		const _relactiveFingerPosition = {
			x: fingerPosition.x - this.x,
			y: fingerPosition.y - this.y
		};

		//数値が範囲内にあるかどうかを取得できる関数
		const inRange = ( num, min, max ) => {
			//数値が範囲内にあるかどうか
			const _inRange = ( min <= num && num <= max );
			//結果を返す
			return _inRange;
		}

		//タッチした位置がオブジェクトの上の場合、相対的な位置を返す
		if ( inRange( _relactiveFingerPosition.x, 0, this.size*this.data[0].length ) && inRange( _relactiveFingerPosition.y, 0, this.size*this.data.length ) ) return _relactiveFingerPosition;
		//オブジェクトから外れていれば、falseを返す
		return false;
	} //getRelactiveFingerPosition() 終了

	/**
	 * タッチイベントを割り当てるためのメソッド
	 *
	 * 引数
	 * eventType : イベントのタイプ
	 * fingerPosition : 指の位置
	 */
	assignTouchevent( eventType, fingerPosition ) {
		//相対的な座標（タッチしたオブジェクトの、左上からの座標）を取得
		const _relactiveFingerPosition = this.getRelactiveFingerPosition( fingerPosition );

		//目的のオブジェクト以外の場所がタッチされた場合は、この下をスキップして、次から繰り返し
		if ( !_relactiveFingerPosition ) return;

		//イベントのタイプによって呼び出すメソッドを変える
		switch ( eventType ) {
			case 'touchstart' :
				//現在のシーンのオブジェクトの、touchstartメソッドを呼び出す
				this.ontouchstart( _relactiveFingerPosition.x, _relactiveFingerPosition.y );
				break;
			case 'touchmove' :
				//現在のシーンのオブジェクトの、touchmoveメソッドを呼び出す
				this.ontouchmove( _relactiveFingerPosition.x, _relactiveFingerPosition.y );
				break;
			case 'touchend' :
				//現在のシーンのオブジェクトの、touchendメソッドを呼び出す
				this.ontouchend( _relactiveFingerPosition.x, _relactiveFingerPosition.y );
				break;
		}

		//タイルマップの上の、タイルの数だけ繰り返す
		for ( let i=0; i<this.tiles.length; i++ ) {
			//タイルマップの上のタイルの、タッチイベントを割り当てるためのメソッドを呼び出す
			this.tiles[i].assignTouchevent( eventType, fingerPosition );
		}
	} //assignTouchevent() 終了

	/**
	 * 常に呼び出されるメソッド。空なのはオーバーライド（上書き）して使うため
	 */
	onenterframe() {}

	/**
	 * タッチされたときに呼び出される
	 */
	ontouchstart() {}

	/**
	 * 指が動かされたときに呼び出される
	 */
	ontouchmove() {}

	/**
	 * 指がはなされたときに呼び出される
	 */
	ontouchend() {}

}

src/party.js

'use strict'

/**
 * パーティに関してのクラス
 */
export default class Party {

	/**
	 * 引数には、パーティのメンバーを制限なく入れることができる
	 */
	constructor() {
		//引数をthis.memberに追加
		this.member = arguments;
		//パーティの移動速度
		this.speed = 1;
	} //constructor() 終了

	/**
	 * 先頭以外のキャラの、向きを設定するためのメソッド
	 */
	setMemberDirection() {
		//先頭のキャラ以外の数だけ繰り返す
		for ( let i=1; i<this.member.length; i++ ) {
			//ひとつ前のキャラよりもX座標が大きいとき、左向きにする
			if ( this.member[i-1].mapX < this.member[i].mapX ) this.member[i].direction = 1;
			//ひとつ前のキャラよりもX座標が小さいとき、右向きにする
			else if ( this.member[i-1].mapX > this.member[i].mapX ) this.member[i].direction = 2;
			//ひとつ前のキャラよりもY座標が大きいとき、後ろ向きにする
			else if ( this.member[i-1].mapY < this.member[i].mapY ) this.member[i].direction = 3;
			//ひとつ前のキャラよりもY座標が小さいとき、前向きにする
			else if ( this.member[i-1].mapY > this.member[i].mapY ) this.member[i].direction = 0;
		}
	} //setMemberDirection() 終了

	/**
	 * 先頭以外のキャラの、移動速度を設定するためのメソッド
	 *
	 * 引数
	 * direction : 先頭のキャラの移動方向
	 */
	setMemberVelocity( direction ) {
		//先頭以外のキャラの数だけ繰り返す
		for ( let i=1; i<this.member.length; i++ ) {
			//ひとつ前のキャラとX座標が同じときの、計算用変数
			let _samePrevX;
			//ひとつ前のキャラとY座標が同じときの、計算用変数
			let _samePrevY;
			//ひとつ前のキャラよりもX座標が小さいときの、計算用変数
			let _lessThanPrevX;
			//ひとつ前のキャラよりもY座標が小さいときの、計算用変数
			let _lessThanPrevY;
			//ひとつ前のキャラよりもX座標大きいときの、計算用変数
			let _moreThanPrevX;
			//ひとつ前のキャラよりもY座標が大きいときの、計算用変数
			let _moreThanPrevY;
			//ひとつ前のキャラよりも、タイルひとつ分以上離れているときの計算用変数
			let _moreThanOneTile;

			//先頭のキャラの移動方向によって、それぞれの変数に値を代入する
			if ( direction === 'up' ) {
				_samePrevX = 0;
				_samePrevY = 1
				_lessThanPrevX = -1;
				_lessThanPrevY = 0;
				_moreThanPrevX = 1;
				_moreThanPrevY = 2;
				_moreThanOneTile = -1;
			}
			else if ( direction === 'down' ) {
				_samePrevX = 0;
				_samePrevY = -1;
				_lessThanPrevX = -1;
				_lessThanPrevY = -2;
				_moreThanPrevX = 1;
				_moreThanPrevY = 0;
				_moreThanOneTile = 1;
			}
			else if ( direction === 'left' ) {
				_samePrevX = 1;
				_samePrevY = 0;
				_lessThanPrevX = 0;
				_lessThanPrevY = -1;
				_moreThanPrevX = 2;
				_moreThanPrevY = 1;
				_moreThanOneTile = -1;
			}
			else if ( direction === 'right' ) {
				_samePrevX = -1;
				_samePrevY = 0;
				_lessThanPrevX = -2;
				_lessThanPrevY = -1;
				_moreThanPrevX = 0;
				_moreThanPrevY = 1;
				_moreThanOneTile = 1;
			}

			//ひとつ前のキャラとX,Y座標が同じとき
			if ( this.member[i-1].mapX === this.member[i].mapX ) this.member[i].vx = this.speed * _samePrevX;
			if ( this.member[i-1].mapY === this.member[i].mapY ) this.member[i].vy = this.speed * _samePrevY;

			//ひとつ前のキャラのほうが、X座標が小さいとき
			if ( this.member[i-1].mapX < this.member[i].mapX ) {
				this.member[i].vx = this.speed * _lessThanPrevX;
				//先頭のキャラの移動方向が左で、ひとつ前のキャラとのX座標の差が、タイルひとつよりも大きいとき
				if ( direction === 'left' && this.member[i].mapX - this.member[i-1].mapX > 1 ) this.member[i].vx = this.speed * _moreThanOneTile;
			}
			//ひとつ前のキャラのほうが、X座標が大きいとき
			if ( this.member[i-1].mapX > this.member[i].mapX ) {
				this.member[i].vx = this.speed * _moreThanPrevX;
				//先頭のキャラの移動方向が右で、ひとつ前のキャラとのX座標の差が、タイルひとつよりも大きいとき
				if ( direction === 'right' && this.member[i-1].mapX - this.member[i].mapX > 1 ) this.member[i].vx = this.speed * _moreThanOneTile;
			}
			//ひとつ前のキャラのほうが、Y座標が小さいとき
			if ( this.member[i-1].mapY < this.member[i].mapY ) {
				this.member[i].vy = this.speed * _lessThanPrevY;
				//先頭のキャラの移動方向が上で、ひとつ前のキャラとのY座標の差が、タイルひとつよりも大きいとき
				if ( direction === 'up' && this.member[i].mapY - this.member[i-1].mapY > 1 ) this.member[i].vy = this.speed * _moreThanOneTile;
			}
			//ひとつ前のキャラのほうが、Y座標が大きいとき
			if ( this.member[i-1].mapY > this.member[i].mapY ) {
				this.member[i].vy = this.speed * _moreThanPrevY;
				//先頭のキャラの移動方向が下で、ひとつ前のキャラとのY座標の差が、タイルひとつよりも大きいとき
				if ( direction === 'down' && this.member[i-1].mapY - this.member[i].mapY > 1 ) this.member[i].vy = this.speed * _moreThanOneTile;
			}
		}
	} //setMemberVelocity() 終了
}

src/game.js

'use strict'

//Sound、Sceneクラスをインポートする
import Sound from './sound.js';
import Scene from './scene.js';

/**
 * ゲームづくりの基本となるクラス
 */
export default 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.scenes = [];
		//現在のシーンをいれておくためのもの
		this.currentScene;

		//音声を入れておくためのもの
		this.sounds = [];
		//画面がすでにタッチされたかどうか
		this._isAlreadyTouched = false;
		//設定が終わったかどうか
		this._hasFinishedSetting = false;

		//プリロードは、ゲームのメイン部分が始まる前に動かしたいので、それを入れておくための配列
		this._preloadPromises = [];

		//現在のシーンを一時的に入れておくためのもの。シーンが切り替わったかどうかを判断するのに使う
		this._temporaryCurrentScene;

		//ゲームに使用するキーと、そのキーが押されているかどうかを入れるための連想配列
		//例 { up: false, down: false }
		this.input = {};
		//登録されたキーに割り当てられたプロパティ名と、キー名を、関連づけるための連想配列
		//例 { up: "ArrowUp", down: "ArrowDown" }
		this._keys = {};
	} //constructor() 終了

	/**
	 * プリロードのためのメソッド
	 *
	 * 引数には、使いたい素材を制限なく入れることができる
	 */
	preload() {
		//引数の素材を_assetsに追加
		const _assets = arguments;
		//素材の数だけ繰り返す
		for ( let i=0; i<_assets.length; i++ ) {
			//_preloadPromises[i]に、あなたはプリロードのプロミス（非同期処理をやりやすくする）だよ、と教える
			this._preloadPromises[i] = new Promise( ( resolve, reject ) => {
				//もしそのファイルの拡張子が、jpg、jpeg、png、gifのどれかのとき
				if ( _assets[i].match( /\.(jpg|jpeg|png|gif)$/i ) ) {
					//_imgに、あなたは画像ですよ、と教える
					let _img = new Image();
					//img.srcに、引数で指定した画像ファイルを代入
					_img.src = _assets[i];

					//画像が読み込み終わったら、成功ということで、resolve()を呼び出す
					_img.addEventListener( 'load', () => {
						resolve();
					}, { passive: true, once: true } );

					//画像が読み込めなければ、エラーということで、reject()を呼び出す
					_img.addEventListener( 'error', () => {
						reject( `「${_assets[i]}」は読み込めないよ！` );
					}, { passive: true, once: true } );
				}
				//もしそのファイルの拡張子が、wav、wave、mp3、oggのどれかのとき
				else if ( _assets[i].match( /\.(wav|wave|mp3|ogg)$/i ) ) {
					//_soundに、あなたはサウンドですよ、と教える
					let _sound = new Sound();
					//_sound.srcに、引数で指定した音声ファイルを代入
					_sound.src = _assets[i];
					//this.soundsに、読み込んだ音声を入れておく
					this.sounds[ _assets[i] ] = _sound;
					//音声を再生する準備をする
					this.sounds[ _assets[i] ].load();

					//サウンドが読み込み終わったら、成功ということで、resolve()を呼び出す
					_sound.addEventListener( 'canplaythrough', () => {
						resolve();
					}, { passive: true, once: true } );

					//サウンドが読み込めなければ、エラーということで、reject()を呼び出す
					_sound.addEventListener( 'error', () => {
						reject( `「${_assets[i]}」は読み込めないよ！` );
					}, { passive: true, once: true } );
				}
				//ファイルの拡張子がどれでもないとき
				else {
					//エラーということで、reject()を呼び出す
					reject( `「${_assets[i]}」の形式は、プリロードに対応していないよ！` );
				}
			} );
		}
	} //preload() 終了

	/**
	 * プリロードなどの設定が終わったあとに実行する
	 *
	 * 引数
	 * callback : プリロードなどの設定が終わったあとに実行したいプログラム。今回はゲームのメイン部分
	 */
	main( callback ) {
		//ゲームが始まる前に実行しておきたいもの（今回はプリロード）が、すべて成功したあとに、実行したかったゲームのメイン部分「callback()」を実行
		//失敗したときはコンソールにエラーを表示
		Promise.all( this._preloadPromises ).then( result => {
			callback();
		} ).catch( reject => {
			console.error( reject );
		} );
	} //main() 終了

	/**
	 * startメソッドを呼び出すことで、メインループが開始される
	 */
	start() {
		//デフォルトのキーバインドを登録する（使いたいキーを登録する）
		this.keybind( 'up', 'ArrowUp' );
		this.keybind( 'down', 'ArrowDown' );
		this.keybind( 'right', 'ArrowRight' );
		this.keybind( 'left', 'ArrowLeft' );

		//現在のシーン（currentScene）になにも入っていないときは、scenes[0]を代入
		this.currentScene = this.currentScene || this.scenes[0];

		//ゲームがはじまったときと、ブラウザのサイズが変わったときに呼ばれる。縦横の比を変えずに、canvasを拡大縮小できる
		const _resizeEvent = () => {
			//ブラウザとcanvasの比率の、縦と横を計算し、小さいほうを_ratioに代入する
			const _ratio = Math.min( innerWidth / this.canvas.width, innerHeight / this.canvas.height );
			//canvasのサイズを、ブラウザに合わせて変更する
			this.canvas.style.width = this.canvas.width*_ratio + 'px';
			this.canvas.style.height = this.canvas.height*_ratio + 'px';
		} //_resizeEvent() 終了

		//ブラウザのサイズが変更されたとき、_resizeを呼び出す
		addEventListener( 'resize', _resizeEvent, { passive: true } );
		//_resizeを呼び出す
		_resizeEvent();

		//メインループを呼び出す
		this._mainLoop();

		//ユーザーの操作を待つためのメソッドを呼び出す
		this._waitUserManipulation();
		//イベントリスナーをセットする（削除）
		//this._setEventListener();（削除）
	} //start() 終了

	/**
	 * イベントリスナーをセットするためのメソッド
	 */
	_setEventListener() {
		//なにかキーが押されたときと、はなされたときに呼ばれる
		const _keyEvent = e => {
			//デフォルトのイベントを発生させない
			e.preventDefault();
			//_keysに登録された数だけ繰り返す
			for ( let key in this._keys ) {
				//イベントのタイプによって呼び出すメソッドを変える
				switch ( e.type ) {
					case 'keydown' :
						//押されたキーが、登録されたキーの中に存在するとき、inputのそのキーをtrueにする
						if ( e.key === this._keys[key] ) this.input[key] = true;
						break;
					case 'keyup' :
						//押されたキーが、登録されたキーの中に存在するとき、inputのそのキーをfalseにする
						if ( e.key === this._keys[key] ) this.input[key] = false;
						break;
				}
			}
		}
		//なにかキーが押されたとき
		addEventListener( 'keydown', _keyEvent, { passive: false } );
		//キーがはなされたとき
		addEventListener( 'keyup', _keyEvent, { passive: false } );

		//画面がタッチされたり、指が動いたりしたときなどに呼ばれる
		//シーンや、スプライトなどのオブジェクトの左上端から見た、それぞれの指の位置を取得できるようになる
		const _touchEvent = e => {
			//デフォルトのイベントを発生させない
			e.preventDefault();
			//タッチされた場所などの情報を取得
			const _touches = e.changedTouches[0];
			//ターゲット（今回はcanvas）のサイズ、ブラウザで表示されている部分の左上から見てどこにあるか、などの情報を取得
			const _rect = _touches.target.getBoundingClientRect();
			//タッチされた場所を計算
			const _fingerPosition = {
				x: ( _touches.clientX - _rect.left ) / _rect.width * this.canvas.width,
				y: ( _touches.clientY - _rect.top ) / _rect.height * this.canvas.height
			};
			//イベントのタイプを_eventTypeに代入
			const _eventType = e.type;
			//タッチイベントを割り当てるためのメソッドを呼び出す
			this.currentScene.assignTouchevent( _eventType, _fingerPosition );
		} //_touchEvent() 終了

		//タッチされたとき
		this.canvas.addEventListener( 'touchstart', _touchEvent, { passive: false } );
		//指が動かされたとき
		this.canvas.addEventListener( 'touchmove', _touchEvent, { passive: false } );
		//指がはなされたとき
		this.canvas.addEventListener( 'touchend', _touchEvent, { passive: false } );
	} //_setEventListener() 終了

	/**
	 * ユーザーからの操作を待つためのメソッド
	 */
	_waitUserManipulation() {
		//すべての音声を再生する
		const _playAllSounds = e => {
			//デフォルトのイベントを発生させない
			e.preventDefault();
			//画面にタッチされたかどうかの変数をtrueにする
			this._isAlreadyTouched = true;

			//音声を再生するためのプロミスを入れておく配列
			const _playPromises = [];

			//this.soundsの数だけ繰り返す
			//この繰り返しは、読み込まれた音声を、最初に全て同時に再生してしまおうというもの
			//こうすることで、スマホのブラウザなどの、音声を自動で流せないという制限を解決できる
			for ( let sound in this.sounds ) {
				//音声を再生する準備をする
				this.sounds[ sound ].load();
				//音声をミュートにする
				this.sounds[ sound ].muted = true;
				//音声を再生するメソッドはPromiseを返してくれるので、soundPromiseに追加
				_playPromises.push( this.sounds[ sound ].play() );
			}

			//Promiseが成功か失敗かのチェーン
			Promise.all( _playPromises ).then( () => {
				//成功した場合は全ての音をストップする
				for ( let sound in this.sounds ) {
					this.sounds[ sound ].stop();
				}
			} ).catch( err => {
				//失敗した場合はエラーを表示
				console.log( err );
			} );

			//音声を再生するときのエラーを防ぐために、すこしだけ待つ
			setTimeout( () => {
				//イベントリスナーをセットする
				this._setEventListener();
				this._hasFinishedSetting = true;
			}, 2000 );
		} //_playAllSounds() 終了

		//タッチされたときや、なにかキーが押されたとき、_playAllSoundsを呼び出す
		this.canvas.addEventListener( 'touchstart', _playAllSounds, { passive: false, once: true } );
		addEventListener( 'keydown', _playAllSounds, { passive: false, once: true } );
	} //_waitUserManipulation() 終了

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

		//もし、ユーザーがまだ画面をタッチしていない（画面を操作していない）とき、スタートパネルを表示
		if ( !this._isAlreadyTouched ) this.startPanel();
		//設定がすでに終了しているとき
		else if ( this._hasFinishedSetting ) {
			//現在のシーンのupdateメソッドを呼び出す
			this.currentScene.update();

			//一時的に入れておいたシーンが現在のシーンではないとき（シーンが切り替わったとき）、現在のシーンのonchangesceneメソッドを呼び出す
			if ( this._temporaryCurrentScene !== this.currentScene ) this.currentScene.onchangescene();

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

			//現在のシーンを覚えておいてもらう
			this._temporaryCurrentScene = this.currentScene;
		}

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

	/**
	 * ゲームを開始して一番最初に表示される画面をつくるメソッド。ここでユーザーに操作してもらい、音声を出せるようにする
	 */
	startPanel() {
		//表示したいテキストを_textに代入
		const _text = 'タップ、またはなにかキーを押してね！'
		//表示したいテキストのフォントを_fontに代入
		const _font = "游ゴシック体, 'Yu Gothic', YuGothic, sans-serif";
		//フォントサイズは、ゲーム画面の横幅を20で割ったもの。（今回は表示したい文字が18文字なので、左右の余白も考え、20で割る）
		const _fontSize = this.canvas.width/20;
		//画家さん（コンテキスト）を呼ぶ
		const _ctx = this.canvas.getContext( '2d' );
		//テキストの横幅を取得
		const _textWidth = _ctx.measureText( _text ).width;
		//フォントの設定
		_ctx.font = `normal ${_fontSize}px ${_font}`;
		//ベースラインを文字の中央にする
		_ctx.textBaseline = 'middle';
		//テキストの色をグレーに設定
		_ctx.fillStyle = '#aaaaaa';
		//テキストを上下左右中央の位置に表示
		_ctx.fillText( _text, ( this.canvas.width - _textWidth )/2, this.canvas.height/2 );
	} //startPanel() 終了

	/**
	 * ゲームにシーンに追加できるようになる、addメソッドを作成
	 *
	 * 引数
	 * scene : 追加したいシーン
	 */
	add( scene ) {
		//引数がSceneのとき、this.scenesの末尾にsceneを追加
		if ( scene instanceof Scene ) this.scenes.push( scene );
		//引数がSceneでなければ、コンソールにエラーを表示
		else console.error( 'Gameに追加できるのはSceneだけだよ！' );
	} //add()終了

	/**
	 * 使いたいキーを登録できるようになる、keybindメソッドを作成
	 *
	 * 引数
	 * name : キーにつける名前
	 * key : キーコード
	 */
	keybind( name, key ) {
		//キーの名前と、キーコードを関連づける
		this._keys[name] = key;
		//キーが押されているかどうかを入れておく変数に、まずはfalseを代入しておく
		this.input[name] = false;
	} //keybind() 終了

}

src/sound.js

'use strict'

/**
 * Audioを使いやすくしたSoundクラス
 * Gameクラスから呼び出して使うので、普段は使わない
 */
export default class Sound extends Audio {

	/**
	 * 引数
	 * src : 音声ファイルまでのパス
	 */
	constructor( src ) {
		//親クラスのコンストラクタを呼び出す
		super( src );
		//autoplayを無効にする
		this.autoplay = false;
	} //constructor() 終了

	/**
	 * 音声を再生するためのメソッド
	 */
	start() {
		//ミュートを無効にする
		this.muted = false;
		//音声を再生
		this.play();
	} //start() 終了

	/**
	 * 音声をループで再生するためのメソッド
	 */
	loop() {
		//ループ再生されるようにする（superを使っているのは、Soundクラスにloopメソッドがあるため）
		super.loop = true;
		//音声を再生するメソッドを呼び出す
		this.start();
	} //loop() 終了

	/**
	 * 音声をストップするためのメソッド
	 */
	stop() {
		//音声を一時停止する
		this.pause();
		//再生場所を最初に戻す
		this.currentTime = 0;
	} //stop() 終了

}

ファイルをひとつにまとめてみよう！

つづいて、ファイルをひとつにまとめてみましょう！

$ npx webpack --mode=production

rpg/js/engine/kuroneko.js

!function(t,s){if("object"==typeof exports&&"object"==typeof module)module.exports=s();else if("function"==typeof define&&define.amd)define([],s);else{var e=s();for(var i in e)("object"==typeof exports?exports:t)[i]=e[i]}}(self,(function(){return(()=>{"use strict";var t={d:(s,e)=>{for(var i in e)t.o(e,i)&&!t.o(s,i)&&Object.defineProperty(s,i,{enumerable:!0,get:e[i]})},o:(t,s)=>Object.prototype.hasOwnProperty.call(t,s),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},s={};t.r(s),t.d(s,{CharacterTile:()=>h,DPad:()=>n,Game:()=>m,Party:()=>d,Scene:()=>c,Sprite:()=>e,Text:()=>r,Tile:()=>i,Tilemap:()=>o});class e{constructor(t,s,e){this.img=new Image,this.img.src=t,this.x=this.y=0,this.width=s||32,this.height=e||32,this.frame=0,this.vx=this.vy=0,this.shiftX=this.shiftY=0,this.rotate=0}update(t){this.render(t),this.onenterframe(),this.x+=this.vx,this.y+=this.vy}render(t){if(this.x+this.shiftX<-1*this.width||this.x+this.shiftX>t.width)return;if(this.y+this.shiftY<-1*this.height||this.y+this.shiftY>t.height)return;const s=this.frame%(this.img.width/this.width),e=~~(this.frame/(this.img.width/this.width)),i=t.getContext("2d"),h=this.x+this.width/2+this.shiftX,n=this.y+this.height/2+this.shiftY;i.save(),i.translate(h,n),i.rotate(this.rotate*Math.PI/180),i.translate(-1*h,-1*n),i.drawImage(this.img,this.width*s,this.height*e,this.width,this.height,this.x+this.shiftX,this.y+this.shiftY,this.width,this.height),i.restore()}getRelactiveFingerPosition(t){const s={x:t.x-this.x-this.shiftX,y:t.y-this.y-this.shiftY},e=(t,s,e)=>s<=t&&t<=e;return!(!e(s.x,0,this.width)||!e(s.y,0,this.height))&&s}assignTouchevent(t,s){const e=this.getRelactiveFingerPosition(s);switch(t){case"touchstart":e&&this.ontouchstart(e.x,e.y);break;case"touchmove":e&&this.ontouchmove(e.x,e.y);break;case"touchend":this.ontouchend(e.x,e.y)}}onenterframe(){}ontouchstart(){}ontouchmove(){}ontouchend(){}}class i extends e{constructor(t,s){super(t,s,s),this.size=s||32,this.mapX=this.mapY=0,this.isSynchronize=!0}isOverlapped(t){if(t instanceof i)return this.mapX===t.mapX&&this.mapY===t.mapY;console.error("Tilemapに追加できるのはTileだけだよ！")}}class h extends i{constructor(t,s){super(t,s),this.direction=0,this.animation=1}render(t){if(this.x+this.shiftX<-1*this.size||this.x+this.shiftX>t.width)return;if(this.y+this.shiftY<-1*this.size||this.y+this.shiftY>t.height)return;const s=t.getContext("2d"),e=this.x+this.width/2+this.shiftX,i=this.y+this.height/2+this.shiftY;s.save(),s.translate(e,i),s.rotate(this.rotate*Math.PI/180),s.translate(-1*e,-1*i),s.drawImage(this.img,this.size*this.animation,this.size*this.direction,this.size,this.size,this.x+this.shiftX,this.y+this.shiftY,this.size,this.size),s.restore()}}class n extends e{constructor(t,s){super(t,s,s),this.size=s,this.arrow={up:!1,down:!1,left:!1,right:!1}}ontouchstart(t,s){this._applyToDPad(t,s)}ontouchmove(t,s){this._applyToDPad(t,s)}ontouchend(t,s){this.frame=0,this.arrow={up:!1,down:!1,left:!1,right:!1}}_applyToDPad(t,s){this.frame=1,this.arrow={up:!1,down:!1,left:!1,right:!1},t>s&&t<this.size-s?(this.arrow.up=!0,this.rotate=0):t>this.size-s&&t<s?(this.arrow.down=!0,this.rotate=180):s>t&&s<this.size-t?(this.arrow.left=!0,this.rotate=270):s>this.size-t&&s<t&&(this.arrow.right=!0,this.rotate=90)}}class a extends Audio{constructor(t){super(t),this.autoplay=!1}start(){this.muted=!1,this.play()}loop(){super.loop=!0,this.start()}stop(){this.pause(),this.currentTime=0}}class r{constructor(t){this.text=t,this.font="游ゴシック体, 'Yu Gothic', YuGothic, sans-serif",this.x=this.y=0,this.vx=this.vy=0,this.baseline="top",this.size=20,this.color="#ffffff",this.weight="normal",this._width=0,this._height=0,this._isCenter=!1,this._isMiddle=!1}center(){return this._isCenter=!0,this}middle(){return this.baseline="middle",this._isMiddle=!0,this}update(t){const s=t.getContext("2d");s.font=`${this.weight} ${this.size}px ${this.font}`,s.fillStyle=this.color,s.textBaseline=this.baseline,this._width=s.measureText(this.text).width,this._height=Math.abs(s.measureText(this.text).actualBoundingBoxAscent)+Math.abs(s.measureText(this.text).actualBoundingBoxDescent),this._isCenter&&(this.x=(t.width-this._width)/2),this._isMiddle&&(this.y=t.height/2),this.render(t,s),this.onenterframe(),this.x+=this.vx,this.y+=this.vy}render(t,s){this.x<-1*this._width||this.x>t.width||this.y<-1*this._height||this.y>t.height+this._height||s.fillText(this.text,this.x,this.y)}getRelactiveFingerPosition(t){let s={x:t.x-this.x,y:t.y-this.y+this._height};"top"!==this.baseline&&"hanging"!==this.baseline||(s={x:t.x-this.x,y:t.y-this.y}),"middle"===this.baseline&&(s={x:t.x-this.x,y:t.y-this.y+this._height/2});const e=(t,s,e)=>s<=t&&t<=e;return!(!e(s.x,0,this._width)||!e(s.y,0,this._height))&&s}assignTouchevent(t,s){const e=this.getRelactiveFingerPosition(s);switch(t){case"touchstart":e&&this.ontouchstart(e.x,e.y);break;case"touchmove":e&&this.ontouchmove(e.x,e.y);break;case"touchend":this.ontouchend(e.x,e.y)}}onenterframe(){}ontouchstart(){}ontouchmove(){}ontouchend(){}}class o{constructor(t,s){this.img=new Image,this.img.src=t,this.x=this.y=0,this.vx=this.vy=0,this.size=s||32,this.data=[],this.tiles=[],this.obstacles=[0]}add(t){t instanceof i?(t.mapX=t.x/this.size,t.mapY=t.y/this.size,t.isSynchronize||(t.mapX=(t.x-this.x)/this.size,t.mapY=(t.y-this.y)/this.size),this.tiles.push(t)):console.error("Tilemapに追加できるのはTileだけだよ！")}hasObstacle(t,s){return this.obstacles.some((e=>e===this.data[s][t]))}update(t){this.render(t),this.onenterframe(),this.x+=this.vx,this.y+=this.vy;for(let s=0;s<this.tiles.length;s++)this.tiles[s].isSynchronize&&(this.tiles[s].shiftX=this.x,this.tiles[s].shiftY=this.y),this.tiles[s].update(t),this.tiles[s].mapX=this.tiles[s].x/this.size,this.tiles[s].mapY=this.tiles[s].y/this.size,this.tiles[s].isSynchronize||(this.tiles[s].mapX=(this.tiles[s].x-this.x)/this.size,this.tiles[s].mapY=(this.tiles[s].y-this.y)/this.size)}render(t){for(let s=0;s<this.data.length;s++){const e=this.size*s+this.y;if(!(e<-1*this.size||e>t.height))for(let i=0;i<this.data[s].length;i++){const h=this.size*i+this.x;if(h<-1*this.size||h>t.width)continue;const n=this.data[s][i]%(this.img.width/this.size),a=~~(this.data[s][i]/(this.img.width/this.size));t.getContext("2d").drawImage(this.img,this.size*n,this.size*a,this.size,this.size,h,e,this.size,this.size)}}}getRelactiveFingerPosition(t){const s={x:t.x-this.x,y:t.y-this.y},e=(t,s,e)=>s<=t&&t<=e;return!(!e(s.x,0,this.size*this.data[0].length)||!e(s.y,0,this.size*this.data.length))&&s}assignTouchevent(t,s){const e=this.getRelactiveFingerPosition(s);if(e){switch(t){case"touchstart":this.ontouchstart(e.x,e.y);break;case"touchmove":this.ontouchmove(e.x,e.y);break;case"touchend":this.ontouchend(e.x,e.y)}for(let e=0;e<this.tiles.length;e++)this.tiles[e].assignTouchevent(t,s)}}onenterframe(){}ontouchstart(){}ontouchmove(){}ontouchend(){}}class c{constructor(){this.objs=[]}add(t){t instanceof e||t instanceof r||t instanceof o?this.objs.push(t):console.error("Sceneに追加できるのはSprite、Text、Tilemapだけだよ！")}update(t){this.onenterframe()}assignTouchevent(t,s){switch(t){case"touchstart":this.ontouchstart(s.x,s.y);break;case"touchmove":this.ontouchmove(s.x,s.y);break;case"touchend":this.ontouchend(s.x,s.y)}for(let e=0;e<this.objs.length;e++)this.objs[e].assignTouchevent(t,s)}onenterframe(){}ontouchstart(){}ontouchmove(){}ontouchend(){}onchangescene(){}}class m{constructor(t,s){this.canvas=document.createElement("canvas"),document.body.appendChild(this.canvas),this.canvas.width=t||320,this.canvas.height=s||320,this.scenes=[],this.currentScene,this.sounds=[],this._isAlreadyTouched=!1,this._hasFinishedSetting=!1,this._preloadPromises=[],this._temporaryCurrentScene,this.input={},this._keys={}}preload(){const t=arguments;for(let s=0;s<t.length;s++)this._preloadPromises[s]=new Promise(((e,i)=>{if(t[s].match(/\.(jpg|jpeg|png|gif)$/i)){let h=new Image;h.src=t[s],h.addEventListener("load",(()=>{e()}),{passive:!0,once:!0}),h.addEventListener("error",(()=>{i(`「${t[s]}」は読み込めないよ！`)}),{passive:!0,once:!0})}else if(t[s].match(/\.(wav|wave|mp3|ogg)$/i)){let h=new a;h.src=t[s],this.sounds[t[s]]=h,this.sounds[t[s]].load(),h.addEventListener("canplaythrough",(()=>{e()}),{passive:!0,once:!0}),h.addEventListener("error",(()=>{i(`「${t[s]}」は読み込めないよ！`)}),{passive:!0,once:!0})}else i(`「${t[s]}」の形式は、プリロードに対応していないよ！`)}))}main(t){Promise.all(this._preloadPromises).then((s=>{t()})).catch((t=>{console.error(t)}))}start(){this.keybind("up","ArrowUp"),this.keybind("down","ArrowDown"),this.keybind("right","ArrowRight"),this.keybind("left","ArrowLeft"),this.currentScene=this.currentScene||this.scenes[0];const t=()=>{const t=Math.min(innerWidth/this.canvas.width,innerHeight/this.canvas.height);this.canvas.style.width=this.canvas.width*t+"px",this.canvas.style.height=this.canvas.height*t+"px"};addEventListener("resize",t,{passive:!0}),t(),this._mainLoop(),this._waitUserManipulation()}_setEventListener(){const t=t=>{t.preventDefault();for(let s in this._keys)switch(t.type){case"keydown":t.key===this._keys[s]&&(this.input[s]=!0);break;case"keyup":t.key===this._keys[s]&&(this.input[s]=!1)}};addEventListener("keydown",t,{passive:!1}),addEventListener("keyup",t,{passive:!1});const s=t=>{t.preventDefault();const s=t.changedTouches[0],e=s.target.getBoundingClientRect(),i={x:(s.clientX-e.left)/e.width*this.canvas.width,y:(s.clientY-e.top)/e.height*this.canvas.height},h=t.type;this.currentScene.assignTouchevent(h,i)};this.canvas.addEventListener("touchstart",s,{passive:!1}),this.canvas.addEventListener("touchmove",s,{passive:!1}),this.canvas.addEventListener("touchend",s,{passive:!1})}_waitUserManipulation(){const t=t=>{t.preventDefault(),this._isAlreadyTouched=!0;const s=[];for(let t in this.sounds)this.sounds[t].load(),this.sounds[t].muted=!0,s.push(this.sounds[t].play());Promise.all(s).then((()=>{for(let t in this.sounds)this.sounds[t].stop()})).catch((t=>{console.log(t)})),setTimeout((()=>{this._setEventListener(),this._hasFinishedSetting=!0}),2e3)};this.canvas.addEventListener("touchstart",t,{passive:!1,once:!0}),addEventListener("keydown",t,{passive:!1,once:!0})}_mainLoop(){const t=this.canvas.getContext("2d");if(t.fillStyle="#000000",t.fillRect(0,0,this.canvas.width,this.canvas.height),this._isAlreadyTouched){if(this._hasFinishedSetting){this.currentScene.update(),this._temporaryCurrentScene!==this.currentScene&&this.currentScene.onchangescene();for(let t=0;t<this.currentScene.objs.length;t++)this.currentScene.objs[t].update(this.canvas);this._temporaryCurrentScene=this.currentScene}}else this.startPanel();requestAnimationFrame(this._mainLoop.bind(this))}startPanel(){const t="タップ、またはなにかキーを押してね！",s=this.canvas.width/20,e=this.canvas.getContext("2d"),i=e.measureText(t).width;e.font=`normal ${s}px 游ゴシック体, 'Yu Gothic', YuGothic, sans-serif`,e.textBaseline="middle",e.fillStyle="#aaaaaa",e.fillText(t,(this.canvas.width-i)/2,this.canvas.height/2)}add(t){t instanceof c?this.scenes.push(t):console.error("Gameに追加できるのはSceneだけだよ！")}keybind(t,s){this._keys[t]=s,this.input[t]=!1}}class d{constructor(){this.member=arguments,this.speed=1}setMemberDirection(){for(let t=1;t<this.member.length;t++)this.member[t-1].mapX<this.member[t].mapX?this.member[t].direction=1:this.member[t-1].mapX>this.member[t].mapX?this.member[t].direction=2:this.member[t-1].mapY<this.member[t].mapY?this.member[t].direction=3:this.member[t-1].mapY>this.member[t].mapY&&(this.member[t].direction=0)}setMemberVelocity(t){for(let s=1;s<this.member.length;s++){let e,i,h,n,a,r,o;"up"===t?(e=0,i=1,h=-1,n=0,a=1,r=2,o=-1):"down"===t?(e=0,i=-1,h=-1,n=-2,a=1,r=0,o=1):"left"===t?(e=1,i=0,h=0,n=-1,a=2,r=1,o=-1):"right"===t&&(e=-1,i=0,h=-2,n=-1,a=0,r=1,o=1),this.member[s-1].mapX===this.member[s].mapX&&(this.member[s].vx=this.speed*e),this.member[s-1].mapY===this.member[s].mapY&&(this.member[s].vy=this.speed*i),this.member[s-1].mapX<this.member[s].mapX&&(this.member[s].vx=this.speed*h,"left"===t&&this.member[s].mapX-this.member[s-1].mapX>1&&(this.member[s].vx=this.speed*o)),this.member[s-1].mapX>this.member[s].mapX&&(this.member[s].vx=this.speed*a,"right"===t&&this.member[s-1].mapX-this.member[s].mapX>1&&(this.member[s].vx=this.speed*o)),this.member[s-1].mapY<this.member[s].mapY&&(this.member[s].vy=this.speed*n,"up"===t&&this.member[s].mapY-this.member[s-1].mapY>1&&(this.member[s].vy=this.speed*o)),this.member[s-1].mapY>this.member[s].mapY&&(this.member[s].vy=this.speed*r,"down"===t&&this.member[s-1].mapY-this.member[s].mapY>1&&(this.member[s].vy=this.speed*o))}}}return s})()}));

ゲームエンジンを使ってみよう！

では、つくったゲームエンジンを実際につかってみましょう！

rpg/index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<title>くろねこラビリンス</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}
		canvas {
			display: block;
		}
	</style>
</head>
<body>
	<script src="js/engine/kuroneko.js"></script>
	<script src="js/map.js"></script>
	<script src="js/main.js"></script>
</body>
</html>

まとめ

今回は、前回つくったゲームエンジンのファイルをひとつにまとめる方法を紹介しました。

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

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