Javascriptでｐｋ戦のゲームを作成しています。 今の状況は、ルール的な仕様は完成しており、次

Javascriptでｐｋ戦のゲームを作成しています。

今の状況は、ルール的な仕様は完成しており、次は画像などをcanvasタグを用いて使って、動きのあるゲームに発展させようと考えています。

お聞きしたいことは
・おすすめのWEBサイト
・取り組む上での注意
・おすすめのコード（～タグ使うといいよなど）
・その他アドバイス

です。現在の画像のほうを添付しますので、詳しい方、どうぞよろしくお願いします。

ソースコードは文字数制限で載せることができませんでした、すいません。

No.2 回答者： fujillin 回答日時： 2021/07/03 14:52

こんにちは

＞動きのあるゲームに発展させようと考えています。
全体的な「動き」のイメージをどの程度のものとしてお考えなのかわかりませんけれど、勝手な想像では動く要素はさほど多くない（ボールとキーパーくらいか？）ように思われますので、HTMLでもcanvasでも実現できそうな気がします。
実際の表現をどのようにするのかにもよりますけれど・・・

HTML要素の場合、単純なアニメーションならCSSだけでも実現できるので、スクリプトは簡単になります。（トリガー程度で済むかも）
仮に、スクリプトでアニメーションを制御するにしても、APIを利用すれば大分手間は省けると思われます。
（もちろん、スクリプトで全部を制御することも可能です）
canvasの場合は、基本的に描き加えてゆく（あるいは一旦消して描く）ことになるので、「動き」のほぼ全てをスクリプトで制御することになります。

以下、ご参考までに。（すでにご存じでしたら、ごめんなさい）
◇CSS アニメーションの使用
https://developer.mozilla.org/ja/docs/Web/CSS/CS …

◇Web Animation API
https://developer.mozilla.org/ja/docs/Web/API/We …

◇Basic animations（canvas)
https://developer.mozilla.org/ja/docs/Web/API/Ca …
◇高度なアニメーション（canvas）
https://developer.mozilla.org/ja/docs/Web/API/Ca …

◇canvasにやや似ていますけれど、SVGによる方法もあるかも知れません。
SVGの場合は、canvasとは違い描画結果が画像にはならないので、Elementを識別して個別に移動・回転などの動きを加えることが可能です。
https://developer.mozilla.org/ja/docs/Web/SVG
https://developer.mozilla.org/ja/docs/Web/SVG/SV …

◇3D的な計算までをお考えなら、（以前紹介しましたけれど）前回答の最後の方を…
https://oshiete.goo.ne.jp/qa/12428519.html


※ 方法としてそれぞれが異なる方向になるので、どの程度の「動きのあるゲーム」にするのかを具体的にイメージしたうえで方向を決めるのが宜しいように思います。

No.1 回答者： sukitaro 回答日時： 2021/07/03 10:31

>・おすすめのWEBサイト

canvas使ってゲーム作るなら、
https://qiita.com/doxas/items/9debec7e1f0c19bc8daa
が参考になりました。

とはいえ、このサイトではシューティングゲームを作るので、
質問者さんが想定しているPKゲームに応用できるかは分かりませんが。

同じ著者の「グラフィックスプログラミング入門 ——リアルタイムに動く画面を描く。プログラマー直伝の基本」という書籍も良かったです。


>・取り組む上での注意

わたしもゲーム作ろうとしたことが何度かあるのですが、
だんだんと変数の数が増えて、わけがわからなくなって挫折しています。
とりあえず最初は、できるだけシンプルに仕上げるのがいいと思います。


>・おすすめのコード（～タグ使うといいよなど）

特におすすめするようなタグは無いです。


>・その他アドバイス

いろいろと試行錯誤されているようなので、
ぜひがんばって、最後はウェブサイト公開まで行ってください！