JavaScriptでつくるレトロなゲーム 万引少年。このページではステージクリアとゲームオーバー時の処理を実装します。
⇒ 動作確認はこちら
StageClearクラス
ステージクリア時の処理をおこなうStageClearクラスを示します。ここでおこなう処理は万引き少年と万引きをそそのかした悪友？らしき少年がバンザイを繰り返す表示です。
最初にコンストラクタを示します。
stage-clear.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
class StageClear{ constructor(fieldElement){ this.StageClearFieldString = "" + " \n" + " \n" + " \n" + " ■■■■■■■■■■■■■■■■■■■■ \n" + " ■ セ ○ ン イ レ ブ ン ■■■ \n" + " ■■■■■■■■■■■■■■■■■■■■ \n" + " ■ ┏━━┓ ┏━━┓ ┏━━┓ ■■■ \n" + " ■ ┃ ┃ ┃ ┃ ┃ ┃ ■■■ \n" + " ■ ┃ ┃ ┃ ┃ ┃ ┃ ■■■ \n" + " ダイセイコウダ!! ■ ┃ ┃ ┃ ┃ ┃ ┃ ■■■ \n" + " ■ ┗━━┛ ┗━━┛ ┗━━┛ ■■■ \n" + " アジタモタノムゾ!! ■ ┏━━┓ ┏━━┓ ┏━━┓ ■■■ \n" + " ■ ┃ ┃ ┃ ┃ ┃ ┃ ■■■ \n" + " ■ ┃ ┃ ┃ ┃ ┃ ┃ ■■■ \n" + " ＼○／＼○ ■ ┃ ┃ ┃ ┃ ┃ ┃ ■■■ \n" + " （■＼／■ ■ ┃ ┃ ┃ ┃ ┃ ┃ ■■■ \n" + " || || ■ ┗━━┛ ┗━━┛ ┗━━┛ ■■■ \n" + " ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ \n" + " \n" + " \n" + " \n"; this.FieldElement = fieldElement; this.UpdateCount = 0; this.End = false; } } |
描画する処理を示します。メンバ変数 StageClearFieldStringのなかから上げている手と下げている手のうち片方だけ表示して高速で万歳を繰り返しているように見せかけます。ReplaceString関数はStoreクラスのものとまったく同じものです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
class StageClear{ Show(){ this.UpdateCount++; let arr = this.StageClearFieldString.split('\n'); if (this.UpdateCount % 2 == 0) { // 挙げている手を消している let row = 14; arr[row] = this.ReplaceString(arr[row], 4, 1, ' '); arr[row] = this.ReplaceString(arr[row], 6, 1, ' '); arr[row] = this.ReplaceString(arr[row], 7, 1, ' '); } else { // 下ろしている手を消している let row = 15; arr[row] = this.ReplaceString(arr[row], 4, 1, ' ') arr[row] = this.ReplaceString(arr[row], 6, 1, ' ') arr[row] = this.ReplaceString(arr[row], 7, 1, ' ') } if(this.UpdateCount > 32){ this.End = true; this.UpdateCount = 0; } this.FieldElement.innerHTML = arr.join('\n'); } ReplaceString(source, begin, deleteCount, replace_str){ let before = source.slice(0, begin); let after = source.slice(begin + deleteCount); return before + replace_str + after; } } |
GameOverクラス
ゲームオーバー時の処理をおこなうGameOverクラスを示します。
最初にコンストラクタを示します。
gameover.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
class GameOver{ constructor(fieldElement){ this.GameOverFieldString = "" + " \n" + " \n" + " \n" + " \n" + " \n" + " \n" + " \n" + " \n" + " ┏━━━━━━━━━━┓ \n" + " ┃ ＰＯＬＩＣＥ ┃ \n" + " ┗━━━━━━━━━━┛ \n" + " ■■■■■■■■■■ \n" + " ■ ■ \n" + " ■ ■ \n" + " ■■■■■■■■■■━━━━━━━━━━━━━━━━━━━━━━━━\n" + " \n" + " ＧＡＭＥ ＯＶＥＲ \n" + " \n" + " ＹＯＵＲ ＳＣＯＲＥ ００００００ \n" + " \n" + " ＰＵＳＨ Ｓ ＫＥＹ ＧＡＭＥ ＳＴＡＲＴ！ \n" + " \n"; this.FieldElement = fieldElement; this.UpdateCount = 0; this.EnableRestart = false; // trueのときに「S」キーを押せばゲームに再挑戦できる } } |
ゲームオーバー画面を表示する処理を示します。ReplaceString関数はこれまでのものと同じです。
スコアを表示させたいので引数で取ってきています。はじめは警察署に連行される描画、中央あたりまで移動したら少年に土下座をさせる描画をおこないます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
class GameOver{ ReplaceString(source, begin, deleteCount, replace_str){ let before = source.slice(0, begin); let after = source.slice(begin + deleteCount); return before + replace_str + after; } Show(score){ let scoreString = '000000' + score; scoreString = scoreString.slice(-6); scoreString = scoreString.replace(/0/g, '０'); scoreString = scoreString.replace(/1/g, '１'); scoreString = scoreString.replace(/2/g, '２'); scoreString = scoreString.replace(/3/g, '３'); scoreString = scoreString.replace(/4/g, '４'); scoreString = scoreString.replace(/5/g, '５'); scoreString = scoreString.replace(/6/g, '６'); scoreString = scoreString.replace(/7/g, '７'); scoreString = scoreString.replace(/8/g, '８'); scoreString = scoreString.replace(/9/g, '９'); this.UpdateCount++; let str = ""; if (this.UpdateCount < 10) { // 最初に効果音を鳴らす if(this.UpdateCount == 1){ let music = new Audio('./gameover.mp3'); music.play(); } str = this.GetGameOverString1(); } else { str = this.GetGameOverString2(); } // GameOverUpdateCountが31以下のときは「ＰＵＳＨ Ｓ ＫＥＹ ＧＡＭＥ ＳＴＡＲＴ！」を表示させない if(this.UpdateCount < 32) str = str.replace("ＰＵＳＨ Ｓ ＫＥＹ ＧＡＭＥ ＳＴＡＲＴ！", ""); else this.EnableRestart = true; //「S」キーを押せばゲームに再挑戦できる状態にする this.FieldElement.innerHTML = str.replace("００００００", scoreString); } } |
連行される描画をするための処理
GetGameOverString1関数は警察署に連行される描画をするために必要な文字列を取得する処理をおこないます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
class GameOver{ GetGameOverString1(){ let str = this.GameOverFieldString; let arr = str.split('\n'); let update = this.UpdateCount; // 警備員が少年を連行する様子を示す文字に入れ替える let row = 11; arr[row] = this.ReplaceString(arr[row], 32 - update, 5, '＿● ○ '); row = 12; arr[row] = this.ReplaceString(arr[row], 32 - update, 6, ' ■■×■■'); row = 13; arr[row] = this.ReplaceString(arr[row], 32 - update, 6, ' 〈〈 〈〈'); return arr.join('\n'); } } |
少年が土下座をする描画をするための処理
GetGameOverString2関数は警察署前で少年が土下座をする描画をするために必要な文字列を取得する処理をおこないます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
class GameOver{ GetGameOverString2(){ let str = this.GameOverFieldString; let arr = str.split('\n'); let row = 9; arr[row] = this.ReplaceString(arr[row], 22, 14, 'オラ!! 警察をなめるな!!'); row = 11; if (this.UpdateCount % 2 == 0) arr[row] = this.ReplaceString(arr[row], 22, 1, '●'); else arr[row] = this.ReplaceString(arr[row], 22, 2, '●＿'); arr[row] = this.ReplaceString(arr[row], 25, 3, 'ウヘェ'); row = 12; if (this.UpdateCount % 2 == 1) arr[row] = this.ReplaceString(arr[row], 22, 5, '■ ／'); else arr[row] = this.ReplaceString(arr[row], 22, 5, '■＼ ／'); row = 13; arr[row] = this.ReplaceString(arr[row], 22, 3, '|| ○ｒｚ'); return arr.join('\n'); } } |
