1. HOME»
  2. プログラミング・Web»
  3. JavaScript»
  4. 【JavaScript】マップでキャラを動かせるようにしよう！　小学生からのプログラミング入門

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

【JavaScript】マップでキャラを動かせるようにしよう！　小学生からのプログラミング入門
更新 :
カテゴリー : JavaScript, プログラミング・Web
by : It is R

小学生からのプログラミング講座《こうざ》、今回もはじめていきましょう！

前回は、JavaScriptでのマップの作り方を紹介《しょうかい》しました。
しかし、まだマップを配置《はいち》しただけで、キャラクターの画像《がぞう》を表示《ひょうじ》させていませんでした。

今回《こんかい》はマップ上にキャラクターの画像を表示させ、動《うご》かせるようにしてみようと思います。
また、壁《かべ》との衝突《しょうとつ》判定《はんてい》も作り、キャラクターが壁をすり抜《ぬ》けられないようにしてみようと思います。

アル

昨日《きのう》さ、前回教《おし》えてもらったマップチップの表示と、りこちゃんの画像表示を自分で組み合わせて作ってみたんだ

りこ

うまく動《うご》いた？

アル

それが全然（ぜんぜん）。一応表示（いちおうひょうじ）はされたんだけど、りこちゃんが壁（かべ）をすり抜けちゃうんだそれが全然《ぜんぜん》。一応《いちおう》表示《ひょうじ》はされたんだけど、りこちゃんが壁《かべ》をすり抜けちゃうんだ

りこ

そうなんだ

山田

それが全然（ぜんぜん）。一応表示（いちおうひょうじ）はされたんだけど、りこちゃんが壁（かべ）をすり抜けちゃうんだじゃあ、今日《きょう》は壁《かべ》との衝突《しょうとつ》判定《はんてい》を作っていくべ！

りこ

山田先生！　わーい！

アル

それが全然（ぜんぜん）。一応表示（いちおうひょうじ）はされたんだけど、りこちゃんが壁（かべ）をすり抜けちゃうんだはやくやろう！

目次
  1. マップにキャラクターを表示してみよう！
  2. 壁の座標とりこちゃんの座標を比べて、壁との当たり判定をする
  3. まとめ

マップにキャラクターを表示してみよう！

まずはマップにキャラクターを表示《ひょうじ》させるところから始めましょう！
第１２回目で紹介《しょうかい》した、HTML5とCanvasでキャラクターを動《うご》かす方法《ほうほう》と、第１３回目で紹介した、マップの表示方法を組み合わせて作ります。

まずはcanvasの設定《せってい》と、コンテキストを取得《しゅとく》です。

//canvasの設定（せってい）
var canvas = document.getElementById( 'canvas' );
canvas.width = 640;	//canvasの横幅（よこはば）
canvas.height = 640;	//canvasの縦幅（たてはば）
 
//コンテキストを取得（しゅとく）
var ctx = canvas.getContext( '2d' );
アル

ここまでで、Canvasをつかう準備じゅんびができたわけだね

りこ

Canvasを設定せっていして、コンテキスト（プログラムを動かすのに必要な情報）を取得しゅとくね

そして今回必要《ひつよう》な、オブジェクトや変数《へんすう》です。
りこちゃんのオブジェクト、マップチップのImageオブジェクト、キーボードのオブジェクト、マップ配置《はいち》の変数《へんすう》を作っておきます。

//りこちゃんのオブジェクトを作成
var rico = new Object();
rico.img = new Image();
rico.img.src = 'img/rico.png';
rico.x = 0;
rico.y = 0;
rico.move = 0;

//マップチップのImageオブジェクトを作る
var mapchip = new Image();
mapchip.src = 'img/map.png';

//キーボードのオブジェクトを作成
var key = new Object();
key.up = false;
key.down = false;
key.right = false;
key.left = false;
key.push = '';

