Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

pixi.jsでゲーム終了画面を実装する

せっかくゲームを作るわけですから、ゴールしたら何か表示したいですよね。
これは内部にフラグ……というか

実際のところ

ゲームが終了したら、文字を出すだけの簡単処理を考えます。

var stage  = new Container()
var gameScene, gameOverScene
var state; //ゲームの状態を保存

function setup() {
  // 内容

  // 構造を突っ込む
  gameScene.addChild(tiger)  
 
  // 状態を設定。抜けたらすぐgameloopのため
  status = play

  gameLoop() 
}

function gameLoop() {                                                                     
    //1fps毎に呼び出し                                                                    
    requestAnimationFrame(gameLoop)                                                       
    state();                                                                              
    renderer.render(stage)                                                                
}

function play() {
  // ゲームの処理。
  // キャラの移動だとか、ダメージ計算だとか

  if (終了条件) {  state = end; } 
}

終了関数はこんな感じにしました。
通常のゲームで使う諸々(キャラとか障害物とかスコアとか)を格納したgameSceneを無効化し、
その後にゲーム終了画面をレンダリングする形です。

function end() {                                                                          
    gameScene.visible     = false                                                         
    var gameOverScene = new Container()                                                   
    stage.addChild(gameOverScene)                                                         
    message = new Text(                                                                   
        "The End!",                                                                       
        {font: "64px Futura", fill: "white"}                                              
    )                                                                                     
    message.x = stage.width  / 2 - 64                                                     
    message.y = stage.height / 2 - 32                                                     
    gameOverScene.addChild(message)                                                       
} 

ちゃんとやると、画面の中央あたりに「The End!」と表示されるはずです。