AOYAMA Koji's PROGRAMMING BLOG

攻撃が成功したらスコアアップするプログラミング

2020/07/18

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


まずは基本動作を確認


　今回もプログラミングできる場所を用意しました！まずは基本動作を確認してみます。
SCORE:0




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

スコアップ


　白い枠内は、プログラムが書けるようになっています。 本記事ではボールがメガホンに当たったときに、ここに書かれたプログラムが実行されます。 メガホンで攻撃していると心の目で見てください！
　ではまず以下を記載して、ゲームスタートしましょう。 どうでしょうか、メガホンにボールが当たる度に右上のSCOREが100点ずつ増えれば大成功です。
g.score += 100;

右上はスコア表示


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

+=は変数に加える


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

ヒットエフェクト


　次にヒットエフェクトを表示してみたいと思います。 以下のプログラムを記載するかコピーして貼り付けて、ゲームスタートをしてみてください。
g.hitS = "+100";
g.hitX = (g.ballHitX + g.weaponHitX) / 2 - 48;
g.hitY = (g.ballHitY + g.weaponHitY) / 2 - 16;

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

文字表示


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

座標指定


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

足して割れば中間点


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

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

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


g.hitX = (g.ballHitX + g.weaponHitX) / 2 - 48;

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

HTMLでヒットエフェクトを装飾


　いま出ている文字はちょっと見づらいですよね。
　実は g.hitS にはHTMLもかけるので、 g.hitS= の行を以下に変更して試してみましょう。
g.hitS = "<span style='background:rgba(255,0,0,0.5);'>+100</span>";

　これでどうでしょうか。文字の背景部分が赤くなれば成功です！
　ここは詳細説明を省略しますが、rgba(…)の中の数値は色々といじってみると理解が深まると思います！

ゲームクリア


　最後にゲームクリアを処理しましょう。 ヒットエフェクトおよび、変数g.scoreの数値を増やした後に、以下を入れてみてください。
if ( g.score >= 1000 ) {
  stopGame();
  alert( "CLEAR!" );
}

ifは条件分岐


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

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

>=は以上


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

stopGameでゲーム終了処理


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

alertでポップアップ表示


　alertにて、ポップアップのメッセージを表示できます。 ここでは「CLEAR!」と表示してみましたが、好きに変更していただいて大丈夫です。

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


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

まとめ


　攻撃成功時のスコアアップとゲームクリアのプログラミングのお話でした。 プログラムは全部で以下の通り。
g.hitS = "<span style='background:rgba(255,0,0,0.5);'>+100</span>";
g.hitX = (g.ballHitX + g.weaponHitX) / 2 - 32;
g.hitY = (g.ballHitY + g.weaponHitY) / 2 - 16;
g.score += 100;
if ( g.score >= 1000 ) {
  stopGame();
  alert( "CLEAR!" );
}

　これでゲームオーバーまで来たのでいったん区切りかなと思っていたのですが、 今回のプログラムで、メガホンでボールを跳ね返す処理にちょっと苦労したので、 次回はそれを書こうかと思っています。数学になりますが。
　その後は、、、また別の簡単なゲームを作りながら、内容を説明していければよいかな、などと思案中…。

補足

・今回使用しているプログラミング言語はWeb業界で一般的に使われる「JavaScript」です。
・個人的には「g.score>=1000」という書き方はせず「1000<=g.score」と、右が大きい形で不等号を統一することでミスを減らしています。ただし左に変数がある方が単体ではわかりやすいと思うので本記事ではそのわかりやすさを優先しました。 ・画像内のラスタライズ文字フォントにOpen Font LicenseのNoto Sans Japaneseを使用しております。
・画像内のラスタライズ文字フォントにOpen Font LicenseのZen Antiqueを使用しております。

カテゴリー：メガホンDEポン,プログラミング,JavaScript
著者プロフィール
青山公士(あおやま こうじ)
中学2年生からゲームプログラミングに明け暮れる。ゲーム開発者としての代表作に「スーパー桃太郎電鉄II」(ハドソン)メインプログラマー、[PR]『ドラゴンクエストX　オンライン』(スクウェア・エニックス)テクニカルディレクター/プロデューサーなどがある。[PR]「ドラゴンクエストXを支える技術」(技術評論社)著者。本ブログは今までの経験を活かしプログラミングが楽しいと感じる人が少しでも増えるようなものにしたい。 @kojibm
株式会社ロジック推し
推し情報を論理的にわかりやすく紹介することで「世の中をちょっと楽しく」をミッションに活動中。 HP X Instagram
privacy policy
ピックアップ
Loading...
最新記事
Loading...
関連記事
Loading...