①今日の作業フォルダ作成
②HTML（index.html）作成
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>マップチップの練習</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>③Javascriptを作成。名前はなんでもいい。（例：main.js）
console.log("Hello,World.");④index.htmlからJavascriptを読み込む。
Hello,worldと表示
⑤画像の準備（ダウンロードしてimgフォルダに保存）
⑤そこまでできたら、以下Javascriptに変更
//canvasの設定（せってい）
var canvas = document.getElementById( 'canvas' );
//コンテキストを取得（しゅとく）
var ctx = canvas.getContext( '2d' );
//画像（がぞう）のオブジェクトを作る
var img = new Image();
img.src = 'img/map.png';
//画像（がぞう）を表示（ひょうじ）する
addEventListener('load', function() {
ctx.drawImage( img, 0, 0, 32, 32, 0, 0, 32, 32 );
ctx.drawImage( img, 32, 0, 32, 32, 0, 128, 32, 32 );
}, false);配列について勉強（モニターにて学習）
var henguru = [ 'あいうえお', 'かきくけこ', 'さしすせそん', 'たっちゃん', 'なっちゃん', 'はーちゃん' ];
alert ( henguru[4] );alertの部分を以下に変更
alert ( henguru.length );次は二次元の配列にする
for (var i=0; i<5; i++) {
alert( '5回繰り返すよ！' );
}for (var i=0; i<5; i++) {
alert( henguru[i] );
}for (var i=0; i<henguru.length; i++) {
alert( henguru[i] );
}var x = 0;
while ( x < 5 ) {
alert( '5回繰り返すよ！' );
x++;
}var johnnys = [
[ '丸山くん', '大倉くん', '村上くん', '横山くん', '錦戸くん', '安田くん' ],
[ '中島くん', '菊池くん', '佐藤くん', '松島くん', 'マリウスくん' ]
];
alert ( johnnys[1][2] );その後以下Javascriptに変更
//canvasの設定（せってい）
var canvas = document.getElementById( 'canvas' );
canvas.width = 640; //canvasの横幅（よこはば）
canvas.height = 640; //canvasの縦幅（たてはば）
//コンテキストを取得（しゅとく）
var ctx = canvas.getContext( '2d' );
//マップチップのImageオブジェクトを作る
var mapchip = new Image();
mapchip.src = 'img/map.png';
//マップの作成（さくせい）
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]
];
//マップチップを表示（ひょうじ）する
addEventListener('load', function() {
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 );
}
}
}, false);