スコアを表示しよう
ゲームのスコアを表示してみましょう。
今回は、時間が経てば経つほどスコアがアップする仕組みにしたいと思います。
スコアを保持するための変数 score
を定義しましょう。
エディタの一番上に、以下のコードを追加してください。
let score = 0;
スタート画面の時点ではスコアは0です。
ゲーム開始時からスコアをアップさせたいので、 updateGame
関数を次のように変更しましょう。
function updateGame() { if (gameState === "start") { return; } updateRoads(); score++; }
score++
の ++
は、score
を1増やすという意味になります。
これで、ゲーム開始時からスコアがどんどんアップするようになります。
次に、スコアを画面上に表示しましょう。
drawGame
関数の部分を、次のように変更してください。
function drawGame() { background(0); drawRoads(); drawPlayer(); drawScore(); if (gameState === "start") { drawStart(); } } function drawScore(){ fill(255, 0, 0); textSize(15); text(score, 320, 30); }
新しい関数 drawScore
を定義し、 drawGame
関数から呼び出しています。
drawScore
関数では、変数 score
の値を画面右上に表示しています。
ゲームを実行してみましょう。
スコアが画面右上に表示されていると思います!
さて、コースの生成が少し変なままですね。
updateRoads
関数で、四角形のX座標を指定している部分を、
roads[i].x = 200 + 100 * sin(frameCount * 0.01);
次のように変更してください。
roads[i].x = 200 + 100 * sin(score * 0.01);
frameCount
ではなく score
を使うことで、ゲーム開始時から変化する数値でsin関数を指定できるようになるため、コースが正常に生成されるようになります。
次回のレッスンではコースアウトの判定を実装し、ゲームとして仕上げていきます!