【旧】命名：メガホンDEポン(完成形)

2020/07/26

プログラミングブログ / プログラミング解説プログラミング初心者向け・入門編・基礎編

/ 絵が動くゲームを作ってみようプログラミング初心者向け・入門編・基礎編

/ 【完成形】メガホンDEポン

/ (本記事)

こちらは、背景を作る部分は有用な可能性がありますが、古い記事です。「メガホンDEポン(完成形)」はこの記事に、改めてまとめていますのでご参照ください。
　基本的なプログラミングから始めて、ゲーム用の技術として紹介したいもの積み上げていきながらなんとなく作り上げたミニゲームですが、形にはなったのでこれを完成としてメガホンDEポンと名付けることにしました！

完成形

　以下がメガホンDEポンの完成形です！

苦労したのは意外にも…

　完成形を作るにあたり、このゲームに関連する記事にカテゴリ付けをしたいと思い、そこにちょっとだけですが苦労しました。
　ここの自作ブログではカテゴリがひとつしか設定できなかったので、ブログシステムを改修してカテゴリ設定を複数できるようにしました。現在は2つまで対応しています。あとは数を増やすだけなので3つ以上も簡単にいけます。
　プログラミングって1つと2つは大きな違いですが、きちんと作れば2つと3つ以上は大差ないことが多いのですよね。実は結構ちゃんと作っていたつもりで1つ→2つもそこまで大変じゃないだろうと思っていたのですが、意外にも苦労しました。でも今度こそちゃんと作ったので3つが必要なときがきても大丈夫…たぶん！

背景について

　今回のゲーム画面の背景はSVGという、テキストで書けるグラフィックフォーマットで作りました。ランダムに数多く動かすために一部テキストはPythonというプログラミング言語で書き出したものを貼り付けました。パッと作ったものですがせっかくなのでそのPythonプログラムを載せておきます。参考に…なるのかな。

########################################################################
# imports
########################################################################
import random
import math
########################################################################
# for uniionBgStars.svg
########################################################################
for i in range(100):
	theta = random.random() * math.pi * 2
	r = 1024
	x = r * math.cos(theta)
	y = r * math.sin(theta)
	t = 2 + random.random()*2
	cr = 1 + (i % 3) % 2
	print( '    <circle r="%d"><animateMotion dur="%fs" repeatCount="indefinite" path="M0,0 L%d,%d" /></circle>' % ( cr , t , x , y ) )

　ざっくり説明しますと、開始地点は原点として、角度をランダム決めてその方向に、固定距離で目的地を設定します。そして目的地までの到達時間をランダムにすると、速度がバラバラになります。また到達後に繰り返すようにすると、時間がバラバラなため次の開始タイミングもバラバラになるのでランダム性が増す形になります。これで、速さと方向がランダムな直線移動する星のようなものが中央からぶわあっと出る感じになります。
　なおこのプログラムはSVGに貼り付けるための必要最小限のテキストを出力するだけです。 SVG側では中央に黒いマスクを置くなどの工夫しています。詳しくは画像ファイルのソースをご確認ください。

まとめ

　メガホンDEポンの完成形の紹介でした。
　とは言えまだ紹介したい技術はまだあります。このゲームのメガホンとボールの当たり判定、および当たった後の跳ね返りについては少なくとも紹介したいと思います。ひと通り紹介し終わったら、最後にまとめを出して一旦このゲーム関連は完了…かなあ。
　今回はいきあたりばったりで作りましたけれど、先に完成形を作ってから切り出して解説した方が良さそうな気がするので、次があればそうしてみようかと、今のところは考えています。

補足

本記事に記載のプログラムソースコードは、悪意のない範囲で自由に使用・改変していただいて問題ありません。ただし、ご自身の判断と責任でお願いします。
今回ゲームの実装に使用しているプログラミング言語はWeb業界で一般的に使われる「JavaScript」です。
Pythonプログラムの r = 1024 の行は for ループの上に置いた方が実行効率が高いですが、今回は見やすさ優先で。
画像内のラスタライズ文字フォントにOpen Font LicenseのNoto Sans Japaneseを使用しております。
※各社の登録商標または商標について「®」「™」等の表記はしておりません。

カテゴリー：

[PR]