STEP4 魚を動かしてみよう! – FishGame Project

魚の画像が動く仕組み

Q. 魚が動く仕組みについて考えてみよう。

ヒント

アニメーションの仕組み
みんなが書いたコードのどこかを変更すると魚が動いているように見えるよ。

 var kumanomi = Sprite('kumanomi').addChildTo(this);
 kumanomi.x = 640;
 kumanomi.y = Random.randint(100, 860);

 

 

 

A. xの数字を減らす

24行目に次のコードを追加する。

 kumanomi.update = function() {
  kumanomi.x = kumanomi.x - 3;
 }

できたら、再生ボタンを押して確認してみよう!
魚が左に向かって動き出したかな?

消えてしまった魚をもう一度出現させよう

左端まで移動した魚はそのまま消えてしまい、ゲームが終わってしまいます。
それではつまらないので、
魚が消えたら、新しい魚を再び右端から出現させてみましょう。

先ほどのコードに下記の青色のコードを追加して下さい。
追加する位置に気をつけよう。

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

このコードはとてもプログラミング的です。
if文はプログラミングの基本テクニック!ぜひ身につけよう。

if (条件) {
  処理...
}

ここまでのコード

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 kumanomi = Sprite('kumanomi').addChildTo(this);
   kumanomi.x = 640;
   kumanomi.y = Random.randint(100, 860);
   kumanomi.update = function() {
     kumanomi.x = kumanomi.x - 3;
     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プログラマーとして独立し、現在に至る。