//マップの作成（さくせい）
var map = [
	[0, 0, 1, 0, 1, 0, 0, 0 ,0 ,1 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,1 ,0],
	[0, 1, 0, 0, 0, 1, 1, 1 ,0 ,1 ,0 ,1 ,1 ,0 ,1 ,1 ,1 ,0 ,1 ,0],
	[0, 0, 1, 1, 0, 0, 0, 1 ,0 ,0 ,0 ,1 ,0 ,0 ,0 ,1 ,0 ,0 ,0 ,0],
	[1, 0, 1, 0, 1, 1, 0, 0 ,0 ,1 ,1 ,1 ,1 ,1 ,0 ,0 ,1 ,0 ,1 ,0],
	[0, 0, 0, 0, 0, 1, 1, 1 ,0 ,1 ,0 ,0 ,0 ,0 ,1 ,1 ,0 ,1 ,1 ,0],
	[0, 1, 1, 1, 0, 0, 0, 0 ,0 ,1 ,0 ,1 ,1 ,1 ,0 ,1 ,0 ,0 ,0 ,0],
	[0, 1, 1, 1, 0, 1, 1, 1 ,1 ,1 ,0 ,1 ,0 ,0 ,0 ,0 ,1 ,1 ,1 ,0],
	[0, 0, 0, 1, 0, 0, 0, 0 ,1 ,0 ,0 ,1 ,0 ,1 ,1 ,0 ,0 ,0 ,1 ,0],
	[1, 1, 0, 1, 1, 1, 1, 1 ,1 ,0 ,1 ,1 ,0 ,0 ,1 ,1 ,1 ,0 ,1 ,1],
	[1, 0, 0, 0, 0, 0, 1, 1 ,0 ,0 ,0 ,0 ,1 ,0 ,1 ,1 ,0 ,0 ,1 ,0],
	[1, 0, 1, 1, 1, 0, 0, 0 ,1 ,0 ,1 ,0 ,0 ,0 ,0 ,0 ,1 ,1 ,0 ,0],
	[1, 0, 1, 0, 1, 1, 1, 0 ,1 ,0 ,1 ,1 ,0 ,1 ,1 ,0 ,0 ,0 ,0 ,1],
	[0, 0, 1, 0, 0, 1, 0, 0 ,1 ,0 ,0 ,1 ,0 ,1 ,0 ,1 ,1 ,1 ,0 ,0],
	[0, 1, 1, 1, 0, 1, 0, 1 ,0 ,0 ,1 ,1 ,0 ,1 ,0 ,1 ,1 ,0 ,1 ,0],
	[0, 0, 0, 1, 0, 1, 0, 0 ,1 ,0 ,1 ,1 ,0 ,1 ,0 ,0 ,0 ,0 ,0 ,0],
	[1, 1, 0, 1, 0, 1, 0, 1 ,1 ,0 ,0 ,1 ,0 ,1 ,1 ,0 ,1 ,1 ,1 ,0],
	[0, 0, 0, 1, 0, 1, 1, 1 ,1 ,1 ,0 ,1 ,0 ,1 ,1 ,0 ,0 ,0 ,1 ,0],
	[0, 1, 1, 1, 0, 1, 0, 0 ,0 ,0 ,0 ,1 ,0 ,0 ,0 ,1 ,1 ,0 ,1 ,1],
	[0, 1, 0, 0, 0, 1, 0, 1 ,1 ,1 ,0 ,0 ,1 ,1 ,0 ,1 ,0 ,0 ,0 ,0],
	[0, 0, 0, 1, 0, 0, 0, 1 ,1 ,1 ,1 ,0 ,0 ,0 ,1 ,1 ,1 ,1 ,1 ,0]
]
りこ

マップは縦《たて》20、横《よこ》20で、マップチップひとつが32pxだから、縦横640pxのマップができるのね

さらに、メインループとキー入力《にゅうりょく》があったときに呼ばれる関数《かんすう》です。
メインループでは、まず背景《はいけい》を黒く塗《ぬ》りつぶし、そこにマップチップを、そのあとにりこちゃんの画像《がぞう》を表示《ひょうじ》させます。
あとから表示した画像ほど、上にくるので、表示の順番《じゅんばん》には気をつけましょう。

