静岡理工科大学 菅沼ホーム JavaScript 目次 索引

迷路

  1. ステップ1: ゲームの枠組み

      迷路から脱出するゲームです.基本的に,「ゲーム枠の作成」で説明した方法とほぼ同じ方法で作成します.ただし,画面のサイズは変更しています.また,ゲームオーバーの画面は存在しません.以下,各プログラムに対して,「ゲーム枠の作成」の場合との違いについて説明していきます.

    1. HTML ファイル

        「ゲーム枠の作成」における HTML ファイルとほとんど同じですが,「ゲームクリア」ボタンと「ゲームオーバー」ボタンは除き,主人公を上下左右に移動させるため,「上」ボタン,「下」ボタン,「左」ボタン,及び,「右」ボタンが追加してあります.

      <!DOCTYPE HTML>
      <HTML>
      <HEAD>
      	<TITLE>迷路:ステップ1</TITLE>
      	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
      	<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>迷路:ステップ1</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>
      				

    2. MainPanel

        このプログラムに関しても,「ゲーム枠の作成」における MainPanel とほぼ同じですが,ボタンの制御部分が異なっていまです.

      mp = null;   // MainPanel オブジェクト
      
      			//
      			// MainPanel の開始
      			//
      function mp_start()
      {
      					// キャンバス情報
      	var canvas = document.getElementById('canvas_e');   // キャンバス要素の取得
      	var 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";
      }
      				

    3. StartPanel

        このプログラムに関しても,「ゲーム枠の作成」における StartPanel とほとんど同じです.ボタンの制御部分が異なっているだけです.当然のことながら,ゲームタイトル及び「遊び方」の内容を変更しています.

      			//
      			// StartPanel の開始
      			//
      function st_start()
      {
      	mp.level = 1;   // ゲームレベルの設定
      					// キャンバスのクリア
      	mp.ctx.clearRect(0, 0, mp.canvas.width, mp.canvas.height);
      					// ゲームタイトルの表示
      	mp.ctx.font = "40px 'MS ゴシック'";
      	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 = "ゲーム開始";
      }
      				

    4. 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 定数式1 : ]
        		[文1]
        	[case 定数式2 : ]
        		[文2]
        	 ・・・・・
        	[default : ]
        		[文n]
        }
        					

    5. GameClearPanel

        このプログラムに関しても,「ゲーム枠の作成」における GameClearPanel とほぼ同じです.違いは,ボタンの制御部分と,レベルが 2 までしか無い点だけです.

      			//
      			// GameClearPanel の開始
      			//
      function gcp_start()
      {
      					// キャンバスのクリア
      	mp.ctx.clearRect(0, 0, mp.canvas.width, mp.canvas.height);
      					// タイトルの表示
      	mp.ctx.font = "40px 'MS ゴシック'";
      	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";
      }
      				

  2. ステップ2: 主人公と迷路の配置

      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		var px = (gp.hr.x + gp.mz.x) * gp.mz.blk + gp.hr.r + 1;
    045		var 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						// レベル1における迷路の地図(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						// レベル2における迷路の地図(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		var w = this.blk * this.width;
    168		var h = this.blk * this.height;
    169		this.image = mp.ctx.createImageData(w, h);   // 迷路
    170		for (var i1 = 0; i1 < this.height; i1++) {
    171			var ky = i1 * this.blk;
    172			for (var i2 = 0; i2 < this.width; i2++) {
    173				var kx = i2 * this.blk;
    174				for (var i3 = ky; i3 < ky+this.blk; i3++) {
    175					for (var i4 = kx; i4 < kx+this.blk; i4++) {
    176						var 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 次元配列の例です.
      var a = new Array(2);   // var a = new Array(); でも可
      for (var i1 = 0; i1 < 2; i1++)
      	a[i1] = new Array(3);
      				
    初期設定も同時に行いたい場合は,例えば,以下のようにして行います.
      var a = new Array(2);   // var a = new Array(); でも可
      a[0] = new Array(1, 2, 3);
      a[1] = new Array(4, 5, 6);
      				
    160 行目( Maze 関数)

      レベル1の時は map1 が,また,レベル2の時は map2 が map に代入されます( 162 行目~ 165 行目,実際には,map1 または map2 のアドレス).

    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 次元配列上の以下に示すような位置に対応します.なお,各配列における要素のサイズが同じ場合は,x[i][j] が 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 : 透明度

    170 行目~ 192 行目( Maze 関数)

      上で述べた対応関係を使用して,map の値に従って各ブロックの色(灰色または白)を設定しています.

    198 行目~ 204 行目( Hero 関数)

      Hero クラスのオブジェクトを生成しています.

    040 行目( draw メソッド)

      迷路を表示しています.

    042 行目~ 047 行目( draw メソッド)

      主人公を画面中央に表示しています.

  3. ステップ3: 完成

      ボタンを使用して主人公を動かせるようにします.そのため,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		var px = (gp.hr.x + gp.mz.x) * gp.mz.blk + gp.hr.r + 1;
    047		var 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						// レベル1における迷路の地図(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						// レベル2における迷路の地図(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		var w = this.blk * this.width;
    204		var h = this.blk * this.height;
    205		this.image = mp.ctx.createImageData(w, h);   // 迷路
    206		for (var i1 = 0; i1 < this.height; i1++) {
    207			var ky = i1 * this.blk;
    208			for (var i2 = 0; i2 < this.width; i2++) {
    209				var kx = i2 * this.blk;
    210				for (var i3 = ky; i3 < ky+this.blk; i3++) {
    211					for (var i4 = kx; i4 < kx+this.blk; i4++) {
    212						var 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 行目)後,上下左右に移動できるかのチェックを行い(壁がある場合は移動できない),移動できなかった場合は,その方向を示すボタンを無効にしています.

  4. ステップ3: 完成( BGM 付き)

      参考のため,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		var px = (gp.hr.x + gp.mz.x) * gp.mz.blk + gp.hr.r + 1;
    050		var 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						// レベル1における迷路の地図(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						// レベル2における迷路の地図(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		var w = this.blk * this.width;
    210		var h = this.blk * this.height;
    211		this.image = mp.ctx.createImageData(w, h);   // 迷路
    212		for (var i1 = 0; i1 < this.height; i1++) {
    213			var ky = i1 * this.blk;
    214			for (var i2 = 0; i2 < this.width; i2++) {
    215				var kx = i2 * this.blk;
    216				for (var i3 = ky; i3 < ky+this.blk; i3++) {
    217					for (var i4 = kx; i4 < kx+this.blk; i4++) {
    218						var 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	}
    			

静岡理工科大学 菅沼ホーム JavaScript 目次 索引