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

更新 : 2022/01/06

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

アル

これで、前回まで作った部分《ぶぶん》を、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;
}

りこ

私の残像《ざんぞう》が消《き》えて、ちゃんと動くようになったね！

山田

とにかく、基本《きほん》は表示する、消す、をすごいはやさで何度も繰り返しているんだべ

まとめ

今回は、いままで学んできたことをCanvasを使ってやってみました。
やっていることは今までと同じなので、分からない部分《ぶぶん》があれば今までの講座《こうざ》をもう一度、復習《ふくしゅう》してみてください。

山田

こんかいはHTML5とCanvasを使ってみたべよ

アル

もう普通に「べ」って言っちゃってるね

りこ

ほんとだ

山田

……はっ！　だべ！　しまったべ

アル

ねぇ、もっと、ゲームっぽいの作りたいよ！

りこ

こらアル、じっくりと色んなこと勉強《べんきょう》しながら作っていくんだから、焦《あせ》っちゃだめよ！

アル

なんだよ……ちぇ

山田

……諸君《しょくん》、これからももっと色々学んでいくから、しっかりとついてこいよ……

りこ

はっ、「べ」って言ってない

山田

……だ……べ

アル

言った

山田

てやんでぇ、べらぼうめだべ！　とにかく、これからも頑張るべ！

りこ

はーい！

アル

はーい！

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

スポンサードリンク

オススメ記事

【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

Bootstrap4の使い方、第6回目です。前回、Bootstrap4でのボタンの作り方を紹介しましたが、今回はそのボタンをグループにしてひとまとめにする方法です。 Bootstrapにはボタング

2018/08/06

pipenvの使い方。MacにPython環境を構築する方法

みなさんこんにちは。@It_is_Rです。今回はpipenvを使って、MacにPython環境を構築する方法を紹介します。 pipenvとは pipenvは、Pythonでの開発

2021/03/23

Javaでじゃんけんゲームを作ろう。サンプルコードあり！

※追記(2018/8/29) より分かりやすい記事になるよう修正しました。今回はJavaを使って、じゃんけんゲームを作る方法を紹介します。 eclipseがインストールされており、Java

2014/07/12

【Unity】開発したiOSゲームをiPhoneで実機テストする方法

こんにちは。現在、最新ゲーム熱意製作中の@It_is_Rです。個人での開発はとても大変で、時間がかかってしまっていますが、すこしずつ形にしていっています。さて、今回はUnityで開発したiO

2021/09/16

WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法！

愛と勇気だけが友達の@It_is_Rです。今回はPugでWordPressテーマを作る方法を少し紹介します。詳しいテーマの作り方はこちらをご覧ください。 WordPressのテーマを自作

2017/12/23

【JavaScript】文字を表示するクラスを作ってみよう！　小学生からのプログラミング入門

小学生からのJavaScript講座です。このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。シリーズの一覧はこちらをご覧ください。さて、ゲーム作成で重要なキ

2019/02/16

FC2ブログ ”最強” カスタマイズ入門講座。ブログ全体の幅を変更。

現実社会では殆ど言葉を発しない@It_is_Rです。だって、厄介なことになりたくないじゃん。今回も前回に引き続き、FC2ブログカスタマイズの記事です。前回、ヘッダーのサイズを変更しましたが、ブ

2015/11/22

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

こんにちわ。美しいものほど濁って見える@It_is_Rです。今回もFC2ブログの最強カスタマイズを始めていこうと思います。今回は文字の大きさや色など、ブログ内の文字の設定をしていきます。初

2015/08/17

リセットCSS は何を使う？おすすめ８選（コピペも可能！）

Web開発でブラウザごとの表示の違いをリセットしてくれるリセットCSS というものがあります。しかし、何を使っていいのかと感じている人もいると思います。今回はこのリセットCSS につい

2018/01/01

Markdown記法一覧。最速で文章を書くには、これを覚えるべし！

Markdownは文章を記述するための言語です。サイト上で文章を作るとき、タグを使うことで、その文章に様々な意味を持たせます。しかし、直接タグを打ち込むのは大変ですし、エディタの機能を使おう

2021/08/18

5件のコメント “HTML5とCanvasを使ってみよう！　小学生からのプログラミング入門”

牧牧より:

2021年2月2日 12:02 AM

> It is R さん
コメントありがとうございます。返信が非常に遅くなり申し訳ございません。

この章成し遂げました。黒画面にpngが縦横無尽に泳ぎ回れるようになりました。手順的に次回辺り壁の作成に着手するのかな？まずは先週の水曜木曜あたりに投稿した、黒いボックスがなかなか表示できないものだったのでご質問をさせていただきました。Rさんのアドバイスの通り、(もし、htmlファイルとjsファイルが同じディレクトリにあるのでしたら、src=”script.js”となります。)の部分が歯車をストップさせていた所でした。js/の部分を撤去すると正常に■が出現しましツァ。実はこれ土曜日辺りに出来ていたのですが、この先がなかなかどうして進みませんでした。
　と言いますのも、私はりこちゃんの画像以前に40×40のgifキャラを用意していて、「まぁricoの部分をワードに貼って置換で名前変えればええやろ、追加でpngはgifにかえればええやろ。」と考えていました。【canvasで画像を表示してみよう】で日にちを喰いました。gifなのに1枚目の硬直状態で貼れているものですから、動かない画像に目が行ったんです。で結局できずに、pngを作って再チャレンジ。当然うまくいきました。
　もう一つRさんが仰ってた、(ブラウザのコンソールを開き、エラーを確認してください。もしエラーが表示されていれば、そこから原因を探ることができるはずです。)ここの部分のおかげで、Ricoちゃんがドミノ状に並んでる画像の部分をスキップして即真っ黒に出来ました。一つエラーが出ていたんですよ、Uncaught SyntaxError: Unexpected token ‘=’です。key.left ===のところが余分に=があった。
　なんといっても最後までたどり着けたのはRさんのおかげです。手持ちの本で理解するのも大切だが、山田先生とアルくんとりこちゃんの会話があるとより邁進できる気がしたので。相談できてよかった。また解らなかったらご教授ください。