//メインループ
function main() {
	//塗（ぬ）りつぶす色を指定（してい）
	ctx.fillStyle = "rgb( 0, 0, 0 )";
	//塗（ぬ）りつぶす
	ctx.fillRect(0, 0, 640, 640);

	for (var y=0; y<map.length; y++) {
		for (var x=0; x<map[y].length; x++) {
			if ( map[y][x] === 0 ) ctx.drawImage( mapchip, 0, 0, 32, 32, 32*x, 32*y, 32, 32 );
			if ( map[y][x] === 1 ) ctx.drawImage( mapchip, 32, 0, 32, 32, 32*x, 32*y, 32, 32 );
		}
	}

	//画像を表示
	ctx.drawImage( rico.img, rico.x, rico.y );

	addEventListener("keydown", keydownfunc, false);
	addEventListener("keyup", keyupfunc, false);

	//方向キーが押されている場合（ばあい）は、りこちゃんが移動する
	if ( rico.move === 0 ) {
		if ( key.left === true ) {
			rico.move = 32;
			key.push = 'left';
		}
		if ( key.up === true ) {
			rico.move = 32;
			key.push = 'up';
		}
		if ( key.right === true ) {
			rico.move = 32;
			key.push = 'right';
		}
		if ( key.down === true ) {
			rico.move = 32;
			key.push = 'down';
		}
	}
	//rico.moveが0より大きい場合は、4pxずつ移動（いどう）を続ける
	if (rico.move > 0) {
		rico.move -= 4;
		if ( key.push === 'left' ) rico.x -= 4;
		if ( key.push === 'up' ) rico.y -= 4;
		if ( key.push === 'right' ) rico.x += 4;
		if ( key.push === 'down' ) rico.y += 4;
	}

	requestAnimationFrame( main );
}
//ページと依存（いぞん）している全てのデータが読み込まれたら、メインループ開始
addEventListener('load', main(), false);

//キーボードが押されたときに呼び出される関数（かんすう）
function keydownfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) key.left = true;
	if( key_code === 38 ) key.up = true;
	if( key_code === 39 ) key.right = true;
	if( key_code === 40 ) key.down = true;
	event.preventDefault();
}

//キーボードが放（はな）されたときに呼び出される関数
function keyupfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) key.left = false;
	if( key_code === 38 ) key.up = false;
	if( key_code === 39 ) key.right = false;
	if( key_code === 40 ) key.down = false;
}
アル

りこちゃんが移動《いどう》するためのプログラムだね

少々長いですが、全体《ぜんたい》はこのようになっています。

//canvasの設定（せってい）
var canvas = document.getElementById( 'canvas' );
canvas.width = 640;	//canvasの横幅（よこはば）
canvas.height = 640;	//canvasの縦幅（たてはば）
 
//コンテキストを取得（しゅとく）
var ctx = canvas.getContext( '2d' );

//りこちゃんのオブジェクトを作成
var rico = new Object();
rico.img = new Image();
rico.img.src = 'img/rico.png';
rico.x = 0;
rico.y = 0;
rico.move = 0;

//マップチップのImageオブジェクトを作る
var mapchip = new Image();
mapchip.src = 'img/map.png';

//キーボードのオブジェクトを作成
var key = new Object();
key.up = false;
key.down = false;
key.right = false;
key.left = false;
key.push = '';

