辰年ということで、胴体の長いキャラを動かすものを作ってみた。 pic.twitter.com/SgLK0PG32Q— toburau (@toburau) 2024年5月22日 JavaScriptで作成したミニゲーム、当初考えていた部分が実装できたので、完成とした。 今年は辰年ということで、細長い胴体の…

一通りのシーケンスが入ったので、テストのために書いたコードや、使っていないコードを削除して、整頓。 そして、テストプレイを繰り返したが、やっぱり難しいので、もっと簡単に調整しないと。

ゲームオーバーからリスタートするときの処理が間違っていたのを修正。 さらにプレイしていて、当たり判定が厳しくて難しいので、プレイヤーの当たり判定を一回り小さくしてみた。

ステージの障害物のコリジョン判定も実装できたので、実験用のコードや未使用部分を削除して整頓。 タイトル画面、ゲームプレイ、ゲームオーバーを実装。 ゲームとして難しいのですぐゲームオーバーになってしまうので、もうちょっと調整しないと。

障害物の当たり判定を実装。 矩形のデータを中心座標、幅と高さで持っていたのだが、描画の場合は左上の座標、幅と高さとなっていて、これは合わせておくべきだった。 当たり判定で座標変換が必要になり、ちょっと手間取ってしまった。

障害物の配置を修正。 いわゆる printf デバッグをして、バグの原因が分かった。 考え方自体は間違っていなかったけど、計算の基準となる位置がずれていた。 まだ当たり判定は入っていないけど、仮にプレイしてみたら、思った以上に避けるのが難しい。 改め…

ステージの障害物を複数出現するように変更。 同じサイズでは面白くないので、ランダムで変えるようにしてみた。 しかし、そうするとなぜが出現位置が期待通りにならなくなってしまった。 どこかで位置計算が間違っているのだろうけど、なかなか原因が分から…

やっとステージ上の障害物を1つ描画することが出来た。 本来ならゲームをだんだん難しくするために障害物の大きさや個数などをプレイ時間に応じて変化させたいところだが、とりあえずそこまでは考えずに、まずは描画から。 ただまだプレイヤーとの当たり判定…

ステージの障害物を構造体のように使いたいと思い、JavaScriptのオブジェクトで作っていたけど、 メソッドを追加していくうちに、これはクラスのほうが良いかなと思い、クラスに書き換えてみた。 すぐに書き換えられると思ったら、意外と書き直さなくてはい…

ステージ上の障害物を作成。 障害物をオブジェクトとして定義して、配列に登録。ステージの描画のとき、その障害物を描画して、プレイヤーとの当たり判定を取る。 と、やりたいことは分かっているけど、JavaScript での書き方が分からず、調べながら書いてい…

ステージのコリジョンを実装。 天井と床に当たり判定を付け、プレイヤーがヒットすることを確認。 また、当たり判定の範囲を矩形で描画するようにしたので、どこにコリジョンがあるのかも分かりやすくなった。

当たり判定の処理をどう書こうかとJavaScriptでの値の渡し方や返し方をChat GPTに聞いていたら、 挙げてくれたサンプルコードでJavaScriptでは配列を返せることを知った。 もしかすると忘れていただけかもしれないが。 実際にChat GPTが出してくれたサンプル…

今までは当たり判定を点と矩形で行っていたのだが、それを矩形と矩形同士の当たり判定に変更。 実装後、チェックで正しく判定出来ていないと思ったら、判定自体は正しかったけど、 デバッグ用に表示していた当たり判定の矩形の描画座標がずれていただけだっ…

ステージを作成中。 とりあえず、外周部分の実装。 さらにプレイヤーとの当たり判定をどうするかで悩み中。

k-ichikawa.blog.enjoy.jp サンプルのコードを見ていて、色の指定に white とか red とか書かれているのを見て、このライブラリ用の定義かと思っていたら、Javascript で用意されていものだった。 一覧を見てみたら、思った以上に多くて140色用意されていた…

