

[phina.js Tips集 #当たり判定編 -
Qiita](https://qiita.com/alkn203/items/bca3222f6b409382fe20#%E5%BD%93%E3%81%9F%E3%82%8A%E5%88%A4%E5%AE%9A%E7%B7%A8)

上記サイトを参考にphina.jsライブラリを使用し、下記のコードで四方八方から向かってくる正方形をよけてスコアを稼ぐ避けげーを作ろうと思っているのですが、100行目の

[code]

                if(shape.hitTestElement(sprite)){
                  var self = this;
                  self.exit();
                }
    
[/code]

これらを追加するとコンソール上に”ReferenceError: sprite is not
defined”（spriteが定義されていない）と表示されてしまい、うまくいきません。上記のコードを除くと正常に動作します。

initプロパティでspriteは定義しているように見えるのですが、何が問題なのでしょうか？  
対処法をご教示いただきたいです。よろしくお願いします。

### 環境

OS: windows10  
ブラウザ: firefox

* * *

**対象のコード**

[code]

    <html>
      <head>
        <meta charset='utf-8' />
        <meta name="viewport" content="width=device-width, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
    
        <title>Getting started | phina.js</title>
        <!-- phina.js を読み込む -->
        <script src='http://cdn.rawgit.com/phi-jp/phina.js/v0.2.0/build/phina.js'></script>
    
        <!-- メイン処理 -->
        <script>
          // phina.js をグローバル領域に展開
    phina.globalize();
    
    var ASSETS = {
      //image
      image: {
        'tomapiko': 'https://rawgit.com/phi-jp/phina.js/develop/assets/images/tomapiko.png',
      },
    };
    
    var SCREEN_WIDTH = 640;
    var SCREEN_HEIGHT = 960;
    var SPEED = 5;
    var ENEMY_INTERVAL = 10;
    
    // MainScene クラスを定義
    phina.define('MainScene', {
      superClass: 'DisplayScene',
      init: function() {
        this.superInit();
        // 背景色を指定
        this.backgroundColor = '#444';
        // スプライト画像作成
        var sprite = Sprite('tomapiko').addChildTo(this);
        // 初期位置
        sprite.x = 325;
        sprite.y = 740;
    
          // 一定フレーム経過したら
        // タッチ保持イベント
        this.onpointstay = function(e) {
          // スプライトをタッチ位置に
          sprite.x = e.pointer.x;
          sprite.y = e.pointer.y;
        };
        // タッチ移動イベント
        this.onpointmove = function(e) {
          // スプライトをタッチ位置に
          sprite.x = e.pointer.x;
          sprite.y = e.pointer.y;
        };
    
      },
    
      update: function(app){
    
          if (app.frame % ENEMY_INTERVAL === 0) {
              // 敵生成
              //長方形を描画
            for(var kali = 1; kali <= 50;){
              var default_x = Random.randint(-15,655);
              var default_y = Random.randint(-15,975);
              if (-5 <= default_x && default_x <= 645 && -5 <= default_y && default_y <= 965){}
              else{
                var shape = Shape().addChildTo(this);
                shape.setSize(10,10);
                shape.x = default_x;
                shape.y = default_y;
    
                if (-15 <= default_x && default_x <= 320 && -15 <= default_y && default_y <= 330){
                  // Physicalクラスを適用して移動
                  var phis_y_left_up = Random.randint(1,4)
                  var phis_x_left_up = Math.sqrt(25 - phis_y_left_up^2)
                  var last_x = phis_x_left_up
                  var last_y = phis_y_left_up
                }
                else if (321 <= default_x && default_x <= 655 && -15 <= default_y && default_y <= 330){
                  var phis_x_right_up = Random.randint(-1,-4)
                  var phis_y_right_up = Math.sqrt(25 - phis_x_right_up^2)
                  var last_x = phis_x_right_up
                  var last_y = phis_y_right_up
                }
                else if (-15 <= default_x && default_x <= 320 && 331 <= default_y && default_y <= 975){
                  var phis_y_left_down = Random.randint(-1,-4)
                  var phis_x_left_down = Math.sqrt(25 - phis_y_left_down^2)
                  var last_x = phis_x_left_down
                  var last_y = phis_y_left_down
                }
                else if(321 <= default_x && default_x <= 655 && 331 <= default_y && default_y <= 975){
                  var phis_x_right_down = Random.randint(-1,-4)
                  var kali_k = Math.sqrt(25 - phis_x_right_down^2)
                  var phis_y_right_down = kali_k * -1
                  var last_x = phis_x_right_down
                  var last_y = phis_y_right_down
                }
                shape.physical.force(last_x , last_y);
                if(shape.hitTestElement(sprite)){
                  var self = this;
                  self.exit();
                }
    
              }
              kali++;
            }
          }
      }
    
    });
    
    // メイン処理
    phina.main(function() {
      // アプリケーション生成
      var app = GameApp({
        //startLabel: 'main', // メインシーンから開始する
        assets: ASSETS, //loading image
      });
      // アプリケーション実行
      app.run();
    });
    
        </script>
      </head>
      <body>
    
      </body>
    </html>
    
[/code]


CC BY-SA 4.0
2020-03-02T00:51:53.483
63480
2020-03-02T08:56:58.377
2020-03-02T01:02:12.570
3060
38032
question
javascript html html5 game-development
phina.jsで当たり判定を取得できない

[code]

      init: function() {
        // ＜省略＞
        // スプライト画像作成
        var sprite = Sprite('tomapiko').addChildTo(this);
        // 初期位置
        sprite.x = 325;
        sprite.y = 740;
    
[/code]

こちらで定義した変数 sprite はこの関数のローカル変数となります。init に設定している関数の外からは参照できません。そのため update
プロパティに設定している関数の中から参照しようとするとエラーとなります。

対処方法としては、 sprite を update プロパティに設定している関数から参照できる場所に定義すること、となります。


CC BY-SA 4.0
2020-03-02T03:51:41.270
63486
2020-03-02T08:56:58.377
2020-03-02T08:56:58.377
27410
27410
63480
answer