ブラウザゲームを作ってみよう(その9:サンプルゲーム作成その2)

# はじめに
[その8](https://qiita.com/noji505/items/1d8a5be6c09a7344fc79)ではゲームのシーン遷移処理を行いました。
今回はゲームのメイン部分を作ってみたいと思います。

# サンプルゲームイメージ
![img01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/740996/52e84473-de95-fc9e-4bec-faf245e81fac.png)


前回も載せましたがイメージし易いと思うので再度載せています。
ここからゲームを作成するのに必要な処理を一つずつ考えていきます。

必要な処理は概ね以下のようになるかと思います。
| No | 処理内容 | 説明 | 参考 |
|:-:|:--|:--|:--|
| 1 | 雲を表示 | 雲の画像を表示する | [その6:画像表示](https://qiita.com/noji505/items/3679c0e86bb0e1b1d413)
| 2 | 雲を操作 | 左右キーで雲を移動する | [その3:キー入力](https://qiita.com/noji505/items/44d87dfe4404551b9268)
| 3 | コイン表示 | コインの画像を表示する | [その6:画像表示](https://qiita.com/noji505/items/3679c0e86bb0e1b1d413)
| 4 | コイン移動 | コインが画面上から下に向かって移動する | -
| 5 | 雲とコインの当たり判定 | 雲とコインが当たったらスコアを加算 | [その7:当たり判定](https://qiita.com/noji505/items/df0e7e8589a0b8ed9206)
| 6 | 雲と壁との当たり判定 | 雲が壁に当たったら止める | [その7:当たり判定](https://qiita.com/noji505/items/df0e7e8589a0b8ed9206)
| 7 | コイン画面外判定 | コインが画面外へ落ちたらライフを減らす | [その7:当たり判定](https://qiita.com/noji505/items/df0e7e8589a0b8ed9206)
| 8 | スコア表示 | スコアを表示する | [その2:文字表示](https://qiita.com/noji505/items/)
| 9 | ライフ表示 | ライフの画像を表示する | [その6:画像表示](https://qiita.com/noji505/items/3679c0e86bb0e1b1d413)
| 10 | ゲームオーバー判定 | ライフが無くなったらゲームを終了する | [その8:シーン遷移](https://qiita.com/noji505/items/1d8a5be6c09a7344fc79)

以下がそれぞれのソースコードとなります。

```javascript:1.雲表示、2.雲操作、6.雲と壁との当たり判定
    // 1.カーソルキー入力で雲移動
    if( (keyPress & KEY_LEFT) != 0 ){   // 左キーが押されたので移動と左側の壁判定を実施
        kumoX -= 5;
        if( kumoX < 0 ){    // 壁判定
            kumoX = 0;
        }
    }

    if( (keyPress & KEY_RIGHT) != 0 ){  // 右キーが押されたので移動と右側の壁判定を実施
        kumoX += 5;
        if( kumoX >= SC_W - KUMO_WIDTH ){    // 壁判定
            kumoX = SC_W - KUMO_WIDTH;
        }
    }

    // 2.雲表示
    drawImage( img[0], kumoX, kumoY );

```

1.キー入力による移動と左右の壁判定を行う
2.雲を表示する

```javascript:3.コイン表示、4.コイン移動、5.雲とコインの当たり判定、7.コイン画面外判定

    // 1.コイン出現処理
    coinShowCount++;
    if( coinShowCount >= coinShowTimer ){
        for( var i=0; i<coinX.length; i++ ){
            if( !isCoinShow[i] ){
                coinX[i] = getRand( 0, SC_W-COIN_WIDTH );
                coinY[i] = -16;
                isCoinShow[i] = true;
                break;
            }
        }
        coinShowCount = 0;
    }

    // コイン処理
    for( var i=0; i<coinX.length; i++ ){
        if( isCoinShow[i] ){
            coinY[i] += 5;                              // 2.コイン移動
            drawImage( img[1], coinX[i], coinY[i] );    // 3.コイン表示

            // 4.雲との当たり判定チェック
            if( hitCheck(kumoX, kumoY, KUMO_WIDTH, KUMO_HEIGHT, coinX[i], coinY[i], COIN_WIDTH, COIN_HEIGHT) ){
                isCoinShow[i] = false;
                score++;    // スコア加算
            }
            // 5.画面外判定
            if( coinY[i] >= SC_H ){
                isCoinShow[i] = false;
                life--; // ライフ減少
            }
        }
    }

```

1.タイマーをカウントし、一定時間毎にコインを画面上部に配置、コインの表示フラグをオンにします
2.コイン移動処理
3.コイン表示処理
4.雲との当たり判定チェックし、当たっていたらスコア加算
5.画面の外に出たかチェックし、出ていたらライフ減少


```javascript:8.スコア表示
    // 1.スコア表示
    drawText( "スコア："+score+"", scoreX, scoreY, '#000000', 14, TEXT_NONE );
```

1.スコアをテキストで表示しています

```javascript:9.ライフ表示
    // 1.ライフ表示
    for( var i=0; i<life; i++ ){
        drawImage( img[2], lifeX + LIFE_WIDTH * i, lifeY );
    }
```

1.ライフを表示しています
<font color="Red">※複数表示する必要があるのでfor文で処理しています</font>

```javascript:10.ゲームオーバー判定
    // 1.ライフが0になったらゲーム終了
    if( life <= 0 ){
        resultInit();
    }
```

1.ライフが0になったらゲーム結果画面へ遷移しています

# サンプル

今回のサンプルは下記になります。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="eYydEoM" data-user="noji505" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/noji505/pen/eYydEoM">
  Qiita20_sample01(コインゲット)</a> by nojima (<a href="https://codepen.io/noji505">@noji505</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 最後に
今回で基本的なゲームの流れが実装出来たかなと思います。
ただ遊んでみると、ゲームのメイン部分が単調に感じるかと思います。
(コインの出現タイミングが一定、コインの出現枚数が固定など)

次回はそういった点を改善してみたいと思います。