情報学部 菅沼ホーム JavaScript 目次 索引

ゲーム枠の作成

  1. 全体構造

    　　JavaScript を使用してゲームを作成する場合，一般的には，JavaScrip によって提供されている様々なオブジェクトを利用すると共に，多くの関数を作成することになります．それらの関数は，グローバス変数や引数を通して与えられた情報によって処理を行うことになります．関数に対してすべての情報を引数を通して渡そうとすれば，引数の数が膨大になったり，または，イベント処理のように必要な情報を引数を通して渡せない場合もあります．そのため，プログラムサイズが大きくなれば，グローバル変数の数も多くなります．さらに，関数の数も多くなりますので，同じ名前の変数や関数が使用されていないかを，プログラム全体に亘ってチェックする必要が出てきます．

    　　JavaScript のオブジェクト（ object ）は，継承機能が無い，変数等に対する参照制限がない，などの違いがありますが，クラスと非常に似た機能を持っています．勿論，クラスを使用しても構いませんが，ここでは，オブジェクトを使用していきます．必要な箇所で新しいオブジェクトを生成し，関連する範囲で必要とされるグローバル変数や関数を，そのオブジェクトのプロパティとメソッド（関数）として定義しておきます．生成されたオブジェクトが記憶されている変数だけをグローバル変数として定義しておけば，グローバル変数の数は非常に少なくなり，管理も容易になります．具体的な方法に関しては，次節以降を参照して下さい．

    　　また，ゲームプログラムのほとんどは，表紙，ゲーム実行画面（複数の場合もある），終了画面など，そこに描かれている内容は異なりますが，一般に複数の画面（パネル）から構成されています．ゲームの進行と共に，それらのパネルが切り替えられていきます．この方式は，ほとんどのゲームで共通だと思います．そこで，ここでは，以下に示すような方法で画面の切り替えを制御します．まず，MainPanel オブジェクトからスタートします．MainPanel オブジェクトは，キャンバスに関する情報を得た後，StartPanel オブジェクト（表紙）を開始します．以後，状況によって，GamePanel オブジェクト（ゲームの実行），GameClearPanel オブジェクト（ゲームのクリア），及び，GameOverPanel オブジェクト（ゲームの終了）に切り替えられていきます．
    　　以下，こららのパネルの詳細について説明していきますが，説明を読む前に，各パネルがどのようにして切り替わるかを表示してみて下さい．なお，この章の説明を読む間，表示したままにしておいた方が良いと思います．最初に，StartPanel オブジェクトが表示されます．「遊び方」ボタンをクリックすると，別タブ（ Window ）に，遊び方を説明したページ（何も記述されていませんが）が，表示されます．また，「ゲーム開始」ボタンをクリックするとゲームの実行に入ります（ GamePanel オブジェクトの表示）．ゲームの実行画面は，レベルの異なる 3 つの画面から構成されています．この段階では，ゲーム自身の作成を行うわけではありませんので，ゲームクリア，または，ゲームオーバー状態への移動は，ボタンをクリックすることによって実現しています．「ゲームクリア」ボタンをクリックした場合は，GameClearPanel オブジェクトが表示され，「ゲーム終了」，または，「次のレベル」（レベルが 3 の場合は「最初から再開」）のいずれかを選択できる状態になります．「ゲームオーバー」を選択した場合は，GameOverPanel オブジェクトが表示され，「終了」，「現レベルで再開」，または，「最初から再開」のいずれかを選択できます．

  2. HTML ファイル

    　　まず，キャンバスを表示させるための HTML ファイルは，以下のようになっています． 

    01	<!DOCTYPE HTML>
