メガホンDEポンまとめ【絵が動くゲームを作ってみよう】

2020/08/29

　一連の説明はまとまっていた方が良さそうですので、メガホンDEポンに関連する記事ををまとめました。

完成形

　まずは、再掲になりますが、以下がメガホンDEポンの完成形です。

紹介まとめ

　メガホンDEポンを制作につながるものとして紹介した記事を簡単にまとめます。

ゲームプログラミングっぽく絵を動かしてみる

　ボールの位置を変更することで動いて見えるプログラミングの紹介をしました。 ボールの位置の変更するプログラムを書くことで、実行する度に位置が変更されます。 その結果として、滑らかでは無いものの目の錯覚で動いて見えるボールが体験できます。
→記事を読む

10fpsで絵を動かすプログラミング

　0.1秒ごとに実行されるプログラムを体験できます。 これにより10fpsで動くゲームの処理を体験できます。
　そこにボールの位置を変更するプログラムを書くことで、 滑らかに…と言っても一般的なゲームが30fps以上のところに10fpsですが…動くプログラミングを体験できます。
→記事を読む

ボールを上下左右の壁で跳ね返すプログラミング

　ボールを斜めに動かすプログラムが用意されています。
　そして壁に当たったときに実行される処理の中で、ボールの方向を変更するプログラム書くことで、 跳ね返す処理のプログラミングを体験できます。
→記事を読む

marginを駆使して複数の画像を同一座標系で扱う

　ボールに加えてプレイヤーを表示しようとしたときに、 工夫したCSSの書き方を紹介しています。
→記事を読む

JavaScriptでスワイプ操作の情報を取得するプログラム

　プレイヤーキャラクターをプレイヤーが操作して移動させるための、 ゲームパッドやマウス、キーボードなどの操作情報を取得するプログラムを紹介しています。 JavaScriptを駆使した、やや高度な内容となっています。
→記事を読む

操作に応じてプレイヤーキャラクターを動かすプログラミング

　操作情報が取得できていて、ボールを動かすことができていれば、 プレイヤーキャラクターを動かすのはそこまで難しくありません。
　ここでは実際にそのプログラミングを体験できるようになっています。
→記事を読む

絶対値と2乗の平方根と当たり判定

　複数の物体が衝突しているかどうかを調べる当たり判定の処理を紹介しています。
　ゲームプログラミングでは、いやゲームに限らないかもしれませんが、 プログラム実行をより高速にできるか、プログラム記載をいかに簡単にできるかを考ます。 その一端として、センター試験の問題に登場するような数学を使用して、当たり判定の方法を複数紹介しています。
→記事を読む

円と円の当たり判定と当たった位置

　円と円が当たったときに、その衝突位置を取得するプログラムを紹介しています。 大部分をプログラムで解決する方法に加えて、数学を使う方法も記載しました。
→記事を読む

メガホンに当たったボールを跳ね返す

　当たったと判定されたときにボールを跳ね返す処理を紹介しています。 斜めに当たると処理がややこしいので、空間を回転させて実現しました。
　空間の回転に使用している数学は行列と呼ばれるものです。
→記事を読む

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

　ボールをメガホンで打ったらスコアアップするプログラミングを紹介しました。 実際に記載して体験することができます。 自分なりにアレンジするのも面白いと思います。
→記事を読む

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

　これで最後。完成形の紹介記事です！
→記事を読む

補足

・使用しているプログラミング言語は主に、Web業界で一般的に使用されているJavaScriptです。
・画像内のラスタライズ文字フォントにOpen Font LicenseのNoto Sans Japaneseを使用しております。
・画像内のラスタライズ文字フォントにOpen Font LicenseのZen Antiqueを使用しております。

カテゴリー：絵が動くゲームを作ってみよう,Webアプリケーション