//マップの作成（さくせい）
var map = [
	[0, 0, 1, 0, 1, 0, 0, 0 ,0 ,1 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,1 ,0],
	[0, 1, 0, 0, 0, 1, 1, 1 ,0 ,1 ,0 ,1 ,1 ,0 ,1 ,1 ,1 ,0 ,1 ,0],
	[0, 0, 1, 1, 0, 0, 0, 1 ,0 ,0 ,0 ,1 ,0 ,0 ,0 ,1 ,0 ,0 ,0 ,0],
	[1, 0, 1, 0, 1, 1, 0, 0 ,0 ,1 ,1 ,1 ,1 ,1 ,0 ,0 ,1 ,0 ,1 ,0],
	[0, 0, 0, 0, 0, 1, 1, 1 ,0 ,1 ,0 ,0 ,0 ,0 ,1 ,1 ,0 ,1 ,1 ,0],
	[0, 1, 1, 1, 0, 0, 0, 0 ,0 ,1 ,0 ,1 ,1 ,1 ,0 ,1 ,0 ,0 ,0 ,0],
	[0, 1, 1, 1, 0, 1, 1, 1 ,1 ,1 ,0 ,1 ,0 ,0 ,0 ,0 ,1 ,1 ,1 ,0],
	[0, 0, 0, 1, 0, 0, 0, 0 ,1 ,0 ,0 ,1 ,0 ,1 ,1 ,0 ,0 ,0 ,1 ,0],
	[1, 1, 0, 1, 1, 1, 1, 1 ,1 ,0 ,1 ,1 ,0 ,0 ,1 ,1 ,1 ,0 ,1 ,1],
	[1, 0, 0, 0, 0, 0, 1, 1 ,0 ,0 ,0 ,0 ,1 ,0 ,1 ,1 ,0 ,0 ,1 ,0],
	[1, 0, 1, 1, 1, 0, 0, 0 ,1 ,0 ,1 ,0 ,0 ,0 ,0 ,0 ,1 ,1 ,0 ,0],
	[1, 0, 1, 0, 1, 1, 1, 0 ,1 ,0 ,1 ,1 ,0 ,1 ,1 ,0 ,0 ,0 ,0 ,1],
	[0, 0, 1, 0, 0, 1, 0, 0 ,1 ,0 ,0 ,1 ,0 ,1 ,0 ,1 ,1 ,1 ,0 ,0],
	[0, 1, 1, 1, 0, 1, 0, 1 ,0 ,0 ,1 ,1 ,0 ,1 ,0 ,1 ,1 ,0 ,1 ,0],
	[0, 0, 0, 1, 0, 1, 0, 0 ,1 ,0 ,1 ,1 ,0 ,1 ,0 ,0 ,0 ,0 ,0 ,0],
	[1, 1, 0, 1, 0, 1, 0, 1 ,1 ,0 ,0 ,1 ,0 ,1 ,1 ,0 ,1 ,1 ,1 ,0],
	[0, 0, 0, 1, 0, 1, 1, 1 ,1 ,1 ,0 ,1 ,0 ,1 ,1 ,0 ,0 ,0 ,1 ,0],
	[0, 1, 1, 1, 0, 1, 0, 0 ,0 ,0 ,0 ,1 ,0 ,0 ,0 ,1 ,1 ,0 ,1 ,1],
	[0, 1, 0, 0, 0, 1, 0, 1 ,1 ,1 ,0 ,0 ,1 ,1 ,0 ,1 ,0 ,0 ,0 ,0],
	[0, 0, 0, 1, 0, 0, 0, 1 ,1 ,1 ,1 ,0 ,0 ,0 ,1 ,1 ,1 ,1 ,1 ,0]
]

//メインループ
function main() {
	//塗（ぬ）りつぶす色を指定（してい）
	ctx.fillStyle = "rgb( 0, 0, 0 )";
	//塗（ぬ）りつぶす
	ctx.fillRect(0, 0, 640, 640);

	for (var y=0; y<map.length; y++) {
		for (var x=0; x<map[y].length; x++) {
			if ( map[y][x] === 0 ) ctx.drawImage( mapchip, 0, 0, 32, 32, 32*x, 32*y, 32, 32 );
			if ( map[y][x] === 1 ) ctx.drawImage( mapchip, 32, 0, 32, 32, 32*x, 32*y, 32, 32 );
		}
	}

	//画像を表示
	ctx.drawImage( rico.img, rico.x, rico.y );

	addEventListener("keydown", keydownfunc, false);
	addEventListener("keyup", keyupfunc, false);

	//方向キーが押されている場合（ばあい）は、りこちゃんが移動する
	if ( rico.move === 0 ) {
		if ( key.left === true ) {
			rico.move = 32;
			key.push = 'left';
		}
		if ( key.up === true ) {
			rico.move = 32;
			key.push = 'up';
		}
		if ( key.right === true ) {
			rico.move = 32;
			key.push = 'right';
		}
		if ( key.down === true ) {
			rico.move = 32;
			key.push = 'down';
		}
	}
	//rico.moveが0より大きい場合は、4pxずつ移動（いどう）を続ける
	if (rico.move > 0) {
		rico.move -= 4;
		if ( key.push === 'left' ) rico.x -= 4;
		if ( key.push === 'up' ) rico.y -= 4;
		if ( key.push === 'right' ) rico.x += 4;
		if ( key.push === 'down' ) rico.y += 4;
	}

	requestAnimationFrame( main );
}
//ページと依存（いぞん）している全てのデータが読み込まれたら、メインループ開始
addEventListener('load', main(), false);

