Skip to content

shi3z式ゲームプログラミング入門 #4 バナナと配列

shi3zだよ。さあ、ハイスピードでお送りするこの短期集中連載。
みんな付いて来れてるかな?

いよいよ大詰めに近づいて来たよ!
今回はいろんな画像を表示するテクニックについて紹介するよ!
これが終わったら次回はいよいよソーシャルミニゲームの開発だよ!

まず一発目は、ガラッと趣向を変えて、またバナナを出してみよう。

ポケットの中にビスケットがひとつ、ふたつと増えていく、みたいな感じで、バナナをクリックするとどんどんバナナが増えていくんだ。


moreBanana = function(){
    banana  = new Image("img/banana.png", // A バナナを増やす
                                                    rand(320),rand(480)); //B 座標はランダム
    banana.node.onclick=moreBanana;  //C クリックされたらmoreBanana関数を呼び出す
};

function onLoad() {
      moreBanana(); //D 最初のバナナをつくる
}

内容を解説しよう。
と言っても凄く簡単だよ。

(続きは以下のリンクから)

AとBでランダムにバナナを出現させている。
今回はバナナを「クリックしたらバナナが増える」ようにしているから、forループは使っていない。
かわりにCの行に注目して。

banana.node.onclickはシステムが呼び出す特殊な関数で、これはズバリ、クリックされたら呼び出されるというものだよ。
onclick以外にも、onmouseover(マウスカーソルが上を通過したら呼び出される)とかもあるけど、今回はわかりやすくクリックを使っている。

クリックする度にmoreBananaという関数が呼び出される。
これはどのバナナをクリックしても一緒だ。やってみて。面白いでしょ?

ちなみに、最初のバナナを作っているのはDだ。これがバナナ界におけるアダムというわけだね。

さて、次だ。
バナナばかりでもつまらないから、バナナ、岩、宝石、宇宙船の三つがランダムに表示されるようにしてみようと思う。


moreNanika = function(){
   a = Math.floor(Math.random()*3); //A 0か1か2の整数の乱数を得る
     if( a == 0) name = "img/banana.png";  //B
     if( a == 1) name = "img/rock.png";      //C
     if( a == 2) name = "img/starship.png"; //D
     nanika  = new Image(name,
                                                    rand(320),rand(480));
     nanika.node.onclick=moreNanika;
};

function onLoad() {
      moreNanika();
}

さて、Aの行ではMath.floorという新しい関数が出て来たね。
これは、簡単に言えば小数点以下を切り捨てる関数だよ。
今回は、3択で答えが欲しかったから、3を掛けているんだけど、Math.random()だと0〜3までの小数が出て来てしまうから、たとえば0.1とか2.5とか半端な数が出て来てしまうんだ。そうすると、次のif文で判断するのが面倒でしょ?
だからfloorで小数点以下を切り捨てて、単純な比較だけで終わらせているわけ。

結果は次のような画面になるよ(実行するまえにリロードを忘れないで!)

ちなみにif文で「等しいか」を意味する「==」はよく「=」と間違えてしまいそうになるから必ず二回書くように気をつけてね。

さて、A行で変数aに0か1か2というランダムな数字が入るから、続くB、C、D行でそれをそれぞれの画像ファイル名に対応づけている。
B、C、D行ではnameという新しい変数にファイル名を入れているよ。

実はJavaScriptの変数には「”」で囲んだ文字を入れることもできるんだ。「”」はダブルクォーテーションと呼ぶよ。
それにしてもJavaScriptの変数は、数字でも文字でも画像でもなんでも入るんだよね。だからもう変「数」でもなんでもないんだよね。

あとの部分はさっきと一緒かな。

しかしこのプログラム、なんかウザいと思わない?
いまはファイルが三つだからコンパクトで住んでるけど、これが10も20もあったらif文がズラッと並んで気持ち悪くなるのは目に見えてる。
実際のゲームにはファイルが無数にあるから、とても三つじゃ済まないよ。

実は同じことをするプログラムは、次のようにも書けるんだ。


moreNanika = function(){
   names = new Array("img/banana.png","img/rock.png","img/starship.png");  //A 配列変数namesを宣言する

   a = Math.floor(Math.random()*4);  // B 0か1か2の乱数を得る
     nanika  = new Image(names[a], // C 配列変数namesからa番目の要素を取り出す
                                                    rand(320),rand(480));
     nanika.node.onclick=moreNanika;
};

function onLoad() {
      moreNanika();
}

一見してプログラムが短くなったよね?

注目すべきはAの行とCの行。
Aの行で新しくArrayというクラスのオブジェクトを生成しているよ
Arrayというクラスは、システムが用意しているクラスで、これは配列変数というものを実現するクラスなんだ。

配列変数というのは、通常のオブジェクト変数がひとつの値か、名前のついたプロパティ(this.xやthis.yはthisオブジェクトのプロパティだよ)しか持っていないのに対し、もっと大量のオブジェクトを処理するための変数なんだ。

配列変数に格納されたオブジェクトを取り出すには、[]で囲まれた部分に数字を与えてあげる。
この場合はaだね。

数字は変数でなくて直接与えることもできるよ。
試しにCの行を

nanika = new Image(names[0], // C 配列変数namesから0番目の要素を取り出す

として実行してみよう(ブラウザ上で試す時はリロードしよう)。
すると、バナナしか表示されなくなるはず。
同様に、1とすれば岩が、2とすれば宇宙船だけが表示されるようになるよ。

この配列を使いこなすと、もっと複雑なプログラムが簡単に書けるようになるんだ。

最後に配列を使うとどんな凄いことができるか紹介するね。

どんな凄いことが起きるかは、実行してみてのお楽しみ。
また次回!


function onLoad() {
   boy = new Image("img/boy.gif",160,200,64,64); //キャラクターのサイズを64x64にする
   boy.count  = 0;
   boy.tick = function(){
      var anim = new Array( 1, 2, 3, 2); //アニメーションパターンを配列に格納する
      this.ix = -anim[boy.count]*64;      //アニメーションパターンをカウントによってずらす
      boy.count +=1;
      if(boy.count==3)boy.count=0;
   }
   gameStart();
}
このエントリーをはてなブックマークに追加
はてなブックマーク - shi3z式ゲームプログラミング入門 #4 バナナと配列
Post to Google Buzz
Share on GREE

Related posts:

  1. shi3z式ゲームプログラミング入門 #3 “ゲームらしく”する
  2. shi3z式ゲームプログラミング入門 #1 72時間でゲームプログラマになる方法
  3. shi3z式ゲームプログラミング入門 #2 あと48時間でゲームプログラマになる方法
  4. かんたんプログラミング #3 関数ってどんな数?

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*