AOYAMA Koji's プログラミングブログ - プログラミングを楽しく体験

攻撃が成功したらスコアアップするプログラミング【絵が動くゲームを作ってみよう】初中級者向けプログラミング解説

2020/07/18
攻撃が成功したらスコアアップするプログラミング【絵が動くゲームを作ってみよう】

　在宅勤務になり、無くなった通勤時間分だけ趣味プログラミングする時間を増やして幸せな日々を送っています。 子に「プログラミングしないと○ぬ病気にでもかかってんの？」と聞かれたけど、うーん、否定できん(汗)
　さてさて、本記事では、 「絵が動くゲームを作ってみよう」のいままでの流れを踏襲しつつ、攻撃が成功したらスコアアップして、 ある程度スコアを獲得したらゲームクリアするプログラミングを解説します。
　絵が動くゲームの完成形はこの記事で公開していますので、参考にしてください。

プログラミングブログ記事一覧



[PR]

まずは基本動作を確認


　まずは、本記事の基本動作を確認します。


　「ゲームスタート」を押下して、まずはボールが動くことを確認してみてください。
　ボールはメガホンに当たったら跳ね返り、キャラクターに当たったらゲームオーバーになります。
　キャラクターは移動操作ができます。 ゲームパッド、スワイプ、マウスのドラッグ、 キーボードの[W][A][S][D]、[↑][←][↓][→]が使えます。

スコアップ


　ではまず以下を実装してみます。
g.iScore += 100;

　【実装】を押下して、ゲームスタートしてみてください。 どうでしょうか、メガホンにボールが当たる度に右上のSCOREが100点ずつ増えれば成功です。

右上はスコア表示


　右上の「SCORE:数字」の部分は、数字にg.iScoreの中身を表示します。 g.iScoreはゲームスタート時には0で、値を変更できます。 このように値を保持し変更できるものを変数と呼びます。

+=は変数に加える


　「+=」(プラスイコール)は、左辺の変数に右辺の数値を加える処理です。 つまりこの g.iScore += 100; というプログラムは、変数g.iScoreの中身に100を加える処理になります。
[PR]

ヒットエフェクト


攻撃が成功したらスコアアップするプログラミング【絵が動くゲームを作ってみよう】 　次にヒットエフェクトを表示してみたいと思います。 以下のソースを確認して、【実装】を押下し、ゲームスタートをしてみてください。
g.sHitHtml = "<span style='background:rgba(255,0,0,0.5);'>+100</span>";
g.fHitX = (g.ballHitX + g.fWeaponHitX) / 2.0 - 32.0;
g.fHitY = (g.ballHitY + g.fWeaponHitY) / 2.0 - 16.0;

　どうでしょうか。攻撃が成功した瞬間に「+100」の文字が出れば成功です！

文字表示


　本記事のプログラムでは、変数g.sHitHtmlにhtml文字列を入れると、それを一瞬だけ表示するようになっています。 また座標を ( g.fHitX , g.fHitY ) で指定しています。

htmlで文字を装飾


　このhtml「<span style='background:rgba(255,0,0,0.5);'>+100</span>」は、文字の背景部分を半透明の赤にする指定がされた「+100」です。
　文字の色は、別の場所で白と指定されているので、白い文字の +100 を、赤い半透明の背景で装飾している状態です。

座標指定


　ヒットエフェクトの文字の座標は ( g.fHitX , g.fHitY ) で指定します。 本記事では当たった瞬間のボールの座標が ( g.ballHitX , g.ballHitY ) 、 武器に見立てたメガホンの座標が ( g.fWeaponHitX , g.fWeaponHitY ) に入っているので、 そこから座標を計算しています。

足して割れば中間点


　ヒットエフェクトの座標は、当たった中間点に出そうとしています。
g.fHitX = (g.ballHitX + g.fWeaponHitX) / 2.0;

　「+」が足し算なのは算数/数学と同じです。 「/」(スラッシュ)は割り算を表します。 つまりこの式は、両方の座標を足して2で割ることで、中間の場所を求めています。

微調整は直接計算式に入れる


g.fHitX = (g.ballHitX + g.fWeaponHitX) / 2.0 - 32.0

