HTML5とCanvasを使ってみよう！　小学生からのプログラミング入門

更新 : 2024/05/02

by : It is R

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

これまでの講座《こうざ》では、JavScriptの基本《きほん》について学び、キャラクターの操作《そうさ》ができるようになりました。
ここからはゲーム開発《かいはつ》の中級編《ちゅうきゅうへん》へと入っていきます。すこし内容《ないよう》は難《むずか》しくなりますが、ここまでの講座をしっかり勉強《べんきょう》してきた君ならできるはず！

山田

諸君《しょくん》……よくここまで頑張った……べ

りこ

はっ、なんか、山田先生がいつもと雰囲気《ふんいき》がちがう！《

アル

なんだなんだ

山田

これまで、この講座《こうざ》はJavaScript入門としておこなってきた……べ。しかし、これからは中級編《ちゅうきゅうへん》に入る……べ

アル

必死《ひっし》に「べ」って言わないようにしてるのに、言っちゃってる

山田

てやんでぇ、べらぼうめ！　言ってない……べ。これからはもう少し深いところまで、解説《かいせつ》していくべ。ついてくるべ

りこ

はーい！

アル

はーい！

ディレクトリについて
HTML5について
Canvas《キャンバス》を使ってみよう！
Canvasで画像を表示してみよう！
メインループを作ろう！
りこちゃんのオブジェクトをImageオブジェクトと組み合わせて作ろう！
キーボードでりこちゃんを操作《そうさ》できるようにしてみよう！
りこちゃんの残像《ざんぞう》が残《のこ》らないようにしよう！
まとめ

ディレクトリについて

まずは、今回からcanvasを使って開発《かいはつ》していくしていくための、ディレクトリ構成《こうせい》をみていきましょう。

アル

ディレクトリってなぁに？

山田

ディレクトリってのは、フォルダのことだべ。なので、ディレクトリ構成は、フォルダやファイルがどのように置かれているかということだべ

ディレクトリ構成は以下のように作っていきます。

