@taka_may222025

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

ウェブゲームの不具合が解決出来ません。

Q&A

Closed

解決したいこと

「グラフィックスプログラミング入門」という専門書でプログラミングの勉強をしています。
学習の一環として、専門書のサンプルコードを自分なりに編集して書き換えています。
リテラルを変更して、処理の一部を関数化していますが、大筋の内容は同じです。

画面上部から現れる敵をショットで打った際に、火花が散る演出が表示されない問題が発生しました。

ファイルは以下のURLにアップロードしています。
「F12 -> デバッガー -> js」で全てのコードが閲覧出来ます。
アローキーで自機を上下左右に動かして、Zキーでショットを打てます。

【専門書のサンプルコード】
https://upload0605.web.fc2.com/original/index.html

【私が編集したコード】
https://upload0605.web.fc2.com/my_code/idx.html

発生している問題・エラー

「解決したいこと」に同じ

該当するソースコード

// character.js: 716

  /**
   * 爆発エフェクトの座標を設定するメソッド
   *
   * @param {number} x - 爆発を発生させるX座標
   * @param {number} y - 爆発を発生させるY座標
   */
  setCoordExplosion({x, y}) {

    for (let i = 0; i < this.num; i++) { // 火花の個数分ループして生成する

      // 疑問の箇所 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
      this.posSparks[i] = new Position({x, y}); // 引数を元に位置を決める

      /**
       * @type {number} angle - ランダムに火花が進む角度(なるラジアン)
       * @type {number} cos   - ラジアンを元に生成されたコサイン
       * @type {number} sin   - ラジアンを元に生成されたサイン
       */
      const
      angle      = (Math.PI * 2.0) * Math.random(),
      [cos, sin] = [Math.cos(angle), Math.sin(angle)];

      this.vecs[i] = new Position({cos, sin});
    }

    this.containLife = true;       // 爆発の生存状態を設定
    this.timeBegin   = Date.now(); // 爆発が始まる瞬間のタイムスタンプを取得する
  } // setCoordExplosion({x, y}) {}

自分で試したこと

Fire Foxのデバッガーで検証してみました。
「this.posSparks[i] = new Position({x, y});」のposSparks[i]に
値が設定されません。ここが原因だと考えているのですが、
どうすれば改善出来るのかが分かりません。

他の質問サイトでも相談しましたが、解決しませんでした。
マルチポストに該当するかもしれませんが、よろしくお願い致します。

0 likes

3Answer

635行目あたりをデバッグするとわかるんですがExplosionに生えているプロパティがcontainLifeなのに対し誤ってlifeを参照しています.そのためここのif分岐から本来呼ばれるであろうsetCoordExplosion自体が呼ばれていません.
非TS環境ではこの手のミスは死ぬほどやるので辛いところです.IDEですべての参照を検索するとかして改名は徹底してやる必要があります.

また,分岐前後などいくつかの箇所にブレークポイントを置くなどして,呼ばれるべき処理が呼ばれていないなど突き止めると,デバッグの手かがりになります.

3Like

Comments

  1. @taka_may222025

    Questioner

    @Verclene
    返信ありがとうございます。
    間違った箇所を修正して見ましたが、やはりうまく動いてくれません。
    再度デバッガーで検証してみました。
    一見、処理はうまく循環しているように見えるのですが、どこに欠陥が潜んでいるのか、
    全く見当が付かないです。
    https://upload0605.web.fc2.com/sample_may222025/idx.html
    (修正済みのコード: 2025年5月22日)

    Sublime Text : build 4200
    fireox Browser: 138.0.4(64ビット)

  2. @Verclene さんが書かれた通り、ブレイクポイントを設定するのがいいと思いますよ。character.jsの755行目がおすすめです。


    あ、いや、そこじゃないですね。失礼しました。767行目がいいかな、と思います。

【専門書のサンプルコード】のURLでも、ショットして広がっていく端で当たっているにも関わらず、当たり判定されない(敵も消えないし、花火も出ない)現象が起きました。
質問者さんの改変に関係がないと思います。

1Like

Comments

  1. こちらでは少なくとも正常に動作しているようです.環境差異が出るようなコードですかねこれ…?拡張機能とかご確認ください.

    強いて言うなら当たり判定の精度がやや悪い問題はありますが,それはここで追うべき議題ではないように思います.

  2. @taka_may222025

    Questioner

    @nak435
    返信ありがとうございます。
    元々、安易なコードなのかもしれません。

解決しました。

// character.js:731
this.vecs[i] = new Position({cos, sin}); // 誤

this.vecs[i] = new Position({x:cos, y:sin}); // 正

vecs[i]のデータがundefinedだったので、そこから遡ってクラスPositionを
調べてみました。
そこで、ようやくコンストラクタの呼び出し方に問題があることに気付けました。

アドバイスを頂き、ありがとうございました。

0Like

Your answer might help someone💌