返信
1. It is R より:
  
  2021年2月2日 8:23 PM
  
  >牧牧さん
  
  プログラミングは、一文字違ってただけでもエラーになってしまうので、難しいですよね。
  それでも、いろいろ試行錯誤して、思ったように動作したときは、とても感動します。
  
  そして、ぶじ解決されたとのこと、私も嬉しく思います。
  これからもどんどんチャレンジを続けていってください。
  
  もちろん、またなにかありましたら、お気軽にご相談ください。
  
  返信
牧牧より:

2021年1月28日 2:20 PM

黒いボックスが表示されない場合どうすればよいのでしょうか？
また表示のやり方自体は、h1で囲った■や、あらかじめ自分ペイントで作成しておいた「例,黒png」みたいなものをアップロードしておいて、img scrで大きさをアップさせるといった手段もあるかと思います。私の使っているサーバーコントロールパネルの場合はフォルダを作ってない平らなディレクトリです。上記の講座にもindex htmlを使ってるとありますよね。私の場合はindex htmlはすでに別の画面として利用していますから別のhtmlファイルや別のscript.jsで使用しています。どんな原因が考えられますか？知恵をください。

返信
1. It is R より:
  
  2021年1月28日 5:26 PM
  
  >牧牧さん
  
  コメント、ありがとうございます。
  返信がおそくなり、すみませんでした。
  
  おみくじからじゃんけんゲームに発展できたとのこと、私の餅ベーコンも燃え上がりましツァ。
  
  まず、■をどうしてpngやgifなどの画像で作らなかったのかですが、この記事の最後のほうになると、この■でCanvas全体を塗りつぶしたりします。
  Canvasはゲームなどで画像やテキストを表示したり動かしたりする領域で、Canvasの端から端までを■で塗りつぶすことで、表示した画像などを消して、何もない状態にすることに使ったりするのです。
  
  さて、■が表示されない、とのことですが、もしかすると、うまくjsファイルが読み込めていないのかもしれません。
  
  作成したhtmlファイルの、scriptタグを確認してください。
  フォルダを作っていない、とのことですが、この記事では、jsフォルダにscript.jsを作成していますので、そのままのhtmlファイルだとjsファイルまでの場所が異なることになり、エラーになってしまいます。
  もし、htmlファイルとjsファイルが同じディレクトリにあるのでしたら、src="script.js"となります。
  
  もしscript.jsまでのパスの指定が正しいようでしたら、ブラウザのコンソールを開き、エラーを確認してください。
  コンソールの開き方はブラウザによって変わってきますが、Chromeならば右クリックして「検証」から、開くことができます。
  もしエラーが表示されていれば、そこから原因を探ることができるはずです。
  
  返信
牧牧より:

2021年1月27日 11:10 PM

あれ？黒い正方形が表示されないゾ?思案して３日たつので直接聞きたいと思いました。きっとどこかで間違ってるんだろう。山アりシリーズ面白くってhtml/js/cssの第6話あたりから見始めました。おみくじのAIを使ってじゃんけん制作に発展できたのが一番の餅ベーコンになっツァ。
　さて、質問に戻りますが黒い正方形が私のところには表示されません。これは困っツァ。あれってそもそも■とか、あらかじめペイントでpngやgifを作っておいて、例えばみたいな感じで作られたものとは意味が違うのかな？
　参考書とかも見てるんだけど広すぎるvar表記、そもそも装飾はcssでやりなさいみたいなことも書いてあってアーコンガラガッツァッツァ。可能な範囲で回答お願いします。

返信

ディレクトリについて

HTML5について

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

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

メインループを作ろう！

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

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

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

まとめ

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

オススメ記事

【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

pipenvの使い方。MacにPython環境を構築する方法

Javaでじゃんけんゲームを作ろう。サンプルコードあり！

【Unity】開発したiOSゲームをiPhoneで実機テストする方法

WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法！

【JavaScript】文字を表示するクラスを作ってみよう！ 小学生からのプログラミング入門

FC2ブログ ”最強” カスタマイズ入門講座。ブログ全体の幅を変更。

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

リセットCSS は何を使う？ おすすめ８選（コピペも可能！）

Markdown記法一覧。最速で文章を書くには、これを覚えるべし！

5件のコメント “HTML5とCanvasを使ってみよう！ 小学生からのプログラミング入門”

コメントを残す（コメントは承認後に反映されます） コメントをキャンセル

【JavaScript】文字を表示するクラスを作ってみよう！　小学生からのプログラミング入門

リセットCSS は何を使う？おすすめ８選（コピペも可能！）

5件のコメント “HTML5とCanvasを使ってみよう！　小学生からのプログラミング入門”

コメントを残す（コメントは承認後に反映されます）コメントをキャンセル