スコアと勝ち負けを記録する

• « 前のページ
• 次のページ »

ブロックを崩せるのは最高ですが、より素晴らしいものにするためにユーザーが壊した全てのブロックに対してポイントを与え、合計スコアのカウントを更新し続けましょう。

ゲームを通してスコアを見せることができればあとで友達に自慢することができます。スコアを記録する変数が必要です。次の行を自分のJavaScriptの他の変数のあとに追記してください。

var score = 0;

スコア表示を作成し更新するためにdrawScore()関数も必要です。次のコードをcollisionDetection()関数のあとに追加してください。

function drawScore() {
    ctx.font = "16px Arial";
    ctx.fillStyle = "#0095DD";
    ctx.fillText("Score: "+score, 8, 20);
}

文字をキャンバス上に描画するのは図形を描画するのと似ています。フォント定義はCSS出するものとちょうど同じように描きます。大きさとフォントの種類はfont()メソッドで設定できます。それからフォントの色を設定するにはfillStyle()を、キャンバス上に配置される実際の文章を設定するにはfillText()を使用してください。最初のパラメーターは文章自体です。上記のコードは現在のポイントの数を表示します。最後の2つのパラメーターは文章がキャンバス上に置かれる座標です。

ブロックに当たるたびにスコアを与えるには、衝突が検出されるたびにスコア変数を増加させる1行をcollisionDetection()関数に追加します。次のハイライトされた行を自分のコードに追加してください。

function collisionDetection() {
    for(var c=0; c<brickColumnCount; c++) {
        for(var r=0; r<brickRowCount; r++) {
            var b = bricks[c][r];
            if(b.status == 1) {
                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
                    dy = -dy;
                    b.status = 0;
                    score++;
                }
            }
        }
    }
}

draw()関数からdrawScore()を呼び続けることで新しいフレームごとにスコアは最新の状態に保たれます。次の行をdraw()の中、ちょうどdrawPaddle()の呼び出しの下に追加してください。

drawScore();

ポイントを集め続けるという動作はうまく働きますが、永久に増やし続けることは出来ません。全てのブロックが崩されたらどうなるのでしょうか。何においてもそれこそがゲームの主目標なのですから、得られる全てのポイントが集まったときには勝利を伝えるメッセージを表示すべきです。次のハイライトされた部分を自分のcollisionDetection()関数に追記してください。

function collisionDetection() {
    for(var c=0; c<brickColumnCount; c++) {
        for(var r=0; r<brickRowCount; r++) {
            var b = bricks[c][r];
            if(b.status == 1) {
                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
                    dy = -dy;
                    b.status = 0;
                    score++;
                    if(score == brickRowCount*brickColumnCount) {
                        alert("YOU WIN, CONGRATULATIONS!");
                        document.location.reload();
                    }
                }
            }
        }
    }
}

これのおかげで、全てのブロックが崩されたときにユーザーは実際にゲームに勝つことができます。ゲームにおいてはこれは非常に重要です。アラートのボタンがクリックされたらdocument.location.reload()関数はページを再読込しゲームをもう一度始めます。

自分のものと比べたいときのために最新のコードをいかに示します。このように見え、そして動くはずです。

この時点でもこのゲームはかなりよく見えます。次のレッスンではマウス操作を追加することでゲームの魅力を広げます。

• « 前のページ
• 次のページ »