02	<HTML>
03	<HEAD>
04		<TITLE>ゲーム枠の作成</TITLE>
05		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
06		<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
07		<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
08		<SCRIPT TYPE="text/javascript" SRC="main/MainPanel.js"></SCRIPT>
09		<SCRIPT TYPE="text/javascript" SRC="start/StartPanel.js"></SCRIPT>
10		<SCRIPT TYPE="text/javascript" SRC="game/GamePanel.js"></SCRIPT>
11		<SCRIPT TYPE="text/javascript" SRC="clear/GameClearPanel.js"></SCRIPT>
12		<SCRIPT TYPE="text/javascript" SRC="over/GameOverPanel.js"></SCRIPT>
13	</HEAD>
14	<BODY CLASS="eeffee" onLoad="mp_start()">
15		<H1>ゲーム枠の作成</H1>
16		<CANVAS ID="canvas_e" STYLE="background-color: #ffffff;" WIDTH="400" HEIGHT="300"></CANVAS><BR>
17		<A HREF="method.htm" TARGET="method"><BUTTON ID="method" CLASS="std">遊び方</BUTTON></A>
18		<BUTTON ID="start" CLASS="std" onClick="gp_start()">ゲーム開始</BUTTON>
19		<BUTTON ID="clear" CLASS="std" onClick="gp.next(0)">ゲームクリア</BUTTON>
20		<BUTTON ID="over" CLASS="std" onClick="gp.next(1)">ゲームオーバー</BUTTON>
21		<BUTTON ID="first" CLASS="std" onClick="st_start()">最初から再開</BUTTON>
22		<BUTTON ID="finish" CLASS="std" onClick="mp.finish()">ゲーム終了</BUTTON>
23	</BODY>
24	</HTML>
    08 行目～ 12 行目

    　　JavaScript のプログラムが記述されているファイルを指定しています．すべてを同じファイルに記述しても構わないのですが，各パネルに対するプログラムはかなり独立したものになっています．そのため，以降の修正が容易になるように異なるディレクトリに異なるファイル名で保存してあります．

    14 行目

    　　onLoad 属性の指定によって，HTML ファイルがロードされると関数 mp_start が実行されます．

    17 行目～ 22 行目

    　　このゲームで必要とされるすべてのボタンを配置しています．「遊び方」ボタンをクリックすると，別 Window （タブ）に遊び方が表示され，それ以外のボタンをクリックすると，各ボタンの onClick 属性に記述された関数が実行され，対応する画面が表示されます．ただし，これらのボタンは常に表示されているわけではありません．以下で説明するプログラムの中で，必要に応じて，表示，または，非表示の状態に設定されます．

  3. MainPanel

    　　HTML ファイルがロードされると最初に実行される関数 mp_start を含んだプログラムです．キャンバス情報を取得した後，ゲームの表紙に対応する StartPanel を表示します．そのプログラムは以下に示すとおりです． 

    01	mp = null;   // MainPanel オブジェクト
