- 迷路から脱出するゲームです．基本的に，「ゲーム枠の作成」で説明した方法とほぼ同じ方法で作成します．ただし，画面のサイズは変更しています．また，ゲームオーバーの画面は存在しません．以下，各プログラムに対して，「ゲーム枠の作成」の場合との違いについて説明していきます．
- HTML ファイル
- 「ゲーム枠の作成」における HTML ファイルとほとんど同じですが，「ゲームクリア」ボタンと「ゲームオーバー」ボタンは除き，主人公を上下左右に移動させるため，「上」ボタン，「下」ボタン，「左」ボタン，及び，「右」ボタンが追加してあります．
<!DOCTYPE HTML> <HTML> <HEAD> <TITLE>迷路：ステップ１</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <META NAME=viewport CONTENT="width=device-width, initial-scale=1"> <LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css"> <SCRIPT TYPE="text/javascript" SRC="main/MainPanel.js"></SCRIPT> <SCRIPT TYPE="text/javascript" SRC="start/StartPanel.js"></SCRIPT> <SCRIPT TYPE="text/javascript" SRC="game/GamePanel.js"></SCRIPT> <SCRIPT TYPE="text/javascript" SRC="clear/GameClearPanel.js"></SCRIPT> </HEAD> <BODY CLASS="eeffee" onLoad="mp_start()"> <H1>迷路：ステップ１</H1> <CANVAS ID="canvas_e" STYLE="background-color: #ffffff;" WIDTH="300" HEIGHT="300"></CANVAS><BR> <A HREF="method.htm" TARGET="method"><BUTTON ID="method" CLASS="std">遊び方</BUTTON></A> <BUTTON ID="start" CLASS="std" onClick="gp_start()">ゲーム開始</BUTTON> <BUTTON ID="first" CLASS="std" onClick="st_start()">最初から再開</BUTTON> <BUTTON ID="finish" CLASS="std" onClick="mp.finish()">ゲーム終了</BUTTON> <BUTTON ID="up" CLASS="std" onClick="gp.move(0)">上</BUTTON><BR> <BUTTON ID="left" CLASS="std" onClick="gp.move(2)">左</BUTTON> <BUTTON ID="right" CLASS="std" onClick="gp.move(3)">右</BUTTON><BR> <BUTTON ID="down" CLASS="std" onClick="gp.move(1)">下</BUTTON> </BODY> </HTML>
- 「ゲーム枠の作成」における HTML ファイルとほとんど同じですが，「ゲームクリア」ボタンと「ゲームオーバー」ボタンは除き，主人公を上下左右に移動させるため，「上」ボタン，「下」ボタン，「左」ボタン，及び，「右」ボタンが追加してあります．
- MainPanel
- このプログラムに関しても，「ゲーム枠の作成」における MainPanel とほぼ同じですが，ボタンの制御部分が異なっていまです．
mp = null; // MainPanel オブジェクト // // MainPanel の開始 // function mp_start() { // キャンバス情報 let canvas = document.getElementById('canvas_e'); // キャンバス要素の取得 let ctx = canvas.getContext('2d'); // キャンバスからコンテキストを取得 // MainPanel オブジェクト mp = new MainPanel(canvas, ctx); // StartPanel の表示 st_start(); } // // MainPanel オブジェクト（プロパティ） // function MainPanel(canvas, ctx) { this.canvas = canvas; // キャンバス要素 this.ctx = ctx; // キャンバスのコンテキスト this.level = 1; // ゲームレベル return this; } // // MainPanel オブジェクト（メソッド） // MainPanel.prototype.finish = function() { // キャンバスのクリア mp.ctx.clearRect(0, 0, mp.canvas.width, mp.canvas.height); // ボタンを非表示 document.getElementById('method').style.display = "none"; document.getElementById('start').style.display = "none"; document.getElementById('first').style.display = "none"; document.getElementById('finish').style.display = "none"; document.getElementById('up').style.display = "none"; document.getElementById('left').style.display = "none"; document.getElementById('right').style.display = "none"; document.getElementById('down').style.display = "none"; } - このプログラムに関しても，「ゲーム枠の作成」における MainPanel とほぼ同じですが，ボタンの制御部分が異なっていまです．
- StartPanel
- このプログラムに関しても，「ゲーム枠の作成」における StartPanel とほとんど同じです．ボタンの制御部分が異なっているだけです．当然のことながら，ゲームタイトル及び「遊び方」の内容を変更しています．
// // StartPanel の開始 // function st_start() { mp.level = 1; // ゲームレベルの設定 // キャンバスのクリア mp.ctx.clearRect(0, 0, mp.canvas.width, mp.canvas.height); // ゲームタイトルの表示 mp.ctx.font = "40px 'ＭＳ ゴシック'"; mp.ctx.textBaseline = "middle"; mp.ctx.textAlign = "center"; mp.ctx.fillStyle = "rgb(0, 0, 0)"; mp.ctx.fillText("ブロック崩し", mp.canvas.width/2, mp.canvas.height/2); // ボタンの表示制御 document.getElementById('method').style.display = ""; document.getElementById('start').style.display = ""; document.getElementById('first').style.display = "none"; document.getElementById('finish').style.display = "none"; document.getElementById('up').style.display = "none"; document.getElementById('left').style.display = "none"; document.getElementById('right').style.display = "none"; document.getElementById('down').style.display = "none"; document.getElementById('start').innerHTML = "ゲーム開始"; } - このプログラムに関しても，「ゲーム枠の作成」における StartPanel とほとんど同じです．ボタンの制御部分が異なっているだけです．当然のことながら，ゲームタイトル及び「遊び方」の内容を変更しています．
- GamePanel
- GamePanel は，実際のゲームを実現するプログラムです．従って，「ゲーム枠の作成」における GamePanel とは，ゲームの種類によってその内容は大きく異なります．今後，このプログラムを完成させていくことになりますが，ここでは，必要なオブジェクト（迷路と主人公）を生成しています．
01 gp = null; // GamePanel オブジェクト 02 03 // 04 // GamePanel の開始 05 // 06 function gp_start() 07 { 08 // GamePanel オブジェクト 09 gp = new GamePanel(); 10 // 初期状態の描画 11 gp.draw(); 12 // ボタンの表示制御 13 document.getElementById('method').style.display = "none"; 14 document.getElementById('start').style.display = "none"; 15 document.getElementById('first').style.display = "none"; 16 document.getElementById('finish').style.display = "none"; 17 document.getElementById('up').style.display = ""; 18 document.getElementById('left').style.display = ""; 19 document.getElementById('right').style.display = ""; 20 document.getElementById('down').style.display = ""; 21 } 22 // 23 // GamePanel オブジェクト（プロパティ） 24 // 25 function GamePanel() 26 { 27 this.mz = new Maze(); // Maze オブジェクト 28 this.hr = new Hero(); // Hero オブジェクト 29 return this; 30 } 31 // 32 // GamePanel オブジェクト（メソッド draw） 33 // 34 GamePanel.prototype.draw = function() 35 { 36 // キャンバスのクリア 37 mp.ctx.clearRect(0, 0, mp.canvas.width, mp.canvas.height); 38 } 39 // 40 // GamePanel オブジェクト（メソッド move） 41 // 42 GamePanel.prototype.move = function(sw) 43 { 44 switch (sw) { 45 case 0: // 上へ 46 break; 47 case 1: // 下へ 48 break; 49 case 2: // 左へ 50 gcp_start(); 51 break; 52 case 3: // 右へ 53 break; 54 } 55 } 56 // 57 // Maze オブジェクト（プロパティ） 58 // 59 function Maze() 60 { 61 return this; 62 } 63 // 64 // Hero オブジェクト（プロパティ） 65 // 66 function Hero() 67 { 68 return this; 69 }- 09 行目（ gp_start 関数）
- GamePanel オブジェクトを生成し，その結果をグローバル変数 gp（ 01 行目）に代入しています．具体的には，25 行目～ 30 行目に記述された GamePanel 関数が実行されます．
- 11 行目（ gp_start 関数）
- 状態を描画する GamePanel オブジェクトの draw メソッド（ 34 行目～ 38 行目）によって，初期状態を描画しています．現時点では，領域をクリアしているだけです．
- 17 行目～ 20 行目（ gp_start 関数）
- 「上」ボタン，「下」ボタン，「左」ボタン，及び，「右」ボタンを表示しています．これらのボタンがクリックされた時の処理は，GamePanel オブジェクトの move メソッド（ 42 行目～ 54 行目）に記述してありますが，現時点では，状態移動の確認のため，「左」ボタンをクリックするとゲームクリアの画面に移行するように設定されています．
- 27，28 行目（ GamePanel 関数）
- GamePanel オブジェクトに，迷路（ Maze オブジェクト）と主人公（ Hero オブジェクト）を追加しています．各オブジェクトの定義は，それぞれ，59 行目～ 62 行目，及び，66 行目～ 69 行目です．ただし，現時点では，その内容が全く定義されていません．
- 42 行目～ 55 行目（ move 関数）
- 上下左右のボタンがクリックされた時の処理を行う GamePanel オブジェクトの move メソッドの定義です．どのボタンが押されたかを判別するために，switch 文を使用して記述しています．break 文は，そこで処理を中止して，switch 文の外へ出るための文です．switch 文は，sw の値によって，k の値と sw の値が一致した「 case k 」文以降が実行されます（以降が実行される点に注意）．ただし，k は定数である必要があります．ここで使用している内容であれば，else if 文を使用した
if (sw == 0) ; else if (sw == 1) ; else if (sw == 2) gcp_start(); else if (sw == 3) ;
- と全く同じ処理を行うことになりますが，break 文が存在しない時の処理は異なってきます．例えば，最初の break 文が存在しない場合，変数 sw の値が 1 以上の時は全く同じ処理になりますが，0 の場合は，0 の場合の処理に続いて，sw が 1 の場合の処理を実行することになります．
- switch 文の一般形式は以下の通りであり，式の値が定数式に一致した case 文以下が実行されます．いずれの定数式とも一致しなかった場合は，default 以下が実行されます．
switch （式） { [case 定数式１ : ] [文１] [case 定数式２ : ] [文２] ・・・・・ [default : ］ [文ｎ] }
- GamePanel は，実際のゲームを実現するプログラムです．従って，「ゲーム枠の作成」における GamePanel とは，ゲームの種類によってその内容は大きく異なります．今後，このプログラムを完成させていくことになりますが，ここでは，必要なオブジェクト（迷路と主人公）を生成しています．
- GameClearPanel
- このプログラムに関しても，「ゲーム枠の作成」における GameClearPanel とほぼ同じです．違いは，ボタンの制御部分と，レベルが 2 までしか無い点だけです．
// // GameClearPanel の開始 // function gcp_start() { // キャンバスのクリア mp.ctx.clearRect(0, 0, mp.canvas.width, mp.canvas.height); // タイトルの表示 mp.ctx.font = "40px 'ＭＳ ゴシック'"; mp.ctx.textBaseline = "middle"; mp.ctx.textAlign = "center"; mp.ctx.fillStyle = "rgb(0, 0, 0)"; mp.ctx.fillText("Game Clear!", mp.canvas.width/2, mp.canvas.height/2); // ボタンの表示制御 document.getElementById('method').style.display = "none"; if (mp.level > 1) { // 最初からゲーム再開 document.getElementById('start').style.display = "none"; document.getElementById('first').style.display = ""; } else { // レベルアップ mp.level++; document.getElementById('start').style.display = ""; document.getElementById('first').style.display = "none"; document.getElementById('start').innerHTML = "次のレベル"; } document.getElementById('finish').style.display = ""; document.getElementById('up').style.display = "none"; document.getElementById('left').style.display = "none"; document.getElementById('right').style.display = "none"; document.getElementById('down').style.display = "none"; } - このプログラムに関しても，「ゲーム枠の作成」における GameClearPanel とほぼ同じです．違いは，ボタンの制御部分と，レベルが 2 までしか無い点だけです．
- HTML ファイル
- Maze オブジェクトと Hero オブジェクトの内容を定義し，迷路と主人公を描きます．修正するプログラムは，GamePanel の Maze 関数，Hero 関数，及び，draw メソッド（ GamePanel オブジェクトのメソッド）です．まず，Maze 関数から順に説明していきます．迷路は，縦横各々 40 個の 15 ピクセル四方のブロックから構成されているものとします．また，ブロックの状態が 1 である時は壁，0 である時は道を構成するものとします．具体的には，ここで使用する迷路は以下に示すようなものです．
001 gp = null; // GamePanel オブジェクト 002 003 // 004 // GamePanel の開始 005 // 006 function gp_start() 007 { 008 // GamePanel オブジェクト 009 gp = new GamePanel(); 010 // 初期状態の描画 011 gp.draw(); 012 // ボタンの表示制御 013 document.getElementById('method').style.display = "none"; 014 document.getElementById('start').style.display = "none"; 015 document.getElementById('first').style.display = "none"; 016 document.getElementById('finish').style.display = "none"; 017 document.getElementById('up').style.display = ""; 018 document.getElementById('left').style.display = ""; 019 document.getElementById('right').style.display = ""; 020 document.getElementById('down').style.display = ""; 021 } 022 // 023 // GamePanel オブジェクト（プロパティ） 024 // 025 function GamePanel() 026 { 027 this.mz = new Maze(); // Maze オブジェクト 028 this.hr = new Hero(); // Hero オブジェクト 029 return this; 030 } 031 // 032 // GamePanel オブジェクト（メソッド draw） 033 // 034 GamePanel.prototype.draw = function() 035 { 036 // キャンバスのクリア 037 mp.ctx.clearRect(0, 0, mp.canvas.width, mp.canvas.height); 038 // 描画 039 // 迷路 040 mp.ctx.putImageData(gp.mz.image, gp.mz.x*gp.mz.blk, gp.mz.y*gp.mz.blk); 041 // 主人公 042 mp.ctx.beginPath(); 043 mp.ctx.fillStyle = "rgb(0, 255, 0)"; 044 let px = (gp.hr.x + gp.mz.x) * gp.mz.blk + gp.hr.r + 1; 045 let py = (gp.hr.y + gp.mz.y) * gp.mz.blk + gp.hr.r + 1; 046 mp.ctx.arc(px, py, gp.hr.r, 0, 2*Math.PI); 047 mp.ctx.fill(); 048 } 049 // 050 // GamePanel オブジェクト（メソッド move） 051 // 052 GamePanel.prototype.move = function(sw) 053 { 054 switch (sw) { 055 case 0: // 上へ 056 break; 057 case 1: // 下へ 058 break; 059 case 2: // 左へ 060 gcp_start(); 061 break; 062 case 3: // 右へ 063 break; 064 } 065 } 066 // 067 // Maze オブジェクト（プロパティ） 068 // 069 function Maze() 070 { 071 this.x = -9; // 迷路の位置（横） 072 this.y = -9; // 迷路の位置（縦） 073 this.width = 40; // 迷路の幅 074 this.height = 40; // 迷路の高さ 075 this.blk = 15; // 迷路におけるブロックのサイズ 076 // レベル１における迷路の地図（0：道，1：壁） 077 this.map1 = new Array(); 078 this.map1[0] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 079 this.map1[1] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 080 this.map1[2] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 081 this.map1[3] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 082 this.map1[4] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 083 this.map1[5] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 084 this.map1[6] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 085 this.map1[7] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 086 this.map1[8] = new Array(1,1,1,1,1,1,1,1,1,1,1,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,0,0,0); 087 this.map1[9] = new Array(1,1,1,1,1,1,1,1,1,1,1,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,0,0,0); 088 this.map1[10] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 089 this.map1[11] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 090 this.map1[12] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 091 this.map1[13] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 092 this.map1[14] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 093 this.map1[15] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1); 094 this.map1[16] = new Array(1,1,1,1,1,1,1,1,1,1,1,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,0,1,1); 095 this.map1[17] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,1,1); 096 this.map1[18] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,1,1); 097 this.map1[19] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,1,1); 098 this.map1[20] = new Array(0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 099 this.map1[21] = new Array(0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 100 this.map1[22] = new Array(0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 101 this.map1[23] = new Array(0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 102 this.map1[24] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 103 this.map1[25] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 104 this.map1[26] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 105 this.map1[27] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 106 this.map1[28] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1); 107 this.map1[29] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1); 108 this.map1[30] = new Array(1,1,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,0,0,0,0,0,0,0,0,0,0,1,1); 109 this.map1[31] = new Array(1,1,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,0,0,0,0,0,0,0,0,0,0,1,1); 110 this.map1[32] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 111 this.map1[33] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 112 this.map1[34] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 113 this.map1[35] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 114 this.map1[36] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 115 this.map1[37] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 116 this.map1[38] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 117 this.map1[39] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 118 // レベル２における迷路の地図（0：道，1：壁） 119 this.map2 = new Array(); 120 this.map2[0] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 121 this.map2[1] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 122 this.map2[2] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 123 this.map2[3] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 124 this.map2[4] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 125 this.map2[5] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 126 this.map2[6] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1); 127 this.map2[7] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1); 128 this.map2[8] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1); 129 this.map2[9] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1); 130 this.map2[10] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 131 this.map2[11] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 132 this.map2[12] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 133 this.map2[13] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 134 this.map2[14] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 135 this.map2[15] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,1); 136 this.map2[16] = new Array(1,1,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,0,0,0,0,0,0,0,0,0,1,1,1); 137 this.map2[17] = new Array(1,1,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,0,0,1,1,1,1,1,1,0,1,1,1); 138 this.map2[18] = new Array(1,1,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,0,0,1,1,1,1,1,1,0,1,1,1); 139 this.map2[19] = new Array(1,1,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,0,0,1,1,1,1,1,1,0,1,1,1); 140 this.map2[20] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 141 this.map2[21] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 142 this.map2[22] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 143 this.map2[23] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 144 this.map2[24] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 145 this.map2[25] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 146 this.map2[26] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 147 this.map2[27] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 148 this.map2[28] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1); 149 this.map2[29] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1); 150 this.map2[30] = new Array(1,1,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,0,0,0,0,0,0,0,0,0,0,1,1); 151 this.map2[31] = new Array(1,1,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,0,0,0,0,0,0,0,0,0,0,1,1); 152 this.map2[32] = new Array(1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 153 this.map2[33] = new Array(1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 154 this.map2[34] = new Array(1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 155 this.map2[35] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 156 this.map2[36] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 157 this.map2[37] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 158 this.map2[38] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 159 this.map2[39] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 160 this.map = null; // 使用する迷路の地図（0：道，1：壁） 161 // レベルによる迷路の選択 162 if (mp.level == 1) 163 this.map = this.map1; 164 else 165 this.map = this.map2; 166 // 迷路の生成 167 let w = this.blk * this.width; 168 let h = this.blk * this.height; 169 this.image = mp.ctx.createImageData(w, h); // 迷路 170 for (let i1 = 0; i1 < this.height; i1++) { 171 let ky = i1 * this.blk; 172 for (let i2 = 0; i2 < this.width; i2++) { 173 let kx = i2 * this.blk; 174 for (let i3 = ky; i3 < ky+this.blk; i3++) { 175 for (let i4 = kx; i4 < kx+this.blk; i4++) { 176 let kxy = 4 * (w * i3 + i4); 177 if (this.map[i1][i2] > 0) { 178 this.image.data[kxy] = 0x40; 179 this.image.data[kxy+1] = 0x40; 180 this.image.data[kxy+2] = 0x40; 181 this.image.data[kxy+3] = 0xff; 182 } 183 else { 184 this.image.data[kxy] = 0xff; 185 this.image.data[kxy+1] = 0xff; 186 this.image.data[kxy+2] = 0xff; 187 this.image.data[kxy+3] = 0xff; 188 } 189 } 190 } 191 } 192 } 193 return this; 194 } 195 // 196 // Hero オブジェクト（プロパティ） 197 // 198 function Hero() 199 { 200 this.x = 19; // 主人公の位置（横） 201 this.y = 19; // 主人公の位置（縦） 202 this.r = 6; // 主人公の半径 203 return this; 204 }- 071，072 行目（ Maze 関数）
- 迷路画像の表示位置をブロック単位で表したプロパティです．実際の迷路画像の位置は，これらの値にブロックの大きさをかけたものになります．Maze クラスの画面の大きさが 300 × 300 ピクセルであるのに対して，迷路画像の大きさは 600 × 600 ピクセルです．-9 という値を設定することによって，迷路画像のほぼ中心 300 ピクセル四方の範囲が画面に表示されることになります．
- 073，074 行目（ Maze 関数）
- 縦横のブロックの数を表しています．
- 075 行目（ Maze 関数）
- ブロックの大きさを表しています（ピクセル）．
- 077 行目～ 159 行目（ Maze 関数）
- 各ブロックの状態を 2 次元配列 map1，及び，map2 で表現し（ブロックの状態が 1 である時は壁，0 である時は道），その初期設定を行っています．2 次元配列は，まず配列を定義し（ 077，119 行目），その配列の各要素を再び配列として定義する（ 078 行目～ 117 行目，120 行目～ 159 行目）ことによって可能です．この結果，いずれの配列も，40 行 40 列の大きさを持ち，1 ブロックの大きさが 15 ピクセルですので，迷路全体の大きさは（ 600 ピクセル × 600 ピクセル）になります．
- 一般に，配列の各要素を配列として定義することによって，多次元配列を定義することが可能です．以下に示すのは 2 行 3 列の 2 次元配列の例です．
let a = new Array(2); // let a = new Array(); でも可 for (let i1 = 0; i1 < 2; i1++) a[i1] = new Array(3);
- 初期設定も同時に行いたい場合は，例えば，以下のようにして行います．
let a = new Array(2); // let a = new Array(); でも可 a[0] = new Array(1, 2, 3); a[1] = new Array(4, 5, 6);
- 一般に，配列の各要素を配列として定義することによって，多次元配列を定義することが可能です．以下に示すのは 2 行 3 列の 2 次元配列の例です．
- 160 行目（ Maze 関数）
- レベル１の時は map1 が，また，レベル２の時は map2 が map に代入されます（ 162 行目～ 165 行目）．配列の項で説明していますように，配列変数 map1，map2，map などは，データを記憶している領域の先頭を指すポインタとみなすことができます．例えば，163 行目において map1 を map に代入していますが，map1 の全てのデータをコピーして map に代入しているわけではなく，map1 と map が同じデータ領域を指すことになるだけです．従って，map を介して各要素の値を変更すれば，map1 の対応する要素の値も変化します（逆も同様）．
- 169 行目（ Maze 関数）
- 指定された大きさの ImageData オブジェクトを生成しています．ImageData オブジェクトのプロパティ data は，迷路画像の各ピクセルの色を代入するための 1 次元配列です．data は，各要素のサイズが 1 バイトである 1 次元配列です．各ピクセルデータは，赤緑青（ RGB ），及び，透明度という 4 つのデータから構成され，各データは 0 ～ 255 の値をとります．そのため，配列のサイズは ( 600 * 600 * 4 ) バイトになります．これらの値を適当に設定すれば，任意のイメージを描くことが出来ます．
- 画像自体は 2 次元配列として見た方が取り扱いやすいのですが，実際は，1 次元配列 data に記憶されています．従って，画像における 2 次元配列上の位置を，要素のサイズが 1 バイトである 1 次元配列上の位置に変換する必要があります．記憶されている順番は，2 次元配列 x[0][0] を先頭に，左から右，上から下の順（列番号が最初に変化する順）で記憶されていますので，例えば，画像上の i 行 j 列にあるピクセルデータ（ 4 バイトとする）は，1 次元配列上の以下に示すような位置に対応します．なお，一般に，連続した領域に記憶されている 2 次元配列 x を 1 次元配列 y とみなしたとき，2 次元配列 x の要素 x[i][j] は，1 次元配列 y の要素 y[i * col + j] に対応します（ col は，2 次元配列 x の列の数）．
- 4 * (i * width + j) ： 赤
- 4 * (i * width + j) + 1 ： 緑
- 4 * (i * width + j) + 2 ： 青
- 4 * (i * width + j) + 3 ： 透明度
- 画像自体は 2 次元配列として見た方が取り扱いやすいのですが，実際は，1 次元配列 data に記憶されています．従って，画像における 2 次元配列上の位置を，要素のサイズが 1 バイトである 1 次元配列上の位置に変換する必要があります．記憶されている順番は，2 次元配列 x[0][0] を先頭に，左から右，上から下の順（列番号が最初に変化する順）で記憶されていますので，例えば，画像上の i 行 j 列にあるピクセルデータ（ 4 バイトとする）は，1 次元配列上の以下に示すような位置に対応します．なお，一般に，連続した領域に記憶されている 2 次元配列 x を 1 次元配列 y とみなしたとき，2 次元配列 x の要素 x[i][j] は，1 次元配列 y の要素 y[i * col + j] に対応します（ col は，2 次元配列 x の列の数）．
- 170 行目～ 192 行目（ Maze 関数）
- 上で述べた対応関係を使用して，map の値に従って各ブロックの色（灰色または白）を設定しています．
- 198 行目～ 204 行目（ Hero 関数）
- Hero クラスのオブジェクトを生成しています．
- 040 行目（ draw メソッド）
- 迷路を表示しています．
- 042 行目～ 047 行目（ draw メソッド）
- 主人公を画面中央に表示しています．
- 071，072 行目（ Maze 関数）
- ボタンを使用して主人公を動かせるようにします．そのため，GamePanel の gp_start 関数と move メソッド（ GamePanel オブジェクトのメソッド）を修正すると共に．新しいメソッド check （ GamePanel オブジェクトのメソッド）を追加します．
001 gp = null; // GamePanel オブジェクト 002 003 // 004 // GamePanel の開始 005 // 006 function gp_start() 007 { 008 // GamePanel オブジェクト 009 gp = new GamePanel(); 010 // 初期状態の描画 011 gp.draw(); 012 // ボタンの表示制御 013 document.getElementById('method').style.display = "none"; 014 document.getElementById('start').style.display = "none"; 015 document.getElementById('first').style.display = "none"; 016 document.getElementById('finish').style.display = "none"; 017 document.getElementById('up').style.display = ""; 018 document.getElementById('left').style.display = ""; 019 document.getElementById('right').style.display = ""; 020 document.getElementById('down').style.display = ""; 021 // ボタンの有効性のチェック 022 gp.check(); 023 } 024 // 025 // GamePanel オブジェクト（プロパティ） 026 // 027 function GamePanel() 028 { 029 this.mz = new Maze(); // Maze オブジェクト 030 this.hr = new Hero(); // Hero オブジェクト 031 return this; 032 } 033 // 034 // GamePanel オブジェクト（メソッド draw） 035 // 036 GamePanel.prototype.draw = function() 037 { 038 // キャンバスのクリア 039 mp.ctx.clearRect(0, 0, mp.canvas.width, mp.canvas.height); 040 // 描画 041 // 迷路 042 mp.ctx.putImageData(gp.mz.image, gp.mz.x*gp.mz.blk, gp.mz.y*gp.mz.blk); 043 // 主人公 044 mp.ctx.beginPath(); 045 mp.ctx.fillStyle = "rgb(0, 255, 0)"; 046 let px = (gp.hr.x + gp.mz.x) * gp.mz.blk + gp.hr.r + 1; 047 let py = (gp.hr.y + gp.mz.y) * gp.mz.blk + gp.hr.r + 1; 048 mp.ctx.arc(px, py, gp.hr.r, 0, 2*Math.PI); 049 mp.ctx.fill(); 050 } 051 // 052 // GamePanel オブジェクト（メソッド move） 053 // 054 GamePanel.prototype.move = function(sw) 055 { 056 // 移動 057 switch (sw) { 058 case 0: // 上へ 059 gp.hr.y--; 060 gp.mz.y++; 061 break; 062 case 1: // 下へ 063 gp.hr.y++; 064 gp.mz.y--; 065 break; 066 case 2: // 左へ 067 gp.hr.x--; 068 gp.mz.x++; 069 break; 070 case 3: // 右へ 071 gp.hr.x++; 072 gp.mz.x--; 073 break; 074 } 075 // ゲームクリア？ 076 if (gp.hr.x < 0 || gp.hr.x >= gp.mz.width || gp.hr.y < 0 || gp.hr.y >= gp.mz.height) 077 gcp_start(); 078 // ボタンの設定と再描画 079 else { 080 gp.check(); // ボタンの有効性のチェック 081 gp.draw(); // 再描画 082 } 083 } 084 // 085 // GamePanel オブジェクト（メソッド check） 086 // 087 GamePanel.prototype.check = function() 088 { 089 document.getElementById('up').disabled = false; 090 document.getElementById('down').disabled = false; 091 document.getElementById('left').disabled = false; 092 document.getElementById('right').disabled = false; 093 if (gp.hr.x > 0 && gp.mz.map[gp.hr.y][gp.hr.x-1] > 0) 094 document.getElementById('left').disabled = true; 095 if (gp.hr.x < gp.mz.width-1 && gp.mz.map[gp.hr.y][gp.hr.x+1] > 0) 096 document.getElementById('right').disabled = true; 097 if (gp.hr.y > 0 && gp.mz.map[gp.hr.y-1][gp.hr.x] > 0) 098 document.getElementById('up').disabled = true; 099 if (gp.hr.y < gp.mz.height-1 && gp.mz.map[gp.hr.y+1][gp.hr.x] > 0) 100 document.getElementById('down').disabled = true; 101 } 102 // 103 // Maze オブジェクト（プロパティ） 104 // 105 function Maze() 106 { 107 this.x = -9; // 迷路の位置（横） 108 this.y = -9; // 迷路の位置（縦） 109 this.width = 40; // 迷路の幅 110 this.height = 40; // 迷路の高さ 111 this.blk = 15; // 迷路におけるブロックのサイズ 112 // レベル１における迷路の地図（0：道，1：壁） 113 this.map1 = new Array(); 114 this.map1[0] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 115 this.map1[1] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 116 this.map1[2] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 117 this.map1[3] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 118 this.map1[4] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 119 this.map1[5] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 120 this.map1[6] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 121 this.map1[7] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 122 this.map1[8] = new Array(1,1,1,1,1,1,1,1,1,1,1,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,0,0,0); 123 this.map1[9] = new Array(1,1,1,1,1,1,1,1,1,1,1,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,0,0,0); 124 this.map1[10] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 125 this.map1[11] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 126 this.map1[12] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 127 this.map1[13] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 128 this.map1[14] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 129 this.map1[15] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1); 130 this.map1[16] = new Array(1,1,1,1,1,1,1,1,1,1,1,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,0,1,1); 131 this.map1[17] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,1,1); 132 this.map1[18] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,1,1); 133 this.map1[19] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,1,1); 134 this.map1[20] = new Array(0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 135 this.map1[21] = new Array(0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 136 this.map1[22] = new Array(0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 137 this.map1[23] = new Array(0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 138 this.map1[24] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 139 this.map1[25] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 140 this.map1[26] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 141 this.map1[27] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 142 this.map1[28] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1); 143 this.map1[29] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1); 144 this.map1[30] = new Array(1,1,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,0,0,0,0,0,0,0,0,0,0,1,1); 145 this.map1[31] = new Array(1,1,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,0,0,0,0,0,0,0,0,0,0,1,1); 146 this.map1[32] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 147 this.map1[33] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 148 this.map1[34] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 149 this.map1[35] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 150 this.map1[36] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 151 this.map1[37] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 152 this.map1[38] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 153 this.map1[39] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 154 // レベル２における迷路の地図（0：道，1：壁） 155 this.map2 = new Array(); 156 this.map2[0] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 157 this.map2[1] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 158 this.map2[2] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 159 this.map2[3] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 160 this.map2[4] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 161 this.map2[5] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 162 this.map2[6] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1); 163 this.map2[7] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1); 164 this.map2[8] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1); 165 this.map2[9] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1); 166 this.map2[10] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 167 this.map2[11] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 168 this.map2[12] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 169 this.map2[13] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 170 this.map2[14] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 171 this.map2[15] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,1); 172 this.map2[16] = new Array(1,1,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,0,0,0,0,0,0,0,0,0,1,1,1); 173 this.map2[17] = new Array(1,1,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,0,0,1,1,1,1,1,1,0,1,1,1); 174 this.map2[18] = new Array(1,1,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,0,0,1,1,1,1,1,1,0,1,1,1); 175 this.map2[19] = new Array(1,1,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,0,0,1,1,1,1,1,1,0,1,1,1); 176 this.map2[20] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 177 this.map2[21] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 178 this.map2[22] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 179 this.map2[23] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 180 this.map2[24] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 181 this.map2[25] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 182 this.map2[26] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 183 this.map2[27] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 184 this.map2[28] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1); 185 this.map2[29] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1); 186 this.map2[30] = new Array(1,1,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,0,0,0,0,0,0,0,0,0,0,1,1); 187 this.map2[31] = new Array(1,1,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,0,0,0,0,0,0,0,0,0,0,1,1); 188 this.map2[32] = new Array(1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 189 this.map2[33] = new Array(1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 190 this.map2[34] = new Array(1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 191 this.map2[35] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 192 this.map2[36] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 193 this.map2[37] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 194 this.map2[38] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 195 this.map2[39] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 196 this.map = null; // 使用する迷路の地図（0：道，1：壁） 197 // レベルによる迷路の選択 198 if (mp.level == 1) 199 this.map = this.map1; 200 else 201 this.map = this.map2; 202 // 迷路の生成 203 let w = this.blk * this.width; 204 let h = this.blk * this.height; 205 this.image = mp.ctx.createImageData(w, h); // 迷路 206 for (let i1 = 0; i1 < this.height; i1++) { 207 let ky = i1 * this.blk; 208 for (let i2 = 0; i2 < this.width; i2++) { 209 let kx = i2 * this.blk; 210 for (let i3 = ky; i3 < ky+this.blk; i3++) { 211 for (let i4 = kx; i4 < kx+this.blk; i4++) { 212 let kxy = 4 * (w * i3 + i4); 213 if (this.map[i1][i2] > 0) { 214 this.image.data[kxy] = 0x40; 215 this.image.data[kxy+1] = 0x40; 216 this.image.data[kxy+2] = 0x40; 217 this.image.data[kxy+3] = 0xff; 218 } 219 else { 220 this.image.data[kxy] = 0xff; 221 this.image.data[kxy+1] = 0xff; 222 this.image.data[kxy+2] = 0xff; 223 this.image.data[kxy+3] = 0xff; 224 } 225 } 226 } 227 } 228 } 229 return this; 230 } 231 // 232 // Hero オブジェクト（プロパティ） 233 // 234 function Hero() 235 { 236 this.x = 19; // 主人公の位置（横） 237 this.y = 19; // 主人公の位置（縦） 238 this.r = 6; // 主人公の半径 239 return this; 240 }- 022 行目（ gp_start 関数）
- ボタンの示す方向に壁の存在によって移動できない場合は，対応するボタンを無効にする処理を行うメソッド check （ GamePanel オブジェクトのメソッド）を呼んでいます．メソッド check の具体的内容は 087 行目～ 101 行目です．
- 057 行目～ 074 行目（ move メソッド）
- クリックされたボタンに従って主人公をブロック単位で移動させると共に．画面の中央に主人公が描かれるように，反対方向に迷路画像も移動させています．
- 076，077 行目（ move メソッド）
- 迷路の外に出た場合は，ゲームクリア画面に移動します．
- 079 行目～ 082 行目（ move メソッド）
- 迷路内に存在する場合は，ボタンのチェックをした後，再描画します．
- 087 行目～ 101 行目（ check メソッド）
- メソッド check の定義です．すべてのボタンを有効にした（ 089 行目～ 092 行目）後，上下左右に移動できるかのチェックを行い（壁がある場合は移動できない），移動できなかった場合は，その方向を示すボタンを無効にしています．
- 022 行目（ gp_start 関数）
- 参考のため，BGM を付加した例を示しておきます．追加・修正した部分は，以下の通りです．なお，BGM は，平成 25 年度に本学を卒業した斉藤亮太さんに作成してもらいました．
- HTML ファイル： 23 行目
- GamePanel： 9 ～ 10 行目，80 ～ 81 行目
01 <!DOCTYPE HTML> 02 <HTML> 03 <HEAD> 04 <TITLE>迷路：BGM 付き（完成）</TITLE> 05 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> 06 <LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css"> 07 <SCRIPT TYPE="text/javascript" SRC="main/MainPanel.js"></SCRIPT> 08 <SCRIPT TYPE="text/javascript" SRC="start/StartPanel.js"></SCRIPT> 09 <SCRIPT TYPE="text/javascript" SRC="game/GamePanel.js"></SCRIPT> 10 <SCRIPT TYPE="text/javascript" SRC="clear/GameClearPanel.js"></SCRIPT> 11 </HEAD> 12 <BODY CLASS="eeffee" onLoad="mp_start()"> 13 <H1>迷路：BGM 付き（完成）</H1> 14 <CANVAS ID="canvas_e" STYLE="background-color: #ffffff;" WIDTH="300" HEIGHT="300"></CANVAS><BR> 15 <A HREF="method.htm" TARGET="method"><BUTTON ID="method" CLASS="std">遊び方</BUTTON></A> 16 <BUTTON ID="start" CLASS="std" onClick="gp_start()">ゲーム開始</BUTTON> 17 <BUTTON ID="first" CLASS="std" onClick="st_start()">最初から再開</BUTTON> 18 <BUTTON ID="finish" CLASS="std" onClick="mp.finish()">ゲーム終了</BUTTON> 19 <BUTTON ID="up" CLASS="std" onClick="gp.move(0)">上</BUTTON><BR> 20 <BUTTON ID="left" CLASS="std" onClick="gp.move(2)">左</BUTTON> 21 <BUTTON ID="right" CLASS="std" onClick="gp.move(3)">右</BUTTON><BR> 22 <BUTTON ID="down" CLASS="std" onClick="gp.move(1)">下</BUTTON> 23 <AUDIO ID="BGM" LOOP SRC="Maze_BGM.mp3"></AUDIO> <!-- BGMのために追加 --> 24 </BODY> 25 </HTML>001 gp = null; // GamePanel オブジェクト 002 003 // 004 // GamePanel の開始 005 // 006 function gp_start() 007 { 008 // BGM の再生 009 document.getElementById('BGM').volume = 0.5; 010 document.getElementById('BGM').play(); 011 // GamePanel オブジェクト 012 gp = new GamePanel(); 013 // 初期状態の描画 014 gp.draw(); 015 // ボタンの表示制御 016 document.getElementById('method').style.display = "none"; 017 document.getElementById('start').style.display = "none"; 018 document.getElementById('first').style.display = "none"; 019 document.getElementById('finish').style.display = "none"; 020 document.getElementById('up').style.display = ""; 021 document.getElementById('left').style.display = ""; 022 document.getElementById('right').style.display = ""; 023 document.getElementById('down').style.display = ""; 024 // ボタンの有効性のチェック 025 gp.check(); 026 } 027 // 028 // GamePanel オブジェクト（プロパティ） 029 // 030 function GamePanel() 031 { 032 this.mz = new Maze(); // Maze オブジェクト 033 this.hr = new Hero(); // Hero オブジェクト 034 return this; 035 } 036 // 037 // GamePanel オブジェクト（メソッド draw） 038 // 039 GamePanel.prototype.draw = function() 040 { 041 // キャンバスのクリア 042 mp.ctx.clearRect(0, 0, mp.canvas.width, mp.canvas.height); 043 // 描画 044 // 迷路 045 mp.ctx.putImageData(gp.mz.image, gp.mz.x*gp.mz.blk, gp.mz.y*gp.mz.blk); 046 // 主人公 047 mp.ctx.beginPath(); 048 mp.ctx.fillStyle = "rgb(0, 255, 0)"; 049 let px = (gp.hr.x + gp.mz.x) * gp.mz.blk + gp.hr.r + 1; 050 let py = (gp.hr.y + gp.mz.y) * gp.mz.blk + gp.hr.r + 1; 051 mp.ctx.arc(px, py, gp.hr.r, 0, 2*Math.PI); 052 mp.ctx.fill(); 053 } 054 // 055 // GamePanel オブジェクト（メソッド move） 056 // 057 GamePanel.prototype.move = function(sw) 058 { 059 // 移動 060 switch (sw) { 061 case 0: // 上へ 062 gp.hr.y--; 063 gp.mz.y++; 064 break; 065 case 1: // 下へ 066 gp.hr.y++; 067 gp.mz.y--; 068 break; 069 case 2: // 左へ 070 gp.hr.x--; 071 gp.mz.x++; 072 break; 073 case 3: // 右へ 074 gp.hr.x++; 075 gp.mz.x--; 076 break; 077 } 078 // ゲームクリア？ 079 if (gp.hr.x < 0 || gp.hr.x >= gp.mz.width || gp.hr.y < 0 || gp.hr.y >= gp.mz.height) { 080 document.getElementById('BGM').pause(); // BGMのために追加 081 document.getElementById('BGM').load(); // BGMのために追加 082 gcp_start(); 083 } 084 // ボタンの設定と再描画 085 else { 086 gp.check(); // ボタンの有効性のチェック 087 gp.draw(); // 再描画 088 } 089 } 090 // 091 // GamePanel オブジェクト（メソッド check） 092 // 093 GamePanel.prototype.check = function() 094 { 095 document.getElementById('up').disabled = false; 096 document.getElementById('down').disabled = false; 097 document.getElementById('left').disabled = false; 098 document.getElementById('right').disabled = false; 099 if (gp.hr.x > 0 && gp.mz.map[gp.hr.y][gp.hr.x-1] > 0) 100 document.getElementById('left').disabled = true; 101 if (gp.hr.x < gp.mz.width-1 && gp.mz.map[gp.hr.y][gp.hr.x+1] > 0) 102 document.getElementById('right').disabled = true; 103 if (gp.hr.y > 0 && gp.mz.map[gp.hr.y-1][gp.hr.x] > 0) 104 document.getElementById('up').disabled = true; 105 if (gp.hr.y < gp.mz.height-1 && gp.mz.map[gp.hr.y+1][gp.hr.x] > 0) 106 document.getElementById('down').disabled = true; 107 } 108 // 109 // Maze オブジェクト（プロパティ） 110 // 111 function Maze() 112 { 113 this.x = -9; // 迷路の位置（横） 114 this.y = -9; // 迷路の位置（縦） 115 this.width = 40; // 迷路の幅 116 this.height = 40; // 迷路の高さ 117 this.blk = 15; // 迷路におけるブロックのサイズ 118 // レベル１における迷路の地図（0：道，1：壁） 119 this.map1 = new Array(); 120 this.map1[0] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 121 this.map1[1] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 122 this.map1[2] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 123 this.map1[3] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 124 this.map1[4] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 125 this.map1[5] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 126 this.map1[6] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 127 this.map1[7] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 128 this.map1[8] = new Array(1,1,1,1,1,1,1,1,1,1,1,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,0,0,0); 129 this.map1[9] = new Array(1,1,1,1,1,1,1,1,1,1,1,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,0,0,0); 130 this.map1[10] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 131 this.map1[11] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 132 this.map1[12] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 133 this.map1[13] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 134 this.map1[14] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 135 this.map1[15] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1); 136 this.map1[16] = new Array(1,1,1,1,1,1,1,1,1,1,1,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,0,1,1); 137 this.map1[17] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,1,1); 138 this.map1[18] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,1,1); 139 this.map1[19] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,1,1); 140 this.map1[20] = new Array(0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 141 this.map1[21] = new Array(0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 142 this.map1[22] = new Array(0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 143 this.map1[23] = new Array(0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 144 this.map1[24] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 145 this.map1[25] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 146 this.map1[26] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 147 this.map1[27] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 148 this.map1[28] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1); 149 this.map1[29] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1); 150 this.map1[30] = new Array(1,1,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,0,0,0,0,0,0,0,0,0,0,1,1); 151 this.map1[31] = new Array(1,1,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,0,0,0,0,0,0,0,0,0,0,1,1); 152 this.map1[32] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 153 this.map1[33] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 154 this.map1[34] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 155 this.map1[35] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 156 this.map1[36] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 157 this.map1[37] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 158 this.map1[38] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 159 this.map1[39] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 160 // レベル２における迷路の地図（0：道，1：壁） 161 this.map2 = new Array(); 162 this.map2[0] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 163 this.map2[1] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 164 this.map2[2] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 165 this.map2[3] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 166 this.map2[4] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 167 this.map2[5] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 168 this.map2[6] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1); 169 this.map2[7] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1); 170 this.map2[8] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1); 171 this.map2[9] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1); 172 this.map2[10] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 173 this.map2[11] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 174 this.map2[12] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 175 this.map2[13] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 176 this.map2[14] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1); 177 this.map2[15] = new Array(1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,1); 178 this.map2[16] = new Array(1,1,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,0,0,0,0,0,0,0,0,0,1,1,1); 179 this.map2[17] = new Array(1,1,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,0,0,1,1,1,1,1,1,0,1,1,1); 180 this.map2[18] = new Array(1,1,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,0,0,1,1,1,1,1,1,0,1,1,1); 181 this.map2[19] = new Array(1,1,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,0,0,1,1,1,1,1,1,0,1,1,1); 182 this.map2[20] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 183 this.map2[21] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 184 this.map2[22] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 185 this.map2[23] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 186 this.map2[24] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 187 this.map2[25] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 188 this.map2[26] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 189 this.map2[27] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1); 190 this.map2[28] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1); 191 this.map2[29] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1); 192 this.map2[30] = new Array(1,1,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,0,0,0,0,0,0,0,0,0,0,1,1); 193 this.map2[31] = new Array(1,1,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,0,0,0,0,0,0,0,0,0,0,1,1); 194 this.map2[32] = new Array(1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 195 this.map2[33] = new Array(1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 196 this.map2[34] = new Array(1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 197 this.map2[35] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 198 this.map2[36] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 199 this.map2[37] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 200 this.map2[38] = new Array(1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1); 201 this.map2[39] = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); 202 this.map = null; // 使用する迷路の地図（0：道，1：壁） 203 // レベルによる迷路の選択 204 if (mp.level == 1) 205 this.map = this.map1; 206 else 207 this.map = this.map2; 208 // 迷路の生成 209 let w = this.blk * this.width; 210 let h = this.blk * this.height; 211 this.image = mp.ctx.createImageData(w, h); // 迷路 212 for (let i1 = 0; i1 < this.height; i1++) { 213 let ky = i1 * this.blk; 214 for (let i2 = 0; i2 < this.width; i2++) { 215 let kx = i2 * this.blk; 216 for (let i3 = ky; i3 < ky+this.blk; i3++) { 217 for (let i4 = kx; i4 < kx+this.blk; i4++) { 218 let kxy = 4 * (w * i3 + i4); 219 if (this.map[i1][i2] > 0) { 220 this.image.data[kxy] = 0x40; 221 this.image.data[kxy+1] = 0x40; 222 this.image.data[kxy+2] = 0x40; 223 this.image.data[kxy+3] = 0xff; 224 } 225 else { 226 this.image.data[kxy] = 0xff; 227 this.image.data[kxy+1] = 0xff; 228 this.image.data[kxy+2] = 0xff; 229 this.image.data[kxy+3] = 0xff; 230 } 231 } 232 } 233 } 234 } 235 return this; 236 } 237 // 238 // Hero オブジェクト（プロパティ） 239 // 240 function Hero() 241 { 242 this.x = 19; // 主人公の位置（横） 243 this.y = 19; // 主人公の位置（縦） 244 this.r = 6; // 主人公の半径 245 return this; 246 }