//キーボードが押されたときに呼び出される関数（かんすう）
function keydownfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) key.left = true;
	if( key_code === 38 ) key.up = true;
	if( key_code === 39 ) key.right = true;
	if( key_code === 40 ) key.down = true;
	event.preventDefault();
}

//キーボードが放（はな）されたときに呼び出される関数
function keyupfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) key.left = false;
	if( key_code === 38 ) key.up = false;
	if( key_code === 39 ) key.right = false;
	if( key_code === 40 ) key.down = false;
}

しかしこのプログラムでは、りこちゃんが壁《かべ》をすり抜《ぬ》けてしまいます。

下の枠内《わくない》をクリックして、方向《ほうこう》キーで操作《そうさ》してみてね！

りこ

きゃー、私が壁《かべ》をすり抜《ぬ》けてる

アル

これじゃあ迷路《めいろ》にならないね

山田

そこで今回は、壁《かべ》にぶつからないように、プログラムをつくっていくべ！

壁の座標とりこちゃんの座標を比べて、壁との当たり判定をする

当たり判定《はんてい》といえば、Scratch（スクラッチ）でシューティングゲームを作った時も敵とぶつかっているかとか、弾《たま》が当たっているかとか、やりましたね。

しかし今回の場合《ばあい》、「壁《かべ》に当たっているか」ではなく、「壁に当たってしまうか」という判定になります。
どちらにしろ実際《じっさい》には当たっていないので、「この先、衝突《しょうとつ》するかも」という予測《よそく》の判定《はんてい》です。

アル

予測よそくって……まほうでもつかうのかな？

りこ

そんなわけないでしょ！　でも、どうやるんだろう

山田

座標《ざひょう》で考えればいんだべ

アル

りこちゃんの座標と、壁の座標を比べるってこと？　でもどうやって……

さて、壁の座標はもうすでに取得《しゅとく》できています。
なぜなら、mapという配列《はいれつ》にマップを作って、そこに合わせて壁を配置《はいち》しているからです。

さらに、りこちゃんの座標も取得できますね。
オブジェクトのrico.xとrico.yです。

じつはこの２つ、座標の表し方が違《ちが》います。
りこちゃんは実際《じっさい》に動かすため、正確《せいかく》な座標をrico.xとrico.yが覚えてくれています。
しかしmapは正確な座標を覚えているわけではなく、マップチップの場所《ばしょ》を覚えているだけなんです。

左から０番目、上から０番目の数字は０、
左から１番目、上から０番目の数字は０、
左から２番目、上から０番目の数字は１、
左から３番目、上から０番目の数字は０、

といったふうです。

だけど心配《しんぱい》する必要《ひつよう》はありません。
りこちゃんの座標は、マップチップのサイズである32でわることで、mapと同じことになります。

りこ

なんで！？　よく分からない！

アル

僕もさっぱり！

山田

じゃあ、例《れい》を見るべよ！

では、例《れい》で見ていきましょう。
りこちゃんのいる場所《ばしょ》は、０から数えて、左から何番目の、上から何番目でしょうか？

答えは、左から３番目の、上から６番目です。

では、x座標《ざひょう》とy座標を正確《せいかく》にいうとどうなるでしょうか？
かんたんです。１マス32pxなので、32をかけ算すれば、答えがでますね。
つまりxは96px, yは192pxです。

りこ

逆にいえば、わり算すれば正確な座標から、何番目のところにいるかが出せるってことね！

山田

そうなんだべよ！

もしも右矢印が押されて、右方向に壁《かべ》がある場合は進《すす》むことができません。
壁があるということは、りこちゃんの右側が「１」になっているということです。

まず、変数xとyに、りこちゃんの座標《ざひょう》を３２でわった数を代入《だいにゅう》します。
右矢印が押されたとき、x座標に１プラスしたいので、x++とすることでxに１足すことができます。

そのあと、map[y][x]とすることで、キャラが右方向へ１移動《いどう》したあとのマップ上の座標を示《しめ》すことができます。
その座標が0の場合《ばあい》のときのみ移動できるようにします。

これをプログラムにしてみると、このようになります。

