| 情報学部 | 菅沼ホーム | JavaScript 目次 | 索引 |
<!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> <SCRIPT TYPE="text/javascript" SRC="over/GameOverPanel.js"></SCRIPT> </HEAD> <BODY CLASS="eeffee" onLoad="mp_start()"> <H1>アクションゲーム：ステップ１</H1> <CANVAS ID="canvas_e" STYLE="background-color: #ffffff;" WIDTH="400" 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> </BODY> </HTML>
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";
}
//
// 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('start').innerHTML = "ゲーム開始";
}
01 gp = null; // GamePanel オブジェクト
02
03 //
04 // GamePanel の開始
05 //
06 function gp_start()
07 {
08 // GamePanel オブジェクト
09 gp = new GamePanel();
10 // タイマーのスタート
11 gp.timerID = setInterval('gp.draw()', 30);
12 // マウスリスナの追加（マウスボタンが押された時）
13 mp.canvas.addEventListener("mousedown", gp.onMouseDown);
14 // ボタンの表示制御
15 document.getElementById('method').style.display = "none";
16 document.getElementById('start').style.display = "none";
17 document.getElementById('first').style.display = "none";
18 document.getElementById('finish').style.display = "none";
19 }
20 //
21 // GamePanel オブジェクト（プロパティ）
22 //
23 function GamePanel()
24 {
25 this.timerID = -1;
26 this.rd = new Road(); // Road オブジェクト
27 this.hr = new Hero(this.rd); // Hero オブジェクト
28 return this;
29 }
30 //
31 // GamePanel オブジェクト（メソッド draw）
32 //
33 GamePanel.prototype.draw = function()
34 {
35 // キャンバスのクリア
36 mp.ctx.clearRect(0, 0, mp.canvas.width, mp.canvas.height);
37 // 移動
38 gp.rd.x += gp.rd.v_x;
39 gp.hr.x += gp.hr.v_x;
40 // 描画
41 mp.ctx.drawImage(gp.rd.image, gp.rd.x, gp.rd.y);
42 mp.ctx.drawImage(gp.hr.image, gp.hr.x, gp.hr.y);
43 }
44 //
45 // GamePanel オブジェクト（メソッド onMouseDown）
46 //
47 GamePanel.prototype.onMouseDown = function(event)
48 {
49 clearInterval(gp.timerID); // タイマーの停止
50 gcp_start();
51 }
52 //
53 // Road オブジェクト（プロパティ）
54 //
55 function Road()
56 {
57 this.image = new Image(); // 背景
58 this.v_x = -2.0; // 背景の水平方向移動速度
59 this.width = (mp.level == 1) ? 643 : 557; // 背景画像の幅
60 this.height = 102; // 背景画像の高さ
61 // 背景の読み込み
62 if (mp.level == 1)
63 this.image.src = "image/road1.jpg";
64 else
65 this.image.src = "image/road2.jpg";
66 // 背景の初期位置
67 this.x = 0;
68 this.y = mp.canvas.height - this.height;
69 return this;
70 }
71 //
72 // Hero オブジェクト（プロパティ）
73 //
74 function Hero(rd)
75 {
76 this.image = new Image(); // 主人公
77 this.v_x = 1.0; // 主人公の水平方向移動速度
78 this.width = 32; // 主人公の幅
79 this.height = 52; // 主人公の高さ
80 // 主人公の読み込み
81 this.image.src = "image/char.jpg";
82 // 主人公の初期位置
83 this.x = 0;
84 this.y = mp.canvas.height - rd.height - this.height;
85 return this;
86 }
変数 = (論理式) ? 式1 : 式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 = "";
}
//
// 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('first').style.display = "";
document.getElementById('finish').style.display = "";
document.getElementById('start').innerHTML = "現レベルで再開";
}
001 gp = null; // GamePanel オブジェクト
002
003 //
004 // GamePanel の開始
005 //
006 function gp_start()
007 {
008 // GamePanel オブジェクト
009 gp = new GamePanel();
010 // タイマーのスタート
011 gp.timerID = setInterval('gp.draw()', 30);
012 // マウスリスナの追加（マウスボタンが押された時）
013 mp.canvas.addEventListener("mousedown", gp.onMouseDown);
014 // ボタンの表示制御
015 document.getElementById('method').style.display = "none";
016 document.getElementById('start').style.display = "none";
017 document.getElementById('first').style.display = "none";
018 document.getElementById('finish').style.display = "none";
019 }
020 //
021 // GamePanel オブジェクト（プロパティ）
022 //
023 function GamePanel()
024 {
025 this.timerID = -1;
026 this.rd = new Road(); // Road オブジェクト
027 this.hr = new Hero(this.rd); // Hero オブジェクト
028 return this;
029 }
030 //
031 // GamePanel オブジェクト（メソッド draw）
032 //
033 GamePanel.prototype.draw = function()
034 {
035 // キャンバスのクリア
036 mp.ctx.clearRect(0, 0, mp.canvas.width, mp.canvas.height);
037 // 移動
038 gp.rd.x += gp.rd.v_x;
039 gp.hr.x += gp.hr.v_x;
040 // 描画
041 mp.ctx.drawImage(gp.rd.image, gp.rd.x, gp.rd.y);
042 mp.ctx.drawImage(gp.hr.image, gp.hr.x, gp.hr.y);
043 // 道の状態のチェック
044 let p = gp.hr.x - gp.rd.x + gp.hr.width / 2;
045 let sw = -1;
046 for (let i1 = 0; i1 < gp.rd.state.length && sw < 0; i1++) {
047 if (p <= gp.rd.state[i1][0])
048 sw = gp.rd.state[i1][1];
049 }
050 if (sw < 0) // ゴールを通過
051 sw = 1;
052 if (sw > 0) {
053 clearInterval(gp.timerID); // タイマーの停止
054 if (sw == 1)
055 gop_start(); // ゲームオーバー
056 else
057 gcp_start(); // ゲームクリア
058 }
059 }
060 //
061 // GamePanel オブジェクト（メソッド onMouseDown）
062 //
063 GamePanel.prototype.onMouseDown = function(event)
064 {
065 clearInterval(gp.timerID); // タイマーの停止
066 gcp_start();
067 }
068 //
069 // Road オブジェクト（プロパティ）
070 //
071 function Road()
072 {
073 this.image = new Image(); // 背景
074 this.v_x = -2.0; // 背景の水平方向移動速度
075 this.width = (mp.level == 1) ? 643 : 557; // 背景画像の幅
076 this.height = 102; // 背景画像の高さ
077 this.s1 = new Array()
078 this.s1[0] = new Array(147, 0);
079 this.s1[1] = new Array(204, 1);
080 this.s1[2] = new Array(352, 0);
081 this.s1[3] = new Array(494, 1);
082 this.s1[4] = new Array(642, 10);
083 this.s2 = new Array();
084 this.s2[0] = new Array(73, 0);
085 this.s2[1] = new Array(139, 1);
086 this.s2[2] = new Array(213, 0);
087 this.s2[3] = new Array(330, 1);
088 this.s2[4] = new Array(404, 0);
089 this.s2[5] = new Array(482, 1);
090 this.s2[6] = new Array(556, 10);
091 this.state = null; // 背景（道）の状態
092 // state[i][0] : 状態変化の終了位置
093 // state[i][1] : 道の状態
094 // =0 : 道
095 // =1 : 谷
096 // =10 : ゴール
097 // 背景の読み込みと状態設定
098 if (mp.level == 1) {
099 this.image.src = "image/road1.jpg";
100 this.state = this.s1;
101 }
102 else {
103 this.image.src = "image/road2.jpg";
104 this.state = this.s2;
105 }
106 // 背景の初期位置
107 this.x = 0;
108 this.y = mp.canvas.height - this.height;
109 return this;
110 }
111 //
112 // Hero オブジェクト（プロパティ）
113 //
114 function Hero(rd)
115 {
116 this.image = new Image(); // 主人公
117 this.v_x = 1.0; // 主人公の水平方向移動速度
118 this.width = 32; // 主人公の幅
119 this.height = 52; // 主人公の高さ
120 // 主人公の読み込み
121 this.image.src = "image/char.jpg";
122 // 背景の初期位置
123 this.x = 0;
124 this.y = mp.canvas.height - rd.height - this.height;
125 return this;
126 }
state[0][0] = 147; // 0 から 147 ピクセルまでは道 state[0][1] = 0; state[1][0] = 204; // 148 から 204 ピクセルまでは谷 state[1][1] = 1; ･････ state[4][0] = 642; // 495 から 642 ピクセルまではゴール state[4][1] = 10;
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);
001 gp = null; // GamePanel オブジェクト
002
003 //
004 // GamePanel の開始
005 //
006 function gp_start()
007 {
008 // GamePanel オブジェクト
009 gp = new GamePanel();
010 // タイマーのスタート
011 gp.timerID = setInterval('gp.draw()', 30);
012 // マウスリスナの追加（マウスボタンが押された時と離された時）
013 mp.canvas.addEventListener("mousedown", gp.onMouseDown);
014 mp.canvas.addEventListener("touchstart", gp.onMouseDown);
015 mp.canvas.addEventListener("touchmove", gp.onMouseDown);
016 mp.canvas.addEventListener("mouseup", gp.onMouseUp);
017 // ボタンの表示制御
018 document.getElementById('method').style.display = "none";
019 document.getElementById('start').style.display = "none";
020 document.getElementById('first').style.display = "none";
021 document.getElementById('finish').style.display = "none";
022 }
023 //
024 // GamePanel オブジェクト（プロパティ）
025 //
026 function GamePanel()
027 {
028 this.timerID = -1;
029 this.rd = new Road(); // Road オブジェクト
030 this.hr = new Hero(this.rd); // 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 gp.rd.x += gp.rd.v_x;
042 gp.hr.v_y += (gp.hr.up - gp.hr.down);
043 gp.hr.x += gp.hr.v_x;
044 gp.hr.y -= gp.hr.v_y;
045 // 描画
046 mp.ctx.drawImage(gp.rd.image, gp.rd.x, gp.rd.y);
047 mp.ctx.drawImage(gp.hr.image, gp.hr.x, gp.hr.y);
048 // 道の状態のチェック
049 /*
050 let p = gp.hr.x - gp.rd.x + gp.hr.width / 2;
051 let sw = -1;
052 for (let i1 = 0; i1 < gp.rd.state.length && sw < 0; i1++) {
053 if (p <= gp.rd.state[i1][0])
054 sw = gp.rd.state[i1][1];
055 }
056 if (sw < 0) // ゴールを通過
057 sw = 1;
058 if (sw > 0) {
059 clearInterval(gp.timerID); // タイマーの停止
060 if (sw == 1)
061 gop_start(); // ゲームオーバー
062 else
063 gcp_start(); // ゲームクリア
064 }
065 */
066 }
067 //
068 // GamePanel オブジェクト（メソッド onMouseDown）
069 //
070 GamePanel.prototype.onMouseDown = function(event)
071 {
072 if (!gp.hr.jump) {
073 gp.hr.up = 1.0;
074 gp.hr.down = 0.5;
075 gp.hr.v_x = 2.0;
076 gp.hr.jump = true;
077 gp.hr.y--; // 着地判定のため，1 ピクセルだけジャンプさせておく
078 }
079 }
080 //
081 // GamePanel オブジェクト（メソッド onMouseUp）
082 //
083 GamePanel.prototype.onMouseUp = function(event)
084 {
085 gp.hr.up = 0.0;
086 gp.hr.down = 0.5;
087 }
088 //
089 // Road オブジェクト（プロパティ）
090 //
091 function Road()
092 {
093 this.image = new Image(); // 背景
094 this.v_x = -2.0; // 背景の水平方向移動速度
095 this.width = (mp.level == 1) ? 643 : 557; // 背景画像の幅
096 this.height = 102; // 背景画像の高さ
097 this.s1 = new Array()
098 this.s1[0] = new Array(147, 0);
099 this.s1[1] = new Array(204, 1);
100 this.s1[2] = new Array(352, 0);
101 this.s1[3] = new Array(494, 1);
102 this.s1[4] = new Array(642, 10);
103 this.s2 = new Array();
104 this.s2[0] = new Array(73, 0);
105 this.s2[1] = new Array(139, 1);
106 this.s2[2] = new Array(213, 0);
107 this.s2[3] = new Array(330, 1);
108 this.s2[4] = new Array(404, 0);
109 this.s2[5] = new Array(482, 1);
110 this.s2[6] = new Array(556, 10);
111 this.state = null; // 背景（道）の状態
112 // state[i][0] : 状態変化の終了位置
113 // state[i][1] : 道の状態
114 // =0 : 道
115 // =1 : 谷
116 // =10 : ゴール
117 // 背景の読み込みと状態設定
118 if (mp.level == 1) {
119 this.image.src = "image/road1.jpg";
120 this.state = this.s1;
121 }
122 else {
123 this.image.src = "image/road2.jpg";
124 this.state = this.s2;
125 }
126 // 背景の初期位置
127 this.x = 0;
128 this.y = mp.canvas.height - this.height;
129 return this;
130 }
131 //
132 // Hero オブジェクト（プロパティ）
133 //
134 function Hero(rd)
135 {
136 this.image = new Image(); // 主人公
137 this.v_x = 1.0; // 主人公の水平方向移動速度
138 this.v_y = 0.0; // 主人公の垂直方向移動速度
139 this.up = 0.0; // 主人公の上向き加速度
140 this.down = 0; // 主人公の下向き加速度
141 this.jump = false; // 主人公がジャンプ中か？
142 this.width = 32; // 主人公の幅
143 this.height = 52; // 主人公の高さ
144 // 主人公の読み込み
145 this.image.src = "image/char.jpg";
146 // 背景の初期位置
147 this.x = 0;
148 this.y = mp.canvas.height - rd.height - this.height;
149 return this;
150 }
001 gp = null; // GamePanel オブジェクト
002
003 //
004 // GamePanel の開始
005 //
006 function gp_start()
007 {
008 // GamePanel オブジェクト
009 gp = new GamePanel();
010 // タイマーのスタート
011 gp.timerID = setInterval('gp.draw()', 30);
012 // マウスリスナの追加（マウスボタンが押された時と離された時）
013 mp.canvas.addEventListener("mousedown", gp.onMouseDown);
014 mp.canvas.addEventListener("touchstart", gp.onMouseDown);
015 mp.canvas.addEventListener("touchmove", gp.onMouseDown);
016 mp.canvas.addEventListener("mouseup", gp.onMouseUp);
017 // ボタンの表示制御
018 document.getElementById('method').style.display = "none";
019 document.getElementById('start').style.display = "none";
020 document.getElementById('first').style.display = "none";
021 document.getElementById('finish').style.display = "none";
022 }
023 //
024 // GamePanel オブジェクト（プロパティ）
025 //
026 function GamePanel()
027 {
028 this.timerID = -1;
029 this.rd = new Road(); // Road オブジェクト
030 this.hr = new Hero(this.rd); // 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 gp.rd.x += gp.rd.v_x;
042 gp.hr.v_y += (gp.hr.up - gp.hr.down);
043 gp.hr.x += gp.hr.v_x;
044 gp.hr.y -= gp.hr.v_y;
045 // 描画
046 mp.ctx.drawImage(gp.rd.image, gp.rd.x, gp.rd.y);
047 mp.ctx.drawImage(gp.hr.image, gp.hr.x, gp.hr.y);
048 // 状態のチェック
049 // 水平位置のチェック
050 let p = gp.hr.x - gp.rd.x + gp.hr.width / 2;
051 let sw = -1;
052 for (let i1 = 0; i1 < gp.rd.state.length && sw < 0; i1++) {
053 if (p <= gp.rd.state[i1][0])
054 sw = gp.rd.state[i1][1];
055 }
056 if (sw < 0) // ゴールを通過
057 sw = 1;
058 // 垂直位置のチェック
059 else {
060 if (gp.hr.jump) {
061 if (gp.hr.y >= mp.canvas.height - gp.rd.height - gp.hr.height) {
062 if (sw == 0 || sw == 10) {
063 gp.hr.jump = false;
064 gp.hr.down = 0.0;
065 gp.hr.v_x = 1.0;
066 gp.hr.v_y = 0.0;
067 gp.hr.y = mp.canvas.height - gp.rd.height - gp.hr.height;
068 }
069 }
070 else
071 sw = 0;
072 }
073 }
074 // ゲーム状態変更
075 if (sw > 0) {
076 clearInterval(gp.timerID); // タイマーの停止
077 if (sw == 1)
078 gop_start(); // ゲームオーバー
079 else
080 gcp_start(); // ゲームクリア
081 }
082 }
083 //
084 // GamePanel オブジェクト（メソッド onMouseDown）
085 //
086 GamePanel.prototype.onMouseDown = function(event)
087 {
088 if (!gp.hr.jump) {
089 gp.hr.up = 1.0;
090 gp.hr.down = 0.5;
091 gp.hr.v_x = 2.0;
092 gp.hr.jump = true;
093 gp.hr.y--; // 着地判定のため，1 ピクセルだけジャンプさせておく
094 }
095 }
096 //
097 // GamePanel オブジェクト（メソッド onMouseUp）
098 //
099 GamePanel.prototype.onMouseUp = function(event)
100 {
101 gp.hr.up = 0.0;
102 gp.hr.down = 0.5;
103 }
104 //
105 // Road オブジェクト（プロパティ）
106 //
107 function Road()
108 {
109 this.image = new Image(); // 背景
110 this.v_x = -2.0; // 背景の水平方向移動速度
111 this.width = (mp.level == 1) ? 643 : 557; // 背景画像の幅
112 this.height = 102; // 背景画像の高さ
113 this.s1 = new Array()
114 this.s1[0] = new Array(147, 0);
115 this.s1[1] = new Array(204, 1);
116 this.s1[2] = new Array(352, 0);
117 this.s1[3] = new Array(494, 1);
118 this.s1[4] = new Array(642, 10);
119 this.s2 = new Array();
120 this.s2[0] = new Array(73, 0);
121 this.s2[1] = new Array(139, 1);
122 this.s2[2] = new Array(213, 0);
123 this.s2[3] = new Array(330, 1);
124 this.s2[4] = new Array(404, 0);
125 this.s2[5] = new Array(482, 1);
126 this.s2[6] = new Array(556, 10);
127 this.state = null; // 背景（道）の状態
128 // state[i][0] : 状態変化の終了位置
129 // state[i][1] : 道の状態
130 // =0 : 道
131 // =1 : 谷
132 // =10 : ゴール
133 // 背景の読み込みと状態設定
134 if (mp.level == 1) {
135 this.image.src = "image/road1.jpg";
136 this.state = this.s1;
137 }
138 else {
139 this.image.src = "image/road2.jpg";
140 this.state = this.s2;
141 }
142 // 背景の初期位置
143 this.x = 0;
144 this.y = mp.canvas.height - this.height;
145 return this;
146 }
147 //
148 // Hero オブジェクト（プロパティ）
149 //
150 function Hero(rd)
151 {
152 this.image = new Image(); // 主人公
153 this.v_x = 1.0; // 主人公の水平方向移動速度
154 this.v_y = 0.0; // 主人公の垂直方向移動速度
155 this.up = 0.0; // 主人公の上向き加速度
156 this.down = 0; // 主人公の下向き加速度
157 this.jump = false; // 主人公がジャンプ中か？
158 this.width = 32; // 主人公の幅
159 this.height = 52; // 主人公の高さ
160 // 主人公の読み込み
161 this.image.src = "image/char.jpg";
162 // 背景の初期位置
163 this.x = 0;
164 this.y = mp.canvas.height - rd.height - this.height;
165 return this;
166 }
if (gp.hr.y == mp.canvas.height - gp.rd.height - gp.hr.height) {
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 <SCRIPT TYPE="text/javascript" SRC="over/GameOverPanel.js"></SCRIPT>
12 </HEAD>
13 <BODY CLASS="eeffee" onLoad="mp_start()">
14 <H1>アクションゲーム：BGM 付き（完成）</H1>
15 <CANVAS ID="canvas_e" STYLE="background-color: #ffffff;" WIDTH="400" HEIGHT="300"></CANVAS><BR>
16 <A HREF="method.htm" TARGET="method"><BUTTON ID="method" CLASS="std">遊び方</BUTTON></A>
17 <BUTTON ID="start" CLASS="std" onClick="gp_start()">ゲーム開始</BUTTON>
18 <BUTTON ID="first" CLASS="std" onClick="st_start()">最初から再開</BUTTON>
19 <BUTTON ID="finish" CLASS="std" onClick="mp.finish()">ゲーム終了</BUTTON>
20 <AUDIO ID="BGM" LOOP SRC="Action_BGM.mp3"></AUDIO> <!-- BGMのために追加 -->
21 </BODY>
22 </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 document.getElementById('BGM').currentTime = 0.5; // 約0.5秒の空白をスキップ
012 // GamePanel オブジェクト
013 gp = new GamePanel();
014 // タイマーのスタート
015 gp.timerID = setInterval('gp.draw()', 30);
016 // マウスリスナの追加（マウスボタンが押された時と離された時）
017 mp.canvas.addEventListener("mousedown", gp.onMouseDown);
018 mp.canvas.addEventListener("touchstart", gp.onMouseDown);
019 mp.canvas.addEventListener("touchmove", gp.onMouseDown);
020 mp.canvas.addEventListener("mouseup", gp.onMouseUp);
021 // ボタンの表示制御
022 document.getElementById('method').style.display = "none";
023 document.getElementById('start').style.display = "none";
024 document.getElementById('first').style.display = "none";
025 document.getElementById('finish').style.display = "none";
026 }
027 //
028 // GamePanel オブジェクト（プロパティ）
029 //
030 function GamePanel()
031 {
032 this.timerID = -1;
033 this.rd = new Road(); // Road オブジェクト
034 this.hr = new Hero(this.rd); // Hero オブジェクト
035 return this;
036 }
037 //
038 // GamePanel オブジェクト（メソッド draw）
039 //
040 GamePanel.prototype.draw = function()
041 {
042 // キャンバスのクリア
043 mp.ctx.clearRect(0, 0, mp.canvas.width, mp.canvas.height);
044 // 移動
045 gp.rd.x += gp.rd.v_x;
046 gp.hr.v_y += (gp.hr.up - gp.hr.down);
047 gp.hr.x += gp.hr.v_x;
048 gp.hr.y -= gp.hr.v_y;
049 // 描画
050 mp.ctx.drawImage(gp.rd.image, gp.rd.x, gp.rd.y);
051 mp.ctx.drawImage(gp.hr.image, gp.hr.x, gp.hr.y);
052 // 状態のチェック
053 // 水平位置のチェック
054 let p = gp.hr.x - gp.rd.x + gp.hr.width / 2;
055 let sw = -1;
056 for (let i1 = 0; i1 < gp.rd.state.length && sw < 0; i1++) {
057 if (p <= gp.rd.state[i1][0])
058 sw = gp.rd.state[i1][1];
059 }
060 if (sw < 0) // ゴールを通過
061 sw = 1;
062 // 垂直位置のチェック
063 else {
064 if (gp.hr.jump) {
065 if (gp.hr.y >= mp.canvas.height - gp.rd.height - gp.hr.height) {
066 if (sw == 0 || sw == 10) {
067 gp.hr.jump = false;
068 gp.hr.down = 0.0;
069 gp.hr.v_x = 1.0;
070 gp.hr.v_y = 0.0;
071 gp.hr.y = mp.canvas.height - gp.rd.height - gp.hr.height;
072 }
073 }
074 else
075 sw = 0;
076 }
077 }
078 // ゲーム状態変更
079 if (sw > 0) {
080 document.getElementById('BGM').pause(); // BGMのために追加
081 document.getElementById('BGM').load(); // BGMのために追加
082 clearInterval(gp.timerID); // タイマーの停止
083 if (sw == 1)
084 gop_start(); // ゲームオーバー
085 else
086 gcp_start(); // ゲームクリア
087 }
088 }
089 //
090 // GamePanel オブジェクト（メソッド onMouseDown）
091 //
092 GamePanel.prototype.onMouseDown = function(event)
093 {
094 if (!gp.hr.jump) {
095 gp.hr.up = 1.0;
096 gp.hr.down = 0.5;
097 gp.hr.v_x = 2.0;
098 gp.hr.jump = true;
099 gp.hr.y--; // 着地判定のため，1 ピクセルだけジャンプさせておく
100 }
101 }
102 //
103 // GamePanel オブジェクト（メソッド onMouseUp）
104 //
105 GamePanel.prototype.onMouseUp = function(event)
106 {
107 gp.hr.up = 0.0;
108 gp.hr.down = 0.5;
109 }
110 //
111 // Road オブジェクト（プロパティ）
112 //
113 function Road()
114 {
115 this.image = new Image(); // 背景
116 this.v_x = -2.0; // 背景の水平方向移動速度
117 this.width = (mp.level == 1) ? 643 : 557; // 背景画像の幅
118 this.height = 102; // 背景画像の高さ
119 this.s1 = new Array()
120 this.s1[0] = new Array(147, 0);
121 this.s1[1] = new Array(204, 1);
122 this.s1[2] = new Array(352, 0);
123 this.s1[3] = new Array(494, 1);
124 this.s1[4] = new Array(642, 10);
125 this.s2 = new Array();
126 this.s2[0] = new Array(73, 0);
127 this.s2[1] = new Array(139, 1);
128 this.s2[2] = new Array(213, 0);
129 this.s2[3] = new Array(330, 1);
130 this.s2[4] = new Array(404, 0);
131 this.s2[5] = new Array(482, 1);
132 this.s2[6] = new Array(556, 10);
133 this.state = null; // 背景（道）の状態
134 // state[i][0] : 状態変化の終了位置
135 // state[i][1] : 道の状態
136 // =0 : 道
137 // =1 : 谷
138 // =10 : ゴール
139 // 背景の読み込みと状態設定
140 if (mp.level == 1) {
141 this.image.src = "image/road1.jpg";
142 this.state = this.s1;
143 }
144 else {
145 this.image.src = "image/road2.jpg";
146 this.state = this.s2;
147 }
148 // 背景の初期位置
149 this.x = 0;
150 this.y = mp.canvas.height - this.height;
151 return this;
152 }
153 //
154 // Hero オブジェクト（プロパティ）
155 //
156 function Hero(rd)
157 {
158 this.image = new Image(); // 主人公
159 this.v_x = 1.0; // 主人公の水平方向移動速度
160 this.v_y = 0.0; // 主人公の垂直方向移動速度
161 this.up = 0.0; // 主人公の上向き加速度
162 this.down = 0; // 主人公の下向き加速度
163 this.jump = false; // 主人公がジャンプ中か？
164 this.width = 32; // 主人公の幅
165 this.height = 52; // 主人公の高さ
166 // 主人公の読み込み
167 this.image.src = "image/char.jpg";
168 // 背景の初期位置
169 this.x = 0;
170 this.y = mp.canvas.height - rd.height - this.height;
171 return this;
172 }
| 情報学部 | 菅沼ホーム | JavaScript 目次 | 索引 |