プレイヤーの動きばかり考えていて、ステージをどうするか、ぼんやりとしてしか考えていなかった。 とりあえず、矩形を並べてみようとしたら、思ったように綺麗に並ばない。 そもそも、縦横どのくらいのサイズにするかも考えていなかった。 ということで、ま…

Javascriptで名前空間を使ってプレイヤークラスとステージクラスを作成するようにした。 実際のコードは次のような感じ。myGame という名前空間を作成し、そこにプレイヤーとステージのクラスを定義した。 とりあえず、これで定義名が被らずに実行できるよう…

ステージの作成開始。 インスタンス名を bg にしようとしたらエラー。すでにライブラリで使われていた。 ということで、今度は stage に変えたら、またエラー。こちらも使われていた。 ここは、ちゃんと名前空間を設定しないと。 ということで、JavaScript …

プレイヤーのコリジョンを実装。 描画部分を一部変更して、コリジョン用のデータを用意するようにした。 これで思ったよりも簡単に実装できた。 チェックしてみて正しく動作していそう。

プレイヤーのコリジョンの実装を開始。 単純に円や矩形で判定できる形状ではないので、描画と同じく、これまたやっかい。 コリジョンを可視化するデバッグ機能も準備したほうが良さそうだ。

プレイヤーの動きをやっと想定したとおりに実装出来た。 まずはパラメータを一番シンプルな状態にして、コードのいろいろなところにログ出力を入れて、1ステップずつ確認しながら修正していった。 考え方は間違っていなかったけど、ループ回数やインデックス…

引き続き、プレイヤーの移動とそれに合わせた表示。 期待通りに動いたと思ったら、ときどき、ちらつくのが見えた。1ステップずつ動かしてみたところ、表示が消える場合があり、それがちらつく原因だった。 やっぱりまだどこかで座標計算などでミスっているよ…

プレイヤーの表示の仕組みをちょっと作り直し中。 デバッグ中、値の変化を知りたくなったので、いわゆる printf デバッグをしようと、JavaScript でのコンソール出力って何だっけと検索したところ、console.log が出てきた。 で、その検索結果が表示されたと…

プレイヤーの動きの部分の実装中。 座標計算の部分は出来たけれども描画するところで苦戦中。 使っている描画のメソッドには優先度の設定が無いようで、後ろから手前の順番で描画しなくてはならない。 開発環境にまだ慣れていないということもあって、なかな…

プレイヤーの挙動のアルゴリズムを変更中。 しかし、Javascriptの開発環境に慣れていないので苦戦中。 いつも使っているC++でVisual Studioなら、デバッガの使い方にも慣れているので、自分の知りたい情報がすぐに分かる。 今はVisual Studio Codeで開発して…

プレイヤーの動きのアルゴリズムを思いついたので実装中。 リストかキューを使えば簡単に実装できるかなと思ったら、JavaScriptにはリストやキューが無かった。なので、Arrayを使って実装することに。 意外とSTLのものを使うようになっていたんだなと実感。

プレイヤーの動きの実装。 これでいけると思ったアルゴリズムを実装してみたら、うまくいかないことが判明。また作り直さねば。 JavaScriptで書いているとついメンバ変数でthisを付けるのを忘れてエラーになってしまう。ビルドするわけでないから実行してみ…

プレイヤーをキー入力で移動できるようにした。 前回のテストコードを書き直して、ちゃんとキャラクターサイズや移動スピードといったパラメータも変更しやすくした。 使っているライブラリではスマホ対応でタッチ操作も取得できるようになっているが、今回…

プレイヤークラスを作成。 JavaScriptでクラスを書くのはほぼ初めてなので、検索しながら書いてみた。 C++と違うところはあるけれど、そんなに違和感無く書けそうな感じ。 とりあえず、キャラを矩形で出して動かしてみたところ。

サンプルコードを変更して、メインループを作成。 タイトル、ゲームメイン、ゲームオーバーのシーケンスを用意。 まだ素材も用意していないので、表示しているのはテキストだけ。 Visual Studio Code での GitHub 連携も問題なく出来ている。 まずはプレイヤ…