if ( key.right === true ) {
	var x = rico.x/32;
	var y = rico.y/32;
	x++;
	if ( map[y][x] === 0 ) {
		rico.move = 32;
		key.push = 'right';
	}
}

ほかのキーのときも同じです。

しかし、このプログラムでは、y座標の場合《ばあい》、上や下にマップからはみ出てしまうとエラーがおきてしまいます。
上下の矢印キーが押されたときのみ、移動《いどう》を制限《せいげん》します。
例えば、上キーが押されたときは、このように４行目で移動を制限しています。

if ( key.up === true ) {
	var x = rico.x/32;
	var y = rico.y/32;
	if ( y > 0) {
		y--;
		if ( map[y][x] === 0 ) {
			rico.move = 32;
			key.push = 'up';
		}
	}
}

全体《ぜんたい》ではこのようになります。

//canvasの設定（せってい）
var canvas = document.getElementById( 'canvas' );
canvas.width = 640;		//canvasの横幅（よこはば）
canvas.height = 640;	//canvasの縦幅（たてはば）
 
//コンテキストを取得（しゅとく）
var ctx = canvas.getContext( '2d' );
 
//りこちゃんのオブジェクトを作成
var rico = new Object();
rico.img = new Image();
rico.img.src = 'img/rico.png';
rico.x = 0;
rico.y = 0;
rico.move = 0;

//マップチップのImageオブジェクトを作る
var mapchip = new Image();
mapchip.src = 'img/map.png';

//キーボードのオブジェクトを作成
var key = new Object();
key.up = false;
key.down = false;
key.right = false;
key.left = false;
key.push = '';

//マップの作成（さくせい）
var map = [
	[0, 0, 1, 0, 1, 0, 0, 0 ,0 ,1 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,1 ,0],
	[0, 1, 0, 0, 0, 1, 1, 1 ,0 ,1 ,0 ,1 ,1 ,0 ,1 ,1 ,1 ,0 ,1 ,0],
	[0, 0, 1, 1, 0, 0, 0, 1 ,0 ,0 ,0 ,1 ,0 ,0 ,0 ,1 ,0 ,0 ,0 ,0],
	[1, 0, 1, 0, 1, 1, 0, 0 ,0 ,1 ,1 ,1 ,1 ,1 ,0 ,0 ,1 ,0 ,1 ,0],
	[0, 0, 0, 0, 0, 1, 1, 1 ,0 ,1 ,0 ,0 ,0 ,0 ,1 ,1 ,0 ,1 ,1 ,0],
	[0, 1, 1, 1, 0, 0, 0, 0 ,0 ,1 ,0 ,1 ,1 ,1 ,0 ,1 ,0 ,0 ,0 ,0],
	[0, 1, 1, 1, 0, 1, 1, 1 ,1 ,1 ,0 ,1 ,0 ,0 ,0 ,0 ,1 ,1 ,1 ,0],
	[0, 0, 0, 1, 0, 0, 0, 0 ,1 ,0 ,0 ,1 ,0 ,1 ,1 ,0 ,0 ,0 ,1 ,0],
	[1, 1, 0, 1, 1, 1, 1, 1 ,1 ,0 ,1 ,1 ,0 ,0 ,1 ,1 ,1 ,0 ,1 ,1],
	[1, 0, 0, 0, 0, 0, 1, 1 ,0 ,0 ,0 ,0 ,1 ,0 ,1 ,1 ,0 ,0 ,1 ,0],
	[1, 0, 1, 1, 1, 0, 0, 0 ,1 ,0 ,1 ,0 ,0 ,0 ,0 ,0 ,1 ,1 ,0 ,0],
	[1, 0, 1, 0, 1, 1, 1, 0 ,1 ,0 ,1 ,1 ,0 ,1 ,1 ,0 ,0 ,0 ,0 ,1],
	[0, 0, 1, 0, 0, 1, 0, 0 ,1 ,0 ,0 ,1 ,0 ,1 ,0 ,1 ,1 ,1 ,0 ,0],
	[0, 1, 1, 1, 0, 1, 0, 1 ,0 ,0 ,1 ,1 ,0 ,1 ,0 ,1 ,1 ,0 ,1 ,0],
	[0, 0, 0, 1, 0, 1, 0, 0 ,1 ,0 ,1 ,1 ,0 ,1 ,0 ,0 ,0 ,0 ,0 ,0],
	[1, 1, 0, 1, 0, 1, 0, 1 ,1 ,0 ,0 ,1 ,0 ,1 ,1 ,0 ,1 ,1 ,1 ,0],
	[0, 0, 0, 1, 0, 1, 1, 1 ,1 ,1 ,0 ,1 ,0 ,1 ,1 ,0 ,0 ,0 ,1 ,0],
	[0, 1, 1, 1, 0, 1, 0, 0 ,0 ,0 ,0 ,1 ,0 ,0 ,0 ,1 ,1 ,0 ,1 ,1],
	[0, 1, 0, 0, 0, 1, 0, 1 ,1 ,1 ,0 ,0 ,1 ,1 ,0 ,1 ,0 ,0 ,0 ,0],
	[0, 0, 0, 1, 0, 0, 0, 1 ,1 ,1 ,1 ,0 ,0 ,0 ,1 ,1 ,1 ,1 ,1 ,0]
]