02	
03				//
04				// MainPanel の開始
05				//
06	function mp_start()
07	{
08						// キャンバス情報
09		let canvas = document.getElementById('canvas_e');   // キャンバス要素の取得
10		let ctx    = canvas.getContext('2d');   // キャンバスからコンテキストを取得
11						// MainPanel オブジェクト
12		mp = new MainPanel(canvas, ctx);
13						// StartPanel の表示
14		st_start();
15	}
16				//
17				// MainPanel オブジェクト（プロパティ）
18				//
19	function MainPanel(canvas, ctx)
20	{
21		this.canvas = canvas;   // キャンバス要素
22		this.ctx    = ctx;   // キャンバスのコンテキスト
23		this.level  = 1;   // ゲームレベル
24		return this;
25	}
26				//
27				// MainPanel オブジェクト（メソッド）
28				//
29	MainPanel.prototype.finish = function()
30	{
31						// キャンバスのクリア
32		mp.ctx.clearRect(0, 0, mp.canvas.width, mp.canvas.height);
33						// ボタンを非表示
34		document.getElementById('method').style.display = "none";
35		document.getElementById('start').style.display = "none";
36		document.getElementById('clear').style.display = "none";
37		document.getElementById('over').style.display = "none";
38		document.getElementById('first').style.display = "none";
39		document.getElementById('finish').style.display = "none";
40	}
    01 行目

    　　変数 mp は，MainPanel オブジェクトを記憶するための変数です．初期状態においては，MainPanel オブジェクトがまだ生成されていませんので，null で初期設定しておきます．また，let や var を使用せず，メソッドの外側で宣言されていますので，この変数は，他のメソッド（関数）からも参照可能になります（グローバル変数）．

    06 行目

    　　HTML ファイルがロードされた時，最初に実行される関数 mp_start の定義の最初です．その内容は，07 行目～ 15 行目です．

    09，10 行目

    　　09 行目において，DOM のメソッド getElementById を使用して，ID 属性の値が canvas_e である要素を取得しています．その要素は，ここでは，HTML ファイルの 15 行目に相当します，つまり，CANVAS 要素を取得していることになります．また，10 行目では，CANVAS 要素のメソッド getContext を利用して，上で取得した CANVAS 要素からそのコンテキストを取得しています．この場合のコンテキストとは，乱暴な表現をすれば，描画するための筆のようなものです．この 2 行で使用されている変数 canvas と ctx は，関数内部で，かつ，let を付加して使用されているため，この関数内だけで有効であり，他のメソッド等から参照することはできません（ローカル変数）．

    12 行目

    　　MainPanel オブジェクトを生成し，その結果（ MainPanel 関数の戻り値，24 行目の return 文によって返される値）を変数 mp に代入しています．具体的には，19 行目～ 25 行目に記述された MainPanel 関数が実行されます．この関数の実行によって，3 つの変数 canvas，ctx，及び，level（ゲームのレベルを表している）が MainPanel オブジェクトのプロパティとみなされます．変数 mp は関数外で定義された（ 01 行目）グローバル変数であるため，いずれの関数からも直接参照可能ですが，3 つの変数 canvas，ctx，及び，level は，直接参照することができず，mp.canvas，mp.ctx，及び，mp.level のように，オブジェクト名を付加して参照することになります．同様に，後に述べる finish も，MainPanel オブジェクトのメソッドとして定義されているため，直接参照することができません．この結果，グローバル変数の数が少なくなり，その管理が容易になります．

    　　なお，21 行目～ 24 行目において使用されている this は，自分自身を指す演算子であり，この場合は，MainPanel オブジェクトを示します．

    14 行目

    　　StartPanel を表示するための関数 st_start を呼んでいます．このように，mp_start 関数を実行すると，すぐに関数 st_start が実行されるため，mp_start 関数に対応する画面が存在するわけではありません．mp_start 関数は，単に，初期設定を行うためだけの関数です．

    29 行目～ 40 行目

    　　MainPanel オブジェクトのメソッド finish を定義しています．29 行目の記述方法に注意してください（通常の関数の記述方法とは異なる）．この定義によって，finish という名前はグローバルでなくなるため，他の関数等から単に finish() という形式ではこのメソッドを参照することができなくなり，オブジェクト名を付加した mp.finish() という形式でこのメソッドを参照することになります．このように，関数 MainPanel をコンストラクタ，finish をメンバー関数とみなせば，オブジェクトは C++ などのクラスのオブジェクトと似ていますが，微妙な点で異なっています．例えば，ctx は MainPanel オブジェクトのプロパティ(メンバー変数)ですので，メンバー関数である finish から「 ctx 」のように直接参照できると思われがちですが，32 行目に示すように，他の関数等から参照する場合と同様，「 mp.ctx 」と記述しなければなりません．

    　　このメソッドは，ゲームの終了を実行するためのものであり，画面をクリアし（ 32 行目），すべてのボタンを非表示にしています．例えば，34 行目は，DOM のメソッド getElementById を使用して，ID 属性の値が method である要素を取得し，その要素のスタイルシートプロパティ display の値を "none" に設定することによって，「遊び方」ボタンを非表示にしています（ "" に設定すれば，表示される）．

  4. StartPanel

    　　ゲームの表紙（ゲームのタイトル）を表示させるためのプログラムです．「遊び方」ボタンをクリックすると，遊び方を説明したページが表示され，「ゲーム開始」ボタンをクリックするとゲームを開始します．そのプログラムは以下に示すとおりです． 

    01				//
