1件のコメント

くまたたきをバージョンアップしました。以下のあたりが変更点。

  • くまさんが吹っ飛ぶ
  • クリアタイムをつぶやける
  • タイトル、ゲーム、スコアごとにシーンを分けた

本当は最新バージョンのenchant.jsにしたかったんだけどgithubにつながらず・・・。

このくらいにまでしておけば子供たちが楽しんでくれそうな気がする。

ソースは以下のような感じ。

enchant();

わからなかったClass.createの使い方が色々ためしてやっとわかりました。分かってしまえばなんてことないんだけどな・・・。

動作は何も変わっていませんが。

ソースはこうなりました。

enchant();
window.onload = function () {
    //-------------------------------------------------------------------
    //くまさん
    //-------------------------------------------------------------------
    var Kuma = Class.create(Sprite, {
        initialize: function () {
            // スーパークラスのコンストラクタを適用
            Sprite.apply(this, arguments);

なんだか、変数のスコープがどうなっているのかまったくもってよくわからない。enchant();って実行された時点で、gameあたりはグローバルにアクセス可能になっているんだろうか?

コードをちょっとだけ整理してクラスごとにきちんと切りだしてみたのですが、動かないです。機能よりも退化してるけど、とりあえずくまがうろちょろはする予定だったんだけど、なんでだろう?原因が良くわからず・・・。class.createをつかってSpriteを継承したクラスのサンプルコードが見たい。

以下は動かないコード。

enchant();
window.onload = function () {
   //-------------------------------------------------------------------
   //くまさん
   //-------------------------------------------------------------------
   var Kuma = Class.create(Sprite);
   Kuma.prototype.initialize = function () {
       // スーパークラスのコンストラクタを適用
       Sprite.apply(this, arguments);
       
       this.image = game.assets['bear.gif'];   //画像セット
       this.x = Math.floor(Math.random() * 320);    //出現位置x座標
       this.y = Math.floor(Math.random() * 320);   //出現位置y座標
       this.xdirection = 1;    //x方向の移動の向き(1:右, 2:左)
       this.ydirection = 1;    //y方向の移動の向き(1:下, 2:上)
       
       //くまさんの毎フレームの動き
       this.addEventListener('enterframe', function () {
           //消えてる?
           if (this.action == "消える") {
               this.time++;
               if (this.time >= 15) {  //15フレームで消えるよ。
                   game.rootScene.removeChild(this);
               }
               return;
           }
           
           //消えてなければ適当に毎フレームとことこ歩きます。
           this.x += Math.floor(Math.random() * 2) * this.xdirection;
           this.y += Math.floor(Math.random() * 2) * this.ydirection;
           
           //たまに方向を変える
           if (game.frame % 20 == 0) {
               if (Math.round(Math.random()) == 1) {
                   this.xdirection *= -1;
                   this.scaleX *= -1;
               }
               
               if (Math.round(Math.random()) == 1) {
                   this.ydirection *= -1;
               }
           }
           
           //画面からはみ出したら逆に移動
           if (this.x + this.width > game.width) {
               this.xdirection = -1;
               this.scaleX = -1;
           }
           if (this.y + this.height > game.height) {
               this.ydirection = -1;
           }
           if (this.x <= 0) {
               this.xdirection = 1;
               this.scaleX = 1;
           }
           if (this.y <= 0) {
               this.ydirection = 1;
           }
           
           //アニメーション
           if (game.frame % 3 == 0) {
               this.frame++;
           }
       });
       
       //くまさんが叩かれた時
       this.addEventListener('touchstart', function (e) {
           new KumaVoice(this.x, this.y);  //「くまー」と叫ぶ
           this.action = "消える" //くまさん消える
           this.opacity = 0.5; //くまさん半透明になる
           this.time = 0;  //時間をリセット
       });
       
       //画面に表示する
       game.rootScene.addChild(this);
   }
   
   //-------------------------------------------------------------------
   //くまさんの声
   //-------------------------------------------------------------------
   var KumaVoice = Class.create(Label);
   KumaVoice.prototype.initialize = function (x, y) {
       // スーパークラスのコンストラクタを適用
       Sprite.apply(this, arguments);
       
       this.text = 'くまー';
       this.x = x;
       this.y = y - 10;
       this.time = 0;
       
       //毎フレームの動き
       this.addEventListener('enterframe', function () {
           this.y--;
           this.time++;
           // 15フレームで消える
           if (this.time >= 15) {
               game.rootScene.removeChild(this);
           }
       });
       
       //画面に表示する
       game.rootScene.addChild(this);
   }
   
   //-------------------------------------------------------------------
   //時間
   //-------------------------------------------------------------------
   var Time = Class.create(Label);
   Time.prototype.initialize = function(){
       // スーパークラスのコンストラクタを適用
       Sprite.apply(this, arguments);
       
       this.x = 5;
       this.y = 5;
       this.font = "8px 'Arial'";
       this.time = 0;
       this.text = "じかん:" + this.time + "びょう";
       
       //毎フレームの動き
       this.addEventListener('enterframe', function () {
           //ゲームが終っていなければ更新
           if(game.running) {
               if (game.frame % game.fps == 0) {
                   this.time++;
                   this.text = "じかん:" + time.time + "びょう";
               }
           }
       });
       
       //描画登録
       game.rootScene.addChild(this);
   }
   
   //-------------------------------------------------------------------
   //ゲーム
   //-------------------------------------------------------------------
   var game = new Game(320, 320);
   game.preload('bear.gif');
   game.onload = function () {
       //くまさん生成
       var kumaNum = 50;   //くまさん何匹出すか
       for (i = 0; i < kumaNum; i++) {
           new Kuma();
       }
       
       //ゲーム開始
       game.start();
   }
};

精神的に落ち着いたので、ミニゲームでもつくってみようと思います。先日β版が公開されたenchant.jsをつかって、iPhone, iPadあたりで子供に遊ばせようかと。

とりあえずライブラリの内容を簡単に理解しつつ、サンプルのソースを読んだりしてみましたが、ミニゲームくらいなら簡単に作れそうです。

今日はとりあえず、ためしにくまさんを10匹ほど出してうろちょろさせてみました。

ソースはこんな感じです。

enchant();

iPhoneで見てみるとなかなか可愛らしいです(笑