背景（マップ）(JavaScript)

01 <!DOCTYPE HTML> 02 <HTML> 03 <HEAD> 04 <TITLE>背景（マップ）</TITLE> 05 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> 06 <META NAME=viewport CONTENT="width=device-width, initial-scale=1"> 07 <LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css"> 08 <SCRIPT TYPE="text/javascript"> 09 canvas = null; 10 ctx = null; 11 mp = null; 12 timerID = -1; 13 14 function start() 15 { 16 // キャンバス情報 17 canvas = document.getElementById('canvas_e'); // キャンバス要素の取得 18 ctx = canvas.getContext('2d'); // キャンバスからコンテキストを取得 19 // Map オブジェクト 20 mp = new Map(); 21 // タイマーのスタート 22 timerID = setInterval('draw()', 30); 23 } 24 // 描画 25 function draw() 26 { 27 // キャンバスのクリア 28 ctx.clearRect(0, 0, canvas.width, canvas.height); 29 // 移動 30 mp.x += mp.v_x; 31 // 背景の描画 32 for (let i1 = 0; i1 < mp.col; i1++) { 33 let x = mp.x + mp.width * i1; 34 if (x + mp.width >= 0 && x <= canvas.width) { 35 for (let i2 = 0; i2 < mp.row; i2++) { 36 if (mp.map[i2][i1] > 0) { 37 let y = i2 * mp.height; 38 ctx.drawImage(mp.image[mp.map[i2][i1]-1], x, y); 39 } 40 } 41 } 42 } 43 } 44 // Map オブジェクト（プロパティ） 45 function Map() 46 { 47 // 画像の配置 48 this.map = new Array(); 49 this.map[0] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); 50 this.map[1] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); 51 this.map[2] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); 52 this.map[3] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); 53 this.map[4] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); 54 this.map[5] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); 55 this.map[6] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); 56 this.map[7] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); 57 this.map[8] = new Array(1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2); 58 this.map[9] = new Array(1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2); 59 this.map[10] = new Array(1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2); 60 this.map[11] = new Array(1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2); 61 this.image = new Array(); // ブロック画像 62 this.row = 12; // ブロックの行数 63 this.col = 26; // ブロックの列数 64 this.x = 0; // 背景の位置 65 this.v_x = -2; // 背景の水平方向移動速度 66 this.width = 25; // ブロックの幅 67 this.height = 25; // ブロックの高さ 68 // ブロック画像の読み込み 69 this.image[0] = new Image(); 70 this.image[0].src = "obj1.jpg"; 71 this.image[1] = new Image(); 72 this.image[1].src = "obj2.jpg"; 73 } 74 </SCRIPT> 75 </HEAD> 76 <BODY CLASS="white" STYLE="text-align: center" onLoad="start()"> 77 <H1>背景（マップ）</H1> 78 <CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="400" HEIGHT="300"></CANVAS> 79 </BODY> 80 </HTML>

20 行目

　　Map オブジェクトを生成し，変数 mp に代入しています．

30 行目

　　マップを左に 2 ピクセル移動しています．このように，Map オブジェクトのプロパティは，mp.x，mp.v_x などのように，「 mp. 」を付加した形だけで参照可能です．

32 行目

　　この for 文によって，マップの各列に対して 33 行目～ 41 行目の処理が繰り返されます．

33 行目

　　i1 列にあるブロックの左端の x 座標です．

34 行目

　　この if 文で，i1 列にあるブロックがキャンバス内に存在するか否かをチェックしています．存在する場合は，以下の処理が実行されます．

35 行目

　　この for 文によって，マップの各行に対して 35 行目～ 40 行目の処理が繰り返されます．

36 行目～ 39 行目

　　マップのブロックの値が正である箇所に，指定された画像を描画しています．

48 行目～ 60 行目

　　12 行 26 列のマップを 2 次元配列を使用して定義しています．このように，配列を定義し（ 48 行目），その各要素を再び配列として定義する（この例の場合は，初期設定も行っている）ことによって，2 次元配列を定義することができます．値が 0 の箇所には何も表示されず，1 または 2 の箇所には，画像が表示されます．

　　「ビットマップ，フィルタ，外部画像」の章におけるビットマップの節においては，1 次元配列を 2 次元配列のような形で扱いました．逆に，2 次元配列が連続した領域に確保されていれば，2 次元配列を 1 次元配列のように取り扱うことが基本的に可能です．実際，C/C++ の場合は可能ですが，JavaScript の場合は，多次元配列が連続した領域に確保されるという保証もなく，そのような処理を行うことはできません．しかし，例えば，

	map1 = map[8];