02				// StartPanel の開始
03				//
04	function st_start()
05	{
06		mp.level = 1;   // ゲームレベルの設定
07						// キャンバスのクリア
08		mp.ctx.clearRect(0, 0, mp.canvas.width, mp.canvas.height);
09						// ゲームタイトルの表示
10		mp.ctx.font = "40px 'ＭＳ ゴシック'";
11		mp.ctx.textBaseline = "middle";
12		mp.ctx.textAlign = "center";
13		mp.ctx.fillStyle = "rgb(0, 0, 0)";
14		mp.ctx.fillText("Game Title", mp.canvas.width/2, mp.canvas.height/2);
15						// ボタンの表示制御
16		document.getElementById('method').style.display = "";
17		document.getElementById('start').style.display = "";
18		document.getElementById('clear').style.display = "none";
19		document.getElementById('over').style.display = "none";
20		document.getElementById('first').style.display = "none";
21		document.getElementById('finish').style.display = "none";
22		document.getElementById('start').innerHTML = "ゲーム開始";
23	}
    08 行目

    　　clearRect メソッドによって，キャンバス領域をクリアしています．

    10 行目～ 14 行目

    　　文字列を描画しています（「テキストスタイルと描画」参照）．

    16 行目～ 21 行目

    　　「遊び方」ボタンと「ゲーム開始」ボタンだけを表示しています．

    22 行目

    　　ID 属性が start であるボタンの表示内容を「ゲーム開始」に変更しています（他のプログラムで修正されている可能性があるため）．なお，innerHTML は，DOM のプロパティであり，与えられた文字列を HTML 文書として処理した後表示します．

  5. GamePanel

    　　ゲームを実際に実行するためのプログラムです．この例では，ゲームは 3 つのレベルから構成されているとしていますが，実際のゲームを実行できるわけではありません．そのため，ボタンをクリックすることによって，ゲームクリアやゲームオーバーの状態に移動するように作成されています．その内容は，単に，3 つの円がランダムな位置に表示されるだけであり，レベルが上がるに従って表示間隔が短くなります．そのプログラムは以下に示すとおりです． 

    01	gp = null;   // GamePanel オブジェクト
