はじめに
その8ではゲームのシーン遷移処理を行いました。
今回はゲームのメイン部分を作ってみたいと思います。
サンプルゲームイメージ
前回も載せましたがイメージし易いと思うので再度載せています。
ここからゲームを作成するのに必要な処理を一つずつ考えていきます。
必要な処理は概ね以下のようになるかと思います。
| No | 処理内容 | 説明 | 参考 |
|---|---|---|---|
| 1 | 雲を表示 | 雲の画像を表示する | その6:画像表示 |
| 2 | 雲を操作 | 左右キーで雲を移動する | その3:キー入力 |
| 3 | コイン表示 | コインの画像を表示する | その6:画像表示 |
| 4 | コイン移動 | コインが画面上から下に向かって移動する | - |
| 5 | 雲とコインの当たり判定 | 雲とコインが当たったらスコアを加算 | その7:当たり判定 |
| 6 | 雲と壁との当たり判定 | 雲が壁に当たったら止める | その7:当たり判定 |
| 7 | コイン画面外判定 | コインが画面外へ落ちたらライフを減らす | その7:当たり判定 |
| 8 | スコア表示 | スコアを表示する | その2:文字表示 |
| 9 | ライフ表示 | ライフの画像を表示する | その6:画像表示 |
| 10 | ゲームオーバー判定 | ライフが無くなったらゲームを終了する | その8:シーン遷移 |
以下がそれぞれのソースコードとなります。
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.雲を表示する
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.画面の外に出たかチェックし、出ていたらライフ減少
8.スコア表示
// 1.スコア表示
drawText( "スコア："+score+"", scoreX, scoreY, '#000000', 14, TEXT_NONE );
1.スコアをテキストで表示しています
9.ライフ表示
// 1.ライフ表示
for( var i=0; i<life; i++ ){
drawImage( img[2], lifeX + LIFE_WIDTH * i, lifeY );
}
1.ライフを表示しています
※複数表示する必要があるのでfor文で処理しています
10.ゲームオーバー判定
// 1.ライフが0になったらゲーム終了
if( life <= 0 ){
resultInit();
}
1.ライフが0になったらゲーム結果画面へ遷移しています
サンプル
今回のサンプルは下記になります。
See the Pen Qiita20_sample01(コインゲット) by nojima (@noji505) on CodePen.
最後に
今回で基本的なゲームの流れが実装出来たかなと思います。
ただ遊んでみると、ゲームのメイン部分が単調に感じるかと思います。
(コインの出現タイミングが一定、コインの出現枚数が固定など)
次回はそういった点を改善してみたいと思います。