Skip to content

shi3z式ゲームプログラミング入門 #3 “ゲームらしく”する

shi3zだよ。
前回の課題はできたかな?
練習問題の答えはいろいろあるけど、こんな感じで書けるよ


function onLoad() {
      ship= new Image('img/starship.png');
       ship.tick = function(){ //宇宙船がマウスカーソルを追いかける
                this.x += (mouseX-this.x)/10;
                this.y += (mouseY-this.y)/10;
       };
       ship.onHit = function(){ //衝突した!
              alert("CRASHED!");
       }  

       for(i=0;i<20;i++){
              rock = new Image('img/rock.png');
              rock.x = Math.random()*320;
              rock.y = Math.random()*480;
              if(Math.random()*100<20){
                            rock.tick=function(){
                                          this.y--;
                            }
              }
       }
     gameStart();
}

Math.randomを使って20%くらいの岩だけtickを書き換えて動かしているんだ。

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

さて、便利とはいってもalertってちょっとウザイよね?

alert以外の方法で画面に文字を表示する方法もある。

あと、確かに隕石にぶつからないようにするっていうゲームはできたけど、なんだかゲームっぽくない。

やっぱりなにか点数が出たりしないとね。

そこで前回のプログラムをもとに、今度は岩を避けるゲームじゃなくてバナナを取ると点数が入るゲームに改造してみよう。

function onLoad() {
     scoreLabel = new Label("Score:0",10,10); // A Labelオブジェクトをつくる
     score=0; // B // 点数を入れるための変数scoreを作り、0に初期化;

     ship= new Image('img/starship.png');
       ship.tick = function(){ //宇宙船がマウスカーソルを追いかける
                this.x += (mouseX-this.x)/10;
                this.y += (mouseY-this.y)/10;
       };
       ship.onHit = function(){ //C 宇宙船に当たったときの処理
          score+=1;//D スコアを足す
          scoreLabel.setText("Score:"+score); //E スコアを表示する
       }  

       for(i=0;i<20;i++){
              rock = new Image('img/banana.png'); //F バナナの絵に変えてみた
              rock.x = Math.random()*320;
              rock.y = Math.random()*480;
              rock.onHit=function(){ //G 当たった時の処理
                            this.y=-1000; //H 画面外の座標を指定して見えなくしてしまう
              }
       }
     gameStart();

}

どんな動きをするか解るかな?

まず、スコアを表示させるためにscoreLabelというオブジェクトを作った(A)。

これはLabelクラス(こういう機能単位の塊をクラスと呼ぶ)のオブジェクトだ。Labelというのは、画面上の好きな位置に好きな文字を表示できるプログラム部品。ゲームを作るときにとても便利だ。

座標(10,10)にとりあえず「Score:0」と表示してみた。

次にScoreを0として初期化した(B)。

また、宇宙船がなにかに当たった時の処理を変えた(C)。
スコアを加算し(D)、scoreLabelに新しい文章をセットする(D)
ラベルに"Score"+scoreとすると、score変数が"Score:"という文字のあとに続いて表示される。

それから岩の絵をrock.pngからbanana.pngに変えた(F)。
ただし変数名まで変えてしまうと改造が大変なので、変数の名前はrockのままにした。

これでいきなり宇宙空間に浮かぶバナナを集めてスコアが貯まるという、ファンキーなゲームができあがった。

ちょっと改造箇所が多くて解りにくいかもしれないけど、丁寧に見ていけばそんなに難しくはないはずだ。

おお
結構無理矢理だけど、ゲームっぽいものが出来上がったぞ。
おめでとう。これがあなたの作った初めてのゲームだ。

ここまで解ったら、次の課題をやってみよう。
今回はちょっと難しいよ。できるかな?

課題

1) バナナが宇宙船をゆっくり追いかけるようにしてみよう
2) バナナがたまにバナナではなくて岩になるように改造してみよう。
3) バナナが宇宙船から逃げるように改造してみよう。

このエントリーをはてなブックマークに追加
はてなブックマーク - shi3z式ゲームプログラミング入門 #3 “ゲームらしく”する
Post to Google Buzz
Share on GREE

Related posts:

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

Facebook comments:

Post a Comment

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