02	
03				//
04				// GamePanel の開始
05				//
06	function gp_start()
07	{
08						// GamePanel オブジェクト
09		gp = new GamePanel();
10						// タイマーのスタート
11		if (mp.level == 1)
12			gp.timerID = setInterval('gp.draw()', 500);
13		else if (mp.level == 2)
14			gp.timerID = setInterval('gp.draw()', 100);
15		else
16			gp.timerID = setInterval('gp.draw()', 20);
17						// ボタンの表示制御
18		document.getElementById('method').style.display = "none";
19		document.getElementById('start').style.display = "none";
20		document.getElementById('clear').style.display = "";
21		document.getElementById('over').style.display = "";
22		document.getElementById('first').style.display = "none";
23		document.getElementById('finish').style.display = "none";
24	}
25				//
26				// GamePanel オブジェクト（プロパティ）
27				//
28	function GamePanel()
29	{
30		this.x = new Array();   // 円の位置（ｘ座標）
31		this.y = new Array();   // 円の位置（ｙ座標）
32		this.timerID = -1;
33						// 背景画像の読み込み
34		this.img = new Image();
35		if (mp.level == 1)
36			this.img.src = "image/game1.jpg";
37		else if (mp.level == 2)
38			this.img.src = "image/game2.jpg";
39		else
40			this.img.src = "image/game3.jpg";
41		return this;
42	}
43				//
44				// GamePanel オブジェクト（メソッド draw）
45				//
46	GamePanel.prototype.draw = function()
47	{
48						// キャンバスのクリア
49		mp.ctx.clearRect(0, 0, mp.canvas.width, mp.canvas.height);
50						// 背景画像を表示
51		mp.ctx.drawImage(gp.img, 0, 0);
52						// 円の描画
53		for (let i1 = 0; i1 < 3; i1++) {
54			gp.x[i1] = Math.floor((mp.canvas.width - 40) * Math.random()) + 20;
55			gp.y[i1] = Math.floor((mp.canvas.height - 40) * Math.random()) + 20;
56			mp.ctx.beginPath();
57			if (i1 == 0)
58				mp.ctx.fillStyle = "rgb(255, 0, 0)";
59			else if (i1 == 1)
60				mp.ctx.fillStyle = "rgb(0, 255, 0)";
61			else
62				mp.ctx.fillStyle = "rgb(128, 128, 128)";
63			mp.ctx.arc(gp.x[i1], gp.y[i1], 20, 0, 2*Math.PI);
64			mp.ctx.fill();
65		}
66	}
67				//
68				// GamePanel オブジェクト（メソッド next）
69				//
70	GamePanel.prototype.next = function(sw)
71	{
72		clearInterval(gp.timerID);   // タイマーの停止
73		if (sw == 0)
74			gcp_start();
75		else
76			gop_start();
77	}
    09 行目

    　　GamePanel オブジェクトを生成し，その結果を変数 gp （ 01 行目，グローバル変数）に代入しています．具体的には，関数 GamePanel（ 28 行目～ 42 行目）が実行され，変数 x，y，img，及び，timerID がそのプロパティとして定義され，画像が読み込まれます．

    11 行目～ 16 行目

    　　window オブジェクトの setInterval メソッドを利用して，ゲームレベル毎に異なる周期のタイマーをスタートしています．その結果，指定された周期毎に GamePanel オブジェクトのメソッド draw（ 46 行目～ 66 行目）が実行されます．なお，ここでは，if 文の変形である else if 文を使用しています．if 文を使用すれば，以下のように記述できます． 
    	if (mp.level == 1)
		gp.timerID = setInterval('gp.draw()', 500);
	else {
		if (mp.level == 2)
			gp.timerID = setInterval('gp.draw()', 100);
		else
			gp.timerID = setInterval('gp.draw()', 20);
	}
    34 行目～ 40 行目

    　　ゲームレベル毎に異なる背景画像を読み込んでいます（「 Image オブジェクト」参照）．なお，30，31 行目では，円の位置を記憶する変数 x，y を配列として定義しています．この意味に関しては，54，55 行目に対する説明の際に行います．

    51 行目

    　　背景画像を表示しています（「画像の描画とピクセル操作」参照）．

    53 行目

    　　for 文は，繰り返し文の一種であり，同じような手順を何回も繰り返したいとき使用します．for 文は， 
    	for (式１; 式２; 式３) {
		文（複数の文も可）
	}
    のような形式で記述されます．for 文に入ると，まず，式 1 が実行されます．式 1 は，通常，for 文の繰り返し回数を制御するため等の初期設定を行う式であり，for 文の最初に 1 回だけ実行されます．次に，式 2 （論理式）の値が評価され，もし真であれば文が実行されます．そして，式 3 が実行されます．再び，式 2 が評価され，その値が真である限り，文と式 3 の実行が繰り返されます．式 2 の値が偽になると，文と式 3 は実行されず，for 文の次の文が実行されることになります．ここでは，54 行目～ 64 行目が 3 回実行されることになります．なお，繰り返される文が 1 文だけの時は，「 { 」と「 } 」は必要ありません．なお，53 行目において let を付加して定義されている変数 i1 は，if ブロック内で定義されていますので，その有効範囲は 53 行目～ 65 行目となります．

    　　同じような目的の文として，while 文が存在します．while 文は， 
    	while (論理式) {
		文（複数の文も可）
	}
    のような形式で記述され，論理式の値が真である限り，文の実行が繰り返されることになります．似たような文として，do while 文が存在し， 
    	do {
		文（複数の文も可）
	} while (論理式) ;
    のように記述されます．while 文と do while 文の違いは，論理式の評価が，文を実行する最初に行われるか，または，後で行われるかの違いです．do while 文では，論理式の評価が後で行われるため，do while 文の開始時に式が偽であっても，文が少なくとも 1 回は実行されることになります．なお，for 文と同様，繰り返される文が 1 文だけの時は，「 { 」と「 } 」は必要ありません．

    　　while 文と for 文はほぼ等価の文であり，例えば 53 行目の for 文を while 文で記述すれば， 
    	let i1 = 0;
	while (i1 < 3) {
    の 2 行になり，さらに，65 行目の前に， 
    	i1++;
    を追加することになります．

    54，55 行目

    　　GamePanel オブジェクトのプロパティ x 及び y は，描画する 3 つの円の座標を保存するためのものです．今まで述べてきた方法を使用するとすれば，3 つの円の座標は各々異なるため，x 及び y 座標を保存するために，例えば， 
    	x1, x2, x3;
	y1, y2, y3;
    のように，各々 3 つの変数が必要です．しかし，このようにすると，53 行目～ 65 行目のような繰り返し文も使用できません．円の数が 3 つ程度の場合はそれほど問題になりませんが，円の数が多くなればほとんど処理ができなくなります．

    　　そこで，ここでは，配列を使用しています．配列変数では，例えば， 
    	a = new Array();   // 要素数は未定
	a = new Array(100);   // 要素数が100の配列
	a = new Array("abc", "efg", "hij");   // 各要素を文字列によって初期設定
    のように，Array オブジェクトとnew 演算子を使用します（ 30，31 行目）．配列変数の各要素は，各々，a[0]，a[1]，a[2] のように括弧と添え字（必ず 0 から始まる）によって参照することができます．また，配列の各要素を配列として定義することによって，多次元の配列も利用できます．その際，例えば 2 次元配列における i 行 j 列要素は，x[i][j] のように参照することになります（ i も j も，必ず 0 から始まる）．以下に示すのは 2 行 3 列の 2 次元配列の例です．なお，1 次元配列の場合も，多次元配列の場合も，要素の数は必要に応じて増加していきます． 
    	let a = new Array(2);   // let a = new Array(); でも可
	for (let i1 = 0; i1 < 2; i1++)
		a[i1] = new Array(3);   // 上の例のように，初期設定も可能
    　　また，ここでは，Math オブジェクトのメソッド random を使用して，配列の各要素の値（円を描画する位置）をランダムに設定しています．random は，[0, 1] 区間の一様乱数を生成するメソッドであり，このメソッドを呼ぶたびに 0 ～ 1 の間の数値をランダムに返します．従って，「 (mp.canvas.width - 40) * Math.random() 」の値は，width が 400 ですので，0 ～ 360 の間の数値になります．この値を，floor メソッドによって小数点以下を切り捨て，20 を加えていますので，結局，x[i1] の値は，20 ～ 380 の間の整数値になります．

    57 行目～ 64 行目

    　　異なる色の塗りつぶした円を描画しています（「 パスの生成と描画」，「Line，fill，stroke スタイル」参照）．

    70 行目～ 77 行目

    　　GamePanel オブジェクトのメソッド next の定義であり，「ゲームクリア」または「ゲームオーバー」ボタンがクリックされた時に呼び出されます．タイマーを停止し（ 72 行目），引数 sw によって指定されたパネルに移動します．

  6. GameClearPanel

    　　ゲームクリア状態を表示するためのプログラムです．表示されたボタンによって，ゲームを終了するか，または，次のレベルに進む（レベル 3 の場合は，最初から再開）かを選択します．そのプログラムは以下に示すとおりです．15 行目～ 28 行目において，ゲームレベルに従って表示ボタンを変えると共に，その表示内容を変更しています． 

    01				//
02				// GameClearPanel の開始
03				//
04	function gcp_start()
05	{
06						// キャンバスのクリア
07		mp.ctx.clearRect(0, 0, mp.canvas.width, mp.canvas.height);
08						// タイトルの表示
09		mp.ctx.font = "40px 'ＭＳ ゴシック'";
10		mp.ctx.textBaseline = "middle";
11		mp.ctx.textAlign = "center";
12		mp.ctx.fillStyle = "rgb(0, 0, 0)";
13		mp.ctx.fillText("Game Clear!", mp.canvas.width/2, mp.canvas.height/2);
14						// ボタンの表示制御
15		document.getElementById('method').style.display = "none";
16		document.getElementById('clear').style.display = "none";
17		document.getElementById('over').style.display = "none";
18		if (mp.level > 2) {   // 最初からゲーム再開
19			document.getElementById('start').style.display = "none";
20			document.getElementById('first').style.display = "";
21		}
22		else {   // レベルアップ
23			mp.level++;
24			document.getElementById('start').style.display = "";
25			document.getElementById('first').style.display = "none";
26			document.getElementById('start').innerHTML = "次のレベル";
27		}
28		document.getElementById('finish').style.display = "";
29	}

  7. GameOverPanel

    　　ゲームオーバー状態を表示するためのプログラムです．表示されたボタンによって，ゲームを終了，現在のレベルでゲーム再開，または，最初から再開するかを選択します．そのプログラムは以下に示すとおりです． 

    			//
			// GameOverPanel の開始
			//
function gop_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 Over!", mp.canvas.width/2, mp.canvas.height/2);
					// ボタンの表示制御
	document.getElementById('method').style.display = "none";
	document.getElementById('start').style.display = "";
	document.getElementById('clear').style.display = "none";
	document.getElementById('over').style.display = "none";
	document.getElementById('first').style.display = "";
	document.getElementById('finish').style.display = "";
	document.getElementById('start').innerHTML = "現レベルで再開";
}

情報学部 菅沼ホーム JavaScript 目次 索引