//メインループ
function main() {
	//塗（ぬ）りつぶす色を指定（してい）
	ctx.fillStyle = "rgb( 0, 0, 0 )";
	//塗（ぬ）りつぶす
	ctx.fillRect(0, 0, 640, 640);

	for (var y=0; y<map.length; y++) {
		for (var x=0; x<map[y].length; x++) {
			if ( map[y][x] === 0 ) ctx.drawImage( mapchip, 0, 0, 32, 32, 32*x, 32*y, 32, 32 );
			if ( map[y][x] === 1 ) ctx.drawImage( mapchip, 32, 0, 32, 32, 32*x, 32*y, 32, 32 );
		}
	}

	//画像を表示
	ctx.drawImage( rico.img, rico.x, rico.y );

	addEventListener("keydown", keydownfunc, false);
	addEventListener("keyup", keyupfunc, false);

	//方向キーが押されている場合（ばあい）は、りこちゃんが移動する
	if ( rico.move === 0 ) {
		if ( key.left === true ) {
			var x = rico.x/32;
			var y = rico.y/32;
			x--;
			if ( map[y][x] === 0 ) {
				rico.move = 32;
				key.push = 'left';
			}
		}
		if ( key.up === true ) {
			var x = rico.x/32;
			var y = rico.y/32;
			if ( y > 0) {
				y--;
				if ( map[y][x] === 0 ) {
					rico.move = 32;
					key.push = 'up';
				}
			}
		}
		if ( key.right === true ) {
			var x = rico.x/32;
			var y = rico.y/32;
			x++;
			if ( map[y][x] === 0 ) {
				rico.move = 32;
				key.push = 'right';
			}
		}
		if ( key.down === true ) {
			var x = rico.x/32;
			var y = rico.y/32;
			if ( y < 19 ) {
				y++;
				if ( map[y][x] === 0 ) {
					rico.move = 32;
					key.push = 'down';
				}
			}
		}
	}

	//rico.moveが0より大きい場合は、4pxずつ移動（いどう）を続ける
	if (rico.move > 0) {
		rico.move -= 4;
		if ( key.push === 'left' ) rico.x -= 4;
		if ( key.push === 'up' ) rico.y -= 4;
		if ( key.push === 'right' ) rico.x += 4;
		if ( key.push === 'down' ) rico.y += 4;
	}

	requestAnimationFrame( main );
}
//ページと依存（いぞん）している全てのデータが読み込まれたら、メインループ開始
addEventListener('load', main(), false);

//キーボードが押されたときに呼び出される関数（かんすう）
function keydownfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) key.left = true;
	if( key_code === 38 ) key.up = true;
	if( key_code === 39 ) key.right = true;
	if( key_code === 40 ) key.down = true;
	event.preventDefault();		//方向キーでブラウザがスクロールしないようにする
}

//キーボードが放（はな）されたときに呼び出される関数
function keyupfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) key.left = false;
	if( key_code === 38 ) key.up = false;
	if( key_code === 39 ) key.right = false;
	if( key_code === 40 ) key.down = false;
}

