スマホでも動く無限横スクロールアクションのブラウザゲームを作る：enchant.jsでHTML5＋JavaScriptゲーム開発入門（終）（3/5 ページ）

[佐藤浩昭, 大関隆介，ゆめみ]

【Step6】スコア（走った距離）を取得／表示

　このゲームは、走った距離がそのままスコアとなります。ゲームは常に進行していますので、単純にスクロールした距離を記録するだけで良いでしょう。

　スコア用の変数を用意し、毎フレームイベントに加算する処理を追加します。ついでに、画面の左上にスコア用のラベルも配置しておきましょう（ゲーム画面を示す仮のラベルは削除します）。

var createGameScene = function() {
    
    var scroll = 0; // スクロール量を記録する変数
    …省略（この間に背景をaddChild）…
    // スコア表示用ラベルの設定
    var scoreLabel = new Label("");            // ラベルを作る
    scoreLabel.color = '#fff';                 // 白色に設定
    scene.addChild(scoreLabel);                // シーンに追加
    // コメントアウトまたは削除
    // 説明ラベル設定 ゲーム実装時は消します
    // var info = new Label('ゲーム画面(仮)');    // ラベルを作る
    // info.x = 0;                                // 横位置調整
   // info.y = 0;                                // 縦位置調整
    // scene.addChild(info);                      // シーンに追加
…省略…
    // 毎フレームイベントをシーンに追加
    scene.addEventListener(Event.ENTER_FRAME, function(){
scroll += SCROLL_SPEED;                       // 走った距離を記録
scoreLabel.text = scroll.toString()+'?走破'; // スコア表示を更新
       …省略…
    )};
    …

ゲームシーン - スコア用ラベルの追加

　これで、スコアが左上に表示されるようになりました。

• 実行結果
• プログラム

【Step7】障害物を配置する

　いよいよゲームらしくなってきました。もう一息です。次は障害物を配置していきましょう。

　今回は障害物として、ハードル、いがぐり、鳥の画像を用意しました。鳥だけは羽ばたくアニメーション用に横長の画像になっています。

障害物：左からハードル、いがぐり、鳥

　これらの障害物は、1つ1つ丁寧に配置していく方式と、プログラムで自動的に配置する方式があります。今回は後者の「プログラムで自動的に配置する方式」を採用しています。

　以下のプログラムはハードルを一定間隔に配置しているプログラムです。出現前のハードルは画面外の見えない位置に隠しておき、一定距離進んだタイミングで右側に出現させます。そして、背景と同じ速度でくまに向かってスクロールさせ、やがて画面左側に見えなくなると、再び隠れている状態に戻ります。

game_.preload('./img/start.png', './img/gameover.png','./img/retry_button.png', './img/chara1.png', './img/bg1.png', './img/bg2.png', './img/hurdle.png', './img/igaguri.png', './img/bird.png'); // ゲームに使う素材をあらかじめロードしておきます

7行目 - 障害物の画像のURLを追加

var createGameScene = function() {
    
    …省略（この間に背景をaddChild）…
    // ハードルの設定
    var hurdle = new Sprite(50, 100);          // スプライトを作る
    hurdle.image = game_.assets['./img/hurdle.png']; // 画像を設定
    hurdle.x = -hurdle.width;                  // 横位置調整 画面外に隠しておく
    hurdle.y = GROUND_LINE - hurdle.height;    // 縦位置調整 ハードルの下端を地面の高さと合わせる
    scene.addChild(hurdle);                    // シーンに追加                       // シーンにハードルを追加します
…省略…
    // 毎フレームイベントをシーンに追加
    scene.addEventListener(Event.ENTER_FRAME, function(){
scroll += SCROLL_SPEED;                  // 走った距離を記録
scoreLabel.text = scroll.toString()+'?走破'; // スコア表示を更新
// 障害物の出現タイミングの設定
// 数字1 % 数字2 と書くと、数字1を数字2で割った余り（余剰）を得ることができます。
// すなわち、scrollを640で割った余りは、scrollが640, 1280, 1920, … …に達したときに0になります。
if (scroll % 640 === 0) {              // 640m走るごとに
hurdle.x = 320;                    // ハードルを右端に移動(出現)
}
// ハードルのスクロールの設定
if (hurdle.x > -hurdle.width) { // ハードルが出現している(画面内にある)とき
hurdle.x -= SCROLL_SPEED;   // ハードルをスクロール
}
        …省略…
    )};
    …

ゲームシーン - ハードルを一定間隔で出現させる

　さらに、全く同じ理屈でいがぐりと鳥も配置します。これらの出現タイミングを大きくずらすことで、複数の障害物をばらばらにシーンに配置しているように見せることができます。

　なお、鳥だけは配置されているだけではなく、こちらに飛んできているように見せるため、スクロールの速さを通常の1.2倍に、さらに羽ばたくアニメーションを追加しています。

var createGameScene = function() {
    
    …省略（この間に背景をaddChild）…
// ハードルの設定
var hurdle = new Sprite(50, 100);          // スプライトを作る
hurdle.image = game_.assets['./img/hurdle.png']; // 画像を設定
hurdle.x = -hurdle.width;                  // 横位置調整 画面外に隠しておく
hurdle.y = GROUND_LINE - hurdle.height;    // 縦位置調整 ハードルの下端を地面の高さと合わせる
scene.addChild(hurdle);                    // シーンに追加
// いがぐりの設定
var igaguri = new Sprite(42, 31);          // スプライトを作る
igaguri.image = game_.assets['./img/igaguri.png']; // 画像を設定
igaguri.x = -igaguri.width;                // 横位置調整 画面外に隠しておく
igaguri.y = GROUND_LINE - igaguri.height;  // 縦位置調整 いがぐり下端を地面の高さと合わせる
scene.addChild(igaguri);                   // シーンに追加
// 鳥の設定
var bird = new Sprite(64, 44);             // スプライトを作る
bird.image = game_.assets['./img/bird.png']; // 画像を設定
bird.x = -bird.width;                      // 鳥を左側の画面外に隠します
bird.y = 120;                              // 鳥の飛ぶ高さを設定します
scene.addChild(bird);                      // シーンに鳥を追加します
…省略…
    // 毎フレームイベントをシーンに追加
    scene.addEventListener(Event.ENTER_FRAME, function(){
scroll += SCROLL_SPEED;                  // 走った距離を記録
scoreLabel.text = scroll.toString()+'?走破'; // スコア表示を更新
// 障害物の出現タイミング
// 数字1 % 数字2 と書くと、数字1を数字2で割った余り（余剰）を得ることができます。
// すなわち、scrollを640で割った余りは、scrollが640, 1280, 1920, …… に達したときに0になります。
if (scroll % 640 === 0) {        // 640m走るごとに
hurdle.x = 320;              // ハードルを右端に出現させます
}
if (scroll % 560 === 0) { // 560m走るごとに
  igaguri.x = 320;             // いがぐりを右端に出現させます
}
if (scroll % 3000 === 0) {// 3000m走るごとに
    bird.x = 320;                // 鳥を右端に出現させます
}
// 障害物のスクロールの設定
if (hurdle.x > -hurdle.width) {       // ハードルが出現している（画面内にある）とき
hurdle.x -= SCROLL_SPEED;         // ハードルをスクロール
}
if (igaguri.x > -igaguri.width) {     // いがぐりが出現している（画面内にある）とき
igaguri.x -= SCROLL_SPEED;        // いがぐりをスクロール
}
if (bird.x > -bird.width) {           // 鳥が出現している（画面内にある）とき
bird.x -= SCROLL_SPEED * 1.2;     // 鳥を1.2倍速でスクロール
 if (bird.frame > 0) {             // 鳥のフレーム番号を0, 1, 0, 1と切り替えて羽ばたかせる
        bird.frame = 0;
     } else {
        bird.frame = 1;
    }
}
        …省略…
    )};
    …

ゲームシーン - 複数の障害物をそれぞれの間隔で表示させる

　ここまでの実行結果は次のようになります。

• 実行結果
• プログラム

　次のページでは、アクションゲームのキモである「当たり判定」について解説します。