STEP5 タッチして魚を消そう! – FishGame Project

おまじない

23行目の文末をクリックして、エンターキーを押してください。
24行目に次のコードを追加して下さい。

kumanomi.setInteractive(true);

タッチイベントを実装しよう!

青いコードの部分を追加しよう。
追加位置に注意してください。

kumanomi.update = function() {
  kumanomi.x = kumanomi.x - 3;
  kumanomi.onpointend = function() {
    kumanomi.x = 640;
    kumanomi.y = Random.randint(100, 860);
  }
  if (kumanomi.right < 0) {
    kumanomi.x = 640;
    kumanomi.y = Random.randint(100, 860);
  }
}

できたら再生ボタンを押して、確認してみよう!
魚をタッチしたら消えたかな?

背景を追加しよう

このままでは味気ないので、海の中をイメージした背景画像を表示してみます。
21行目に下記のコードを追加して下さい。

 var background = Sprite('aquarium').addChildTo(this);
 background.x = this.gridX.center();
 background.y = this.gridY.center();

できたら再生ボタンを押してください。

ここまでのコード

phina.globalize();

var ASSETS = {
 image: {
 'aquarium': 'http://papagram.com/wp-content/uploads/2016/07/Aquarium.png',
 'kumanomi': 'http://papagram.com/wp-content/uploads/2016/07/kumanomi.png',
 }
};

phina.define('MainScene', {
 superClass: 'CanvasScene',
 
 init: function() {
   this.superInit();
 
   var background = Sprite('aquarium').addChildTo(this);
   background.x = this.gridX.center();
   background.y = this.gridY.center();
 
   var kumanomi = Sprite('kumanomi').addChildTo(this);
   kumanomi.x = 640;
   kumanomi.y = Random.randint(100, 860);
   kumanomi.setInteractive(true);
   kumanomi.update = function() {
     kumanomi.x = kumanomi.x - 3;
     kumanomi.onpointend = function() {
       kumanomi.x = 640;
       kumanomi.y = Random.randint(100, 860);
     }
     if (kumanomi.right < 0) {
       kumanomi.x = 640;
       kumanomi.y = Random.randint(100, 860);
     }
   }
  },
});

phina.main(function() {
 var app = GameApp({
 startLabel: 'main',
 assets: ASSETS,
 });
 
 app.run();
});
Pocket

宮田真也

Webプログラマー。
1982年京都府城陽市生まれ。東京都練馬区在住。社会学系の大学・大学院を卒業後、会社員として約6年勤務。退職後、プログラミングを学び、畑違いのWebプログラマーとして独立し、現在に至る。