game
|-- index.html
|-- img/
|   `-- rico.png
`-- js/
    `-- script.js

rico.pngは、こちらをお使《つか》いください。

HTML5について

これまでの講座では、HTMLについてあまり解説していませんでした。
HTMLにはバージョンがあり、今ではHTML5を使うのが当たり前になっています。

なにやらとても難《むずか》しいことを言っているようですが、ぜんぜん難しくはありません。
HTML5を使いたいと思ったら、一番最初《さいしょ》に<!DOCTYPE html>を入力《にゅうりょく》してあげるだけです。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTML5を使ってみよう！</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>というのは「これがHTML5で書かれてますよ」という宣言《せんげん》です。

また、文字エンコーディングの指定《してい》もしておきましょう。

<head>タグ内に<meta charset="UTF-8">というタグを入れます。
これは文字エンコーディングを指定《してい》するものです。多くのサイトではUTF-8が使われていますので、「UTF-8」に設定《せってい》します。
これをすることで、ページを公開《こうかい》したときの文字化けを防《ふせ》ぐことができます。

アル

HTMLにバージョンがあるなんて、覚えられないよ

山田

今はもうほとんどのサイトがHTML5で作られているから、HTML5だけ覚えればいいと思うべよ

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

今回からはCanvas《キャンバス》を使ったゲーム開発《かいはつ》方法に移《うつ》っていきたいと思います。
CanvasをJavaScriptと合わせて使うことで、ブラウザ上に簡単に図形を表示したり、画像を扱《あつか》いやすくしたりすることができるようになります。

Canvasを使うには、bodyタグ内に、canvasタグを書いてあげればOKです。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Canvasを使ってみよう！</title>
</head>
<body>
	<canvas id="canvas"></canvas>
</body>
</html>

さらに、canvasタグの下にJavaScript ファイルを読み込むためのScriptタグをかいていきます。

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Canvasを使ってみよう！</title>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

山田

これでCanvasを使う準備じゅんびができたべよ

りこ

まだまだ、難むずかしくないね

次に、JavaScriptを書いてみましょう。
２行目〜４行目で、Canvasの設定《せってい》をします。
７行目でコンテキストを取得《しゅとく》します。
１０行目でx座標《ざひょう》が０、y座標が０の位置《いち》に、縦横《たてよこ》30pxの正方形《せいほうけい》を描きます。

js/script.js

//canvasの設定（せってい）
var canvas = document.getElementById( 'canvas' );
canvas.width = 640;		//canvasの横幅（よこはば）
canvas.height = 640;	//canvasの縦幅（たてはば）

//コンテキストを取得（しゅとく）
var ctx = canvas.getContext( '2d' );

//x=0, y=0 の位置（いち）に縦横（たてよこ）30pxの正方形（せいほうけい）を描く
ctx.fillRect( 0, 0, 30, 30 );

りこ

黒い正方形が描かれてる！

アル

コンテキストってなぁに？

山田

色んな意味《いみ》で使われる言葉《ことば》だべからな。この場合《ばあい》、プログラムを動かすのに必要《ひつよう》な情報《じょうほう》のことだべ

Canvas《キャンバス》はこのように、図形《ずけい》を描くことができるものですが、これを使うとゲーム開発がとてもやりやすくなります。

Canvasで画像を表示してみよう！

では、Canvasを使って画像《がぞう》を読み込んでみましょう。
Canvasを使った画像表示《がぞうひょうじ》にはdrawImage();を使います。

ここで、ひとつ注意点《ちゅういてん》があります。
例えば、以下のようにしても画像は表示されません。

js/script.js

//canvasの設定（せってい）
var canvas = document.getElementById( 'canvas' );
canvas.width = 640;		//canvasの横幅（よこはば）
canvas.height = 640;	//canvasの縦幅（たてはば）

//コンテキストを取得（しゅとく）
var ctx = canvas.getContext( '2d' );

//画像（がぞう）のオブジェクトを作成
var img = new Image();
img.src = 'img/rico.png';

//画像の表示
ctx.drawImage( img, 0, 0 );

これは画像のロードに時間がかかり、drawImage();までに画像を読み込めていないからです。
なので画像の表示は、画像の読み込みが完了《かんりょう》するまで待つ必要《ひつよう》があります。

そんな時は、addEventListenerやonloadを使います。
今回はaddEventListenerを使った方法《ほうほう》を紹介《しょうかい》します。

js/script.js

//canvasの設定（せってい）
var canvas = document.getElementById( 'canvas' );
canvas.width = 640;		//canvasの横幅（よこはば）
canvas.height = 640;	//canvasの縦幅（たてはば）

//コンテキストを取得（しゅとく）
var ctx = canvas.getContext( '2d' );

//画像（がぞう）のオブジェクトを作成
var img = new Image();
img.src = 'img/rico.png';

//ページと依存（いぞん）している全てのデータが読み込まれたら、画像を表示
addEventListener( 'load', function() {
	ctx.drawImage( img, 0, 0 );
}, false );

無事《ぶじ、画像が表示《ひょうじ》されました。

山田

drawImage()は画像がぞうを表示するものだべだけど、画像がロードされるのに時間がかかるべから、それまで待たなきゃダメなんだべ

りこ

むむっ、ちょっと難むずかしいけど、とにかく待つ必要ひつようがあるってことね

メインループを作ろう！

では、第１０回目の講座《こうざ》と同じように、メインループを作っていきましょう。

画像表示《がぞうひょうじ》の部分《ぶぶん》は、このメインループの中に入れます。
また、メインループは、addEventListenerを使って呼び出します。

function main() {
	//画像を表示
	ctx.drawImage( img, 0, 0 );

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

script.js全体はこのようになっています。

js/script.js

//canvasの設定（せってい）
var canvas = document.getElementById( 'canvas' );
canvas.width = 640;		//canvasの横幅（よこはば）
canvas.height = 640;	//canvasの縦幅（たてはば）
 
//コンテキストを取得（しゅとく）
var ctx = canvas.getContext( '2d' );
 
//画像（がぞう）のオブジェクトを作成
var img = new Image();
img.src = 'img/rico.png';
 
//メインループ
function main() {
	//画像を表示
	ctx.drawImage( img, 0, 0 );
 
	requestAnimationFrame( main );
}
//ページと依存（いぞん）している全てのデータが読み込まれたら、メインループ開始
addEventListener( 'load', main, false );

りこ

画像表示《がぞうひょうじ》をループさせてるだけだから、動《うご》きは今のところ変わらないね

りこちゃんのオブジェクトをImageオブジェクトと組み合わせて作ろう！

まずは第９回目でりこちゃんのオブジェクトを作ったときと同様《どうよう》に、オブジェクトを作ってみましょう。

var rico = new Object();
rico.x = 0;
rico.y = 0;

それをImageオブジェクトと組み合わせて使ってみましょう。

var rico = new Object();
rico.img = new Image();
rico.img.src = 'img/rico.png';
rico.x = 0;
rico.y = 0;

するとdrawImage()は以下のように置《お》き換《か》えることができます。

ctx.drawImage( rico.img, rico.x, rico.y );

山田

りこちゃんのオブジェクトを作って、その「rico.img」にImageオブジェクトを作っているんだべ。そうすると、実際《じっさい》に画像《がぞう》を表示《ひょうじ》したときに分かりやすくなるべよ

script.js全体はこのようになります。

js/script.js

//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;
 
//メインループ
function main() {
	//画像を表示
	ctx.drawImage( rico.img, rico.x, rico.y );
 
	requestAnimationFrame( main );
}
//ページと依存（いぞん）している全てのデータが読み込まれたら、メインループ開始
addEventListener( 'load', main, false );

キーボードでりこちゃんを操作《そうさ》できるようにしてみよう！

つづいて、キーボード入力でりこちゃんを操作できるようにします。
第１１回目で紹介《しょうかい》した方法で、りこちゃんを操作《そうさ》できるようにしていきます。

まず、どれだけりこちゃんを動かしたいかというプロパティを、りこちゃんのオブジェクトに追加します。

var rico = new Object();
rico.img = new Image();
rico.img.src = 'img/rico.png';
rico.x = 0;
rico.y = 0;
rico.move = 0;	//追加

キーボードのオブジェクトも作ります。

var key = new Object();
key.up = false;
key.down = false;
key.right = false;
key.left = false;
key.push = '';

メインループのなかに、キーボードが押されたときと、はなされたときの関数《かんすう》を呼び出すお願いを書きます。

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;
}

最後（さいご）に、キーボードが押された時に呼び出される関数（かんすう）を書きます。

//キーボードが押されたときに呼び出される関数（かんすう）
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;
}

script.js全体はこのようになります。

js/script.js

//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;

//キーボードのオブジェクトを作成
var key = new Object();
key.up = false;
key.down = false;
key.right = false;
key.left = false;
key.push = '';
 
//メインループ
function main() {
	//画像を表示
	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;
}

アル

これで、前回まで作った部分《ぶぶん》を、HTML5とCanvasで作れたんだ……ってあれ！？

りこ

きゃー、私が列になってる！

山田

ふっふっふ、君たち、わだずが講座《こうざ》の第2回目で教《おし》えたことを覚えているべか？

アル

なんだっけ？

山田

ゲームは画面を表示する、消す、表示する、消す……というのをすごいはやさで何度も繰り返しているんだべ。これでは画面を表示だけして、消すというのをやっていないんだべ！

りこちゃんの残像《ざんぞう》が残《のこ》らないようにしよう！

ゲームでは画面《がめん》を表示《ひょうじ》する、消《け》す、表示する、消す……というのをすごいはやさで繰り返しています。
ですので、画面を消すお願いが必要《ひつよう》になります。

今回は640×640でCanvasを作っていますので、fillRect()で（0, 0 〜 640, 640）までの四角形を作って塗《ぬ》りつぶします。

//塗（ぬ）りつぶす色を指定（してい）
ctx.fillStyle = "rgb( 0, 0, 0 )";
//塗（ぬ）りつぶす
ctx.fillRect(0, 0, 640, 640);

fillStyle()で塗りつぶす色を指定《してい》できます。
rgb()のなかの数を変更《へんこう》することで、色が変わります。今回は黒にしたかったので、(0, 0, 0)を指定しています。

script.js全体はこのようになります。

js/script.js

//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;

//キーボードのオブジェクトを作成
var key = new Object();
key.up = false;
key.down = false;
key.right = false;
key.left = false;
key.push = '';
 
//メインループ
function main() {
	//塗（ぬ）りつぶす色を指定（してい）
	ctx.fillStyle = "rgb( 0, 0, 0 )";
	//塗（ぬ）りつぶす
	ctx.fillRect(0, 0, 640, 640);

	//画像を表示
	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;
}