別のソースファイルの関数を参照する方法が知りたい。

提示コードですがindex.htmlのようにCollision.jsの次にPiilBox.jsを読み込んでいるので
function BoxCollision()関数が利用できると思うのですが出来ません。これはなぜでしょうか？他のクラスは参照できます。

参考サイト: https://techacademy.jp/magazine/39793

Console

PillBox_Mng.js:66 Uncaught ReferenceError: BoxCollision is not defined
    at PillBox_Chip.Collision (PillBox_Mng.js:66:13)
    at PillBox.Collision (PillBox_Mng.js:173:35)
    at PillBox_Mng.Collision_Bullet_Enemy (PillBox_Mng.js:264:48)
    at Game.Update (Game.js:316:30)
    at draw (Main.js:17:12)
    at p5._main.default.redraw (p5.js:70809:27)
    at _draw (p5.js:63046:25)

PillBox.js

js
1
2      // ################################ 当たり判定 ################################ 
3      Collision(type,bullet)
4      {
5            if( (BoxCollision( new Vector(bullet.position.x,bullet.position.y), new Vector(bullet.size.x,bullet.size.y),
6            new Vector(this.position.x,this.position.y), new Vector(this.size.x,this.size.y)) == true) && (bullet.isAnimation == false))
7            {
8
9                  if(this.isActive == true)
10                  {
11                        this.setDamage(type);   //スプライト切り替え
12
13                        return true;
14
15                  }
16                  else
17                  {
18                        return false;
19                  }
20            }
21
22            return false;
23      }
24

Collison.js

js
1
2
3/* 矩形同士の当たり判定 /*/
4function BoxCollision(posA,sizeA,posB,sizeB)
5{       
6      if( ((posA.x + sizeA.x) > posB.x) && ((posB.x + sizeB.x) > posA.x )
7      &&    ((posA.y + sizeA.y) > posB.y) && ((posB.y + sizeB.y) > posA.y ) )
8      {
9            return true;
10      }
11      else
12      {
13            return false;
14      }
15}
16

index.html

html
1<!DOCTYPE html>
2<html lang=ja>
3      <head>
4            <meta charset="utf-8">
5            <title>Space_Invarders</title>
6            <body>
7                  <link rel="stylesheet" href="style.css">
8                  <script src=../p5/p5.js></script>
9
10                  <!-- ユーティリティ -->
11                  <script src=../Utility/Math.js></script>
12                  <script src=../Utility/Vector.js></script>
13                  <script src=../Utility/Collision.js></script>
14                   
15                  <script src="Script/Enemy_Mng.js"></script>
16                  <script src="Script/PillBox_Mng.js"></script>
17                  <script src="Script/Player.js"></script>
18
19
20                  <script src="Script/Game.js" ></script>
21
22                  <script src="Script/Main.js" ></script>
23            </body>
24      </head>
25</html>

int32_t

2022/01/28 03:48

> 利用できると思うのですが出来ません。どういう症状なのか具体的に書いてください。ブラウザの開発者ツールのコンソールにエラーが出ていたらすべて質問文に書いてください。

退会済みユーザー

2022/01/28 03:49

はい、文章を修正しました。

int32_t

2022/01/28 03:56

ブラウザの開発者ツールの Sources タブ(Chrome)か Debugger タブ(Firefox)に Collision.js が入っていることを確認してください。

m.ts10806

2022/01/28 04:19 編集

デバッグすれば分かる話ですが、デバッグが分からないとまだ言われますか？

退会済みユーザー

2022/01/28 04:27

ブラウザのソースタブから確認したところ。Collison.jsはあるのですがそのソースファイルのコードに BoxCollisionコードがありません。これはなぜでしょうか？

int32_t

2022/01/28 04:39

エディタで保存してなかったとか、エディタで編集したファイルが ../Utility/Collision.js とは別のものだったとか。

退会済みユーザー

2022/01/28 04:41

エディタでもしっかりCtrl+ S キーを押して保存して手動でも保存しましたがなんかおかしかったみたいです。これからはF5じゃんなくてCtrl + F5でリロードすることにします。

行動規範の内容に同意します

回答2件

ご提示いただいたファイル名が正しいのならば、ファイル名の記述誤りです。
Collision.js は読み込んでいますが、Collison.js は読み込んでいません。

投稿2022/01/28 11:46

YT0014

総合スコア1708

ベストアンサー

chromeのSource タブからソースを確認したところ下記の関数が見つからなったため直接追記してCtrl + F5 でF5とは違う再読み込みを行い実行できました。エラーが取れました。


/* 矩形同士の当たり判定 /*/
function BoxCollision(posA,sizeA,posB,sizeB)
{       
      if( ((posA.x + sizeA.x) > posB.x) && ((posB.x + sizeB.x) > posA.x )
      &&    ((posA.y + sizeA.y) > posB.y) && ((posB.y + sizeB.y) > posA.y ) )
      {
            return true;
      }
      else
      {
            return false;
      }
}

投稿2022/01/28 04:30

退会済みユーザー

総合スコア0