スコアを表示しよう

ゲームのスコアを表示してみましょう。
今回は、時間が経てば経つほどスコアがアップする仕組みにしたいと思います。

スコアを保持するための変数 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関数を指定できるようになるため、コースが正常に生成されるようになります。

コースが正常に生成

次回のレッスンではコースアウトの判定を実装し、ゲームとして仕上げていきます!

オンライン相談

つまづいたときは

レーシングゲーム
レッスン一覧

はじめに

コース一覧

ゲーム開発コース

数学コース

アートコース

入門コース

このサイトについて


© 2022 ルートアイ All rights reserved.