下の枠内《わくない》をクリックして、方向《ほうこう》キーで操作《そうさ》してみてね！

りこ

きゃー、迷路、まよっちゃう！

アル

すごい！　ちゃんと壁で止まってるよ！

まとめ

今回は、マップ上をキャラクターが移動《いどう》し、壁《かべ》をすり抜《ぬ》けられないように作りました。
大切なのはりこちゃんの座標《ざひょう》と、マップチップの座標を照《て》らし合わせることです。そのためには、りこちゃんの座標を１つのマップチップのサイズで割るというのも１つの方法です。

山田

ここまででも、一応遊べるべよ

アル

まだスタートもゴールもないけどね

りこ

でもスタートとゴールだけなら簡単《かんたん》につくれそうだね

山田

ふたりとも、よくここまで頑張ったべ

りこ

へへへっ

アル

もっと頑張ればポケモンみたいなゲームだって夢《ゆめ》じゃないなって思えてきたよ

山田

それは良かったべ。ところでわだず、昨日ザギンで、こんなのかってきたべ

アル

ザギン……？

りこ

銀座《ぎんざ》のことじゃない？　どうやって行ったんだろう

山田

サングラスと、ジーパンだべ。どうだべ、似合《にあ》うべか？　これで人間になりすますんだべ

アル

ゴーグルと海パンだよ

りこ

ははは、海でも行くのー？

山田

あ……

山田

て……てやんでぇ、べらぼうめだべさ！　海に行ってこそ、真の男だべさ！
次回はもっと難《むずか》しいこと教えてやるべ！　覚悟《かくご》するべ！

りこ

ひぃ、う……うん。先生、こわい

アル

ゆるしてー

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

  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で、画像つきのおみくじゲームを作ろう！

オススメ記事

Pythonでrandomを使う。乱数の生成やランダムに選択する関数まとめ

Pythonでrandomを使う。乱数の生成やランダムに選択する関数まとめ

今回は、Pythonでランダムな数値を生成したり、リストのなかからランダムに選択、リストの順番をシャッフルする方法など、 […]
【WordPress】クイックタグを編集し効率よく記事を書こう！

【WordPress】クイックタグを編集し効率よく記事を書こう！

WordPressで記事を投稿するとき、クイックタグを使うと便利です。 デフォルトで用意されているクイックタグもあります […]
JavaScriptで画像を表示してみよう！　小学生からのプログラミング入門

JavaScriptで画像を表示してみよう！　小学生からのプログラミング入門

みなさんこんにちは。今日もプログラミングの勉強をはじめていきましょう。 前回、「JavaScriptで今月の残り日数を計 […]
CSSでの円の作り方と、その上下左右中央に文字を表示する方法

CSSでの円の作り方と、その上下左右中央に文字を表示する方法

CSSでの円の作り方と、その中央に文字を置く方法を紹介します。
Fish shellの使い方。プラグインなしでもここまで可愛くできる！

Fish shellの使い方。プラグインなしでもここまで可愛くできる！

先日、Macをフォーマットしたため、今まで構築したきた開発環境が消えました。といっても、バックアップはとってあるので戻す […]
Pugの中でPHPを使えるようにする方法

Pugの中でPHPを使えるようにする方法

HTMLを書くときPugを使うととても便利なのですが、PHPを書きたいと思ったときは少し工夫が必要になります。 今回は、 […]
SCSSとSASSならどっちを使う？ 違いを徹底比較！

SCSSとSASSならどっちを使う？ 違いを徹底比較！

Sassの表記には、２種類あります。SCSSとSASSです。 では、Sassを使うとしたら、どちらを使う […]
WordPress｜ショートコードの作り方&使い方。確実に使いこなす為のガイド。

WordPress｜ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。 改めまして、@It_is_Rです。 特 […]
Unityのダウンロードとインストールの方法【Mac】

Unityのダウンロードとインストールの方法【Mac】

UnityはUnity Technologiesのゲームエンジンです。2D、3Dゲーム両方に対応しており、大手企業も使用 […]
npm-scriptsの使い方。自作のコマンドによるタスク実行方法

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

畳んだ布団が飼い猫のお気に入りの場所になってます。@It_is_Rです。 npm-scriptsを使うことで、あらかじめ […]
オリジナルゲーム.com