　この最後にある「-48」で、座標の微調整をしています。 g.sHitHtml が表示される座標は ( g.fHitX , g.fHitY ) で指定できますが、それは左上を指します。 つまり中央に出そうと思った場合は、若干左上にずらしてあげる必要があるます。 ゲームスクリーンに見立てたこの場所の座標系は左上の方が小さいので、XもYも数値を減らすことで左上にずらせます。

ゲームクリア


　最後にゲームクリアです。 以下の実装を試しましょう。
if ( 1000 <= g.iScore ) {
  stopGame();
  alert( "CLEAR!" );
}



ifは条件分岐


　if(イフ)は条件分岐の処理になります。
if ( 条件 ) {
  処理
}

　この形式で記述して、条件が満たされたときに、処理が実行されます。

<=は以下


　ifの条件の中にある「<=」(しょうなりイコール)は、左辺が右辺以下という意味になります。 つまり「1000 <= g.iScore」は、変数 g.iScore が 1000以上のときに条件成立です。

stopGameでゲーム終了処理


　次のstopGame()は本記事専用のゲーム終了処理です。 これをすると、最新状態を表示して、ゲームを完了します。

alertでポップアップ表示


　alertにて、ポップアップのメッセージを表示できます。 ここでは「CLEAR!」と表示してみました。

クリア処理の検証のヒント


　「CLEAR!」の表示を検証しようとすると、このプログラムでは10回攻撃が成功しなければなりませんが、 プログラムの1000の部分を100に変えれば1回で検証できます。
　これはゲーム制作途中ではよくやる手法で、他にも色々とデバッグ用の処理を入れて試します。 これが無いと大きなゲームは、個々の機能の検証に時間がかかりすぎてしまって、事実上制作できないですからね。これは重要です。 ただし、そのデバッグコードを入れたままリリースしないようには注意が必要ですけれど！
[PR]

連動が必要


　本記事で示した通り、例えばスコアアップとヒットエフェクトのプログラムは、まったく別のものです。 プレイヤー視点では当然のように同時に発生するものですが、プログラムは意識して連動させる必要があります。
　連動をうまくしないと、違和感が生じ、プレイヤーさんがゲームを楽しめません。 できるだけ違和感なく、そして気持ちよくプレイしてもらうことは、ゲーム開発において重要な要素のひとつです。

まとめ


　本記事では、攻撃成功時のスコアアップと、ゲームクリアのプログラミングを解説しました。 本記事のプログラムをまとめると以下の通りです。
g.iScore += 100;
g.sHitHtml = "<span style='background:rgba(255,0,0,0.5);'>+100</span>";
g.fHitX = (g.ballHitX + g.fWeaponHitX) / 2.0 - 32.0;
g.fHitY = (g.ballHitY + g.fWeaponHitY) / 2.0 - 16.0;
if ( 1000 <= g.iScore ) {
  stopGame();
  alert( "CLEAR!" );
}

　本記事公開後の補足です。ここに至るまでに苦労した跳ね返す処理をこの記事にしていますので、よろしければ参考にしてください。

補足

  • 今回使用しているプログラミング言語はWeb業界で一般的に使われる「JavaScript」です。
  • 本記事に記載のプログラムソースコードは、悪意のない範囲で自由に使用・改変していただいて問題ありません。ただし、ご自身の判断と責任でお願いします。
  • 画像内のラスタライズ文字フォントにOpen Font LicenseのNoto Sans Japaneseを使用しております。
  • 画像内のラスタライズ文字フォントにOpen Font LicenseのZen Antiqueを使用しております。
  • ※各社の登録商標または商標について「®」「™」等の表記はしておりません。
  • (本記事公開後)本記事公開後に公開された記事へのリンクを追加しております。
  • (本記事公開後)初期に提示していたプログラム記述ギミックを2025年5月にセキュリティー上の都合で閉じました。
  • (本記事公開後)本記事の「実装」方式を変更しました。最終形において個別に処理をフラグ制御する形にしています。
  • (本記事公開後)「連動が必要」セクションを追加。「まとめ」セクションの内容を調整しました。

カテゴリー：絵が動くゲームを作ってみよう,当たり判定
[PR]