のような記述によって，2 次元配列 map の 9 行目だけを 1 次元配列として扱うことが可能です（任意の行において可能）．ただし，map1 と map[8] は，同じ場所（行に対するデータが記憶されている場所の先頭）を指しているポインタとしてみなすことができるため，例えば，map1[4] の値を変更すれば，map[8][4] も変化します（逆も同様）．

62 行目～ 63 行目

　　マップの行数と列数です．

65 行目

　　マップの移動速度です．

66 行目～ 67 行目

　　マップを構成するブロックの大きさです．

69 行目～ 72 行目

　　マップに必要な画像を読み込んでいます．

01 <!DOCTYPE HTML> 02 <HTML> 03 <HEAD> 04 <TITLE>背景（マップ）</TITLE> 05 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> 06 <META NAME=viewport CONTENT="width=device-width, initial-scale=1"> 07 <LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css"> 08 <SCRIPT TYPE="text/javascript"> 09 canvas = null; 10 ctx = null; 11 mp = new Array(); 12 timerID = -1; 13 dsp = new Array(1, 0); 14 15 function start() 16 { 17 // キャンバス情報 18 canvas = document.getElementById('canvas_e'); // キャンバス要素の取得 19 ctx = canvas.getContext('2d'); // キャンバスからコンテキストを取得 20 // Map オブジェクト 21 mp[0] = new Map(); 22 mp[1] = new Map(); 23 mp[1].x = canvas.width; 24 // タイマーのスタート 25 timerID = setInterval('draw()', 30); 26 } 27 // 描画 28 function draw() 29 { 30 // キャンバスのクリア 31 ctx.clearRect(0, 0, canvas.width, canvas.height); 32 // 移動 33 for (let i1 = 0; i1 < 2; i1++) { 34 let k = (i1 + 1) % 2; 35 if (dsp[i1] > 0) { 36 mp[i1].x += mp[i1].v_x; 37 if (mp[i1].x + mp[i1].width * mp[i1].col <= canvas.width) { 38 mp[k].x = mp[i1].x + mp[i1].width * mp[i1].col; 39 dsp[k] = 1; 40 } 41 else if (mp[i1].x + mp[i1].width * mp[i1].col <= 0) 42 dsp[i1] = 0; 43 } 44 } 45 // 背景の描画 46 for (let i0 = 0; i0 < 2; i0 ++) { 47 if (dsp[i0] > 0) { 48 for (let i1 = 0; i1 < mp[i0].col; i1++) { 49 let x = mp[i0].x + mp[i0].width * i1; 50 if (x + mp[i0].width >= 0 && x <= canvas.width) { 51 for (let i2 = 0; i2 < mp[i0].row; i2++) { 52 if (mp[i0].map[i2][i1] > 0) { 53 let y = i2 * mp[i0].height; 54 ctx.drawImage(mp[i0].image[mp[i0].map[i2][i1]-1], x, y); 55 } 56 } 57 } 58 } 59 } 60 } 61 } 62 // Map オブジェクト（プロパティ） 63 function Map() 64 { 65 // 画像の配置 66 this.map = new Array(); 67 this.map[0] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); 68 this.map[1] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); 69 this.map[2] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); 70 this.map[3] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); 71 this.map[4] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); 72 this.map[5] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); 73 this.map[6] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); 74 this.map[7] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); 75 this.map[8] = new Array(1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2); 76 this.map[9] = new Array(1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2); 77 this.map[10] = new Array(1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2); 78 this.map[11] = new Array(1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2); 79 this.image = new Array(); // ブロック画像 80 this.row = 12; // ブロックの行数 81 this.col = 26; // ブロックの列数 82 this.x = 0; // 背景の位置 83 this.v_x = -2; // 背景の水平方向移動速度 84 this.width = 25; // ブロックの幅 85 this.height = 25; // ブロックの高さ 86 // ブロック画像の読み込み 87 this.image[0] = new Image(); 88 this.image[0].src = "obj1.jpg"; 89 this.image[1] = new Image(); 90 this.image[1].src = "obj2.jpg"; 91 } 92 </SCRIPT> 93 </HEAD> 94 <BODY CLASS="white" STYLE="text-align: center" onLoad="start()"> 95 <H1>背景（マップ）</H1> 96 <CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="400" HEIGHT="300"></CANVAS> 97 </BODY> 98 </HTML>