⇒ 動作確認はこちらからどうぞ。
←↑→↓キーで移動、Zキーで穴を堀り、Xキーで埋めます。黄色いやさぐれひよこは落とせば死にますが、ピンク色のものは2段、青いやさぐれひよこは3段連続で落とさないと死にません。
前回までにGameManagerクラス、Playerクラス、Enemyクラスを作成してきました。今回はそれ以外のクラスを作成してゲームを完成させます。
Holeクラス
まず穴を描画するためのHoleクラスを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
class Hole { // 穴の深さ Depth: number = 1; // 穴の位置。ここと敵が重なると穴にハマったことになる Rectangle: Rectangle = null; // 深さ1の場合 HoleRectangle1: Rectangle = null; // 深さ2の場合 HoleRectangle2: Rectangle = null; // 深さ3の場合 HoleRectangle3: Rectangle = null; // 穴にハマっている敵 public Enemy: Enemy = null; } |
コンストラクタの他にひとつだけです。コンストラクタでは穴の位置と深さ1と2と3の穴を描画するための矩形を取得します。
|
1 2 3 4 5 6 7 8 9 10 11 |
class Hole { public constructor(x: number, y: number) { let y1 = y + GameManager.CharctorSize; let depth1 = GameManager.CharctorSize / 3 * 1; let depth2 = GameManager.CharctorSize / 3 * 2; let depth3 = GameManager.CharctorSize / 3 * 3; this.HoleRectangle1 = new Rectangle(x, y1, GameManager.CharctorSize, depth1); this.HoleRectangle2 = new Rectangle(x, y1, GameManager.CharctorSize, depth2); this.HoleRectangle3 = new Rectangle(x, y1, GameManager.CharctorSize, depth3); } } |
GetRectangleは穴の深さから穴を描画する矩形を取得する関数です。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
class Hole { public GetRectangle() { if (this.Depth == 1) return this.HoleRectangle1; else if (this.Depth == 2) return this.HoleRectangle2; else if (this.Depth >= 3) return this.HoleRectangle3; else return null; } } |
AdditionalPointsクラス
次に加算される点数を描画するためのAdditionalPointsクラスを示します。
敵を倒したらコンストラクタの引数にその座標を渡します。すると描画するための適切な座標に変換されます。表示するのは60フレームです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
class AdditionalPoints { Point: Point; str = ""; Life = 60; constructor(score: number, point: Point) { this.Point = GameManager.GetPointForShow(point.X, point.Y); this.str = score.toString(); } Draw(con: CanvasRenderingContext2D) { if (this.Life > 0) { con.font = "24pt ＭＳ ゴシック"; con.fillStyle = "white"; con.fillText(this.str, this.Point.X, this.Point.Y, 200); this.Life--; } } } |
完成させる
あとはこれまでに作成したクラスを使ってプログラムを完成させます。
方向キーが押されたらGameManager.XXXKeyDownフラグをセットして離されたらクリアします。あとはgameManager.Update()関数によってオブジェクトの移動の処理がおこなわれ、gameManager.Draw()によって描画されます。
|
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 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
let can: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById('canvas'); let con: CanvasRenderingContext2D = can.getContext("2d"); let gameManager = new GameManager(); Main(); function Main() { can.width = 500; can.height = 550; setInterval(Update, 1000 / 60); document.onkeydown = OnkeyDown; document.onkeyup = OnkeyUp; } function GetHTMLImageElement(path: string): HTMLImageElement { let img: HTMLImageElement = new Image(); img.src = path; return img; } function Update() { // ゲームが中断されているときは更新処理をしない if (gameManager.IsGameStop) return; gameManager.Update(); Draw(); } function Draw() { con.fillStyle = "black"; con.fillRect(0, 0, can.width, can.height); gameManager.Draw(); } function OnkeyDown(e: KeyboardEvent) { if (e.keyCode == 37) // 左 GameManager.LeftKeyDown = true; if (e.keyCode == 38) // 上 GameManager.UpKeyDown = true; if (e.keyCode == 39) // 右 GameManager.RightKeyDown = true; if (e.keyCode == 40) // 下 GameManager.DownKeyDown = true; if (e.keyCode == 90) // Z Key GameManager.Player.DigHole(); if (e.keyCode == 88) // X Key GameManager.Player.FillHole(); if (e.keyCode == 83) // S key gameManager.Retry(); if (e.keyCode >= 37 && e.keyCode <= 40) // なにもしない event.preventDefault(); } function OnkeyUp(e: KeyboardEvent) { if (e.keyCode == 37) GameManager.LeftKeyDown = false; if (e.keyCode == 38) GameManager.UpKeyDown = false; if (e.keyCode == 39) GameManager.RightKeyDown = false; if (e.keyCode == 40) GameManager.DownKeyDown = false; } |
