席替えアプリ途中経過

あれこれやってここまで出来ました
https://dl.dropboxusercontent.com/u/159978/enchant/sekigae/index.html

とりあえずMonacaに突っ込んでみたけど全然動かない
特に音系が全滅。
どうやら音はWebAudioAPIを使っているらしく、ブラウザ依存＆WebViewでは対応していないみたい
仕方ないから音だけはネイティブで作ってやろうと思ったが、WebViewでは動きすらしない。

どうやら先人達も苦労しているみたい
Java＋Androidと熱帯魚 Android enchant.js 各端末でのブラウザのパフォーマンス

というわけでenchant.jsでネイティブアプリを作るのは諦めました。
先人にならって「AndEngine」とやらを試してみよう

くるくる回るくま

ハンカチ落とし式席替えをするために、ぐるぐるまわるくまを作ってみた。
f:id:d-nami:20130717025638p:plain

enchant();

var SCREEN_WIDTH = 320;
var SCREEN_HEIGHT = 320;
var CHARA_IMAGE = "/Users/daichi/program/enchant/enchant.js-builds-0.7.0/images/chara1.png";
var SPRITE_MAX_NUM = 10;


//ランダムな数値を作成
var randint = function(min, max){
  return window.Math.floor(Math.random()*(max-min+1)) + min;
}



window.onload = function(){
  var game = new Game(SCREEN_WIDTH, SCREEN_HEIGHT);
  game.preload(CHARA_IMAGE);

  game.onload = function(){
    var scene = game.rootScene;
    scene.backgroundColor = "black";

    //Group作成
    var bearGroup = new Group();
    //Groupの中心座標指定
    bearGroup.moveTo( (SCREEN_WIDTH-32)/2, (SCREEN_HEIGHT-32)/2 );

    for(var index=0; index<SPRITE_MAX_NUM; ++index){
      var bear = new Sprite(32, 32);
      bear.image = game.assets[CHARA_IMAGE];
      bear.frame = 1;

      //くまの初期位置指定
      bear.rad = Math.PI*2/SPRITE_MAX_NUM * index;
      var x = Math.cos(bear.rad)*100;
      var y = Math.sin(bear.rad)*100;
      bear.moveTo(x ,y);

      //くまの移動量
      var drad = Math.PI*2/SPRITE_MAX_NUM/100;
      bear.tick = 0;
      /*
       *       bear.onenterframe = function(){
       *           bear.tick++;
       * 
       *            this.x = Math.cos( this.rad+(drad*bear.tick) )*100;
       *            this.y = Math.sin( this.rad+(drad*bear.tick) )*100;
       *       };
       */
      bear.addEventListener('enterframe', function(){
        bear.tick++;
        //ぐるぐるまわる
        this.x = Math.cos( this.rad+ (drad*bear.tick) )*100;
        this.y = Math.sin( this.rad+ (drad*bear.tick) )*100;
      });
      //くまをグループに追加
      bearGroup.addChild(bear);
      // scene.addChild(bear);
    }

    scene.addChild(bearGroup);
  };


  game.start();

};

イベントリスナーのところで若干ハマった。
javascriptにおけるthisを勉強しないとなー

Vimでコメントアウト

MonacaはVimのキーバインドが微妙なので、Vimで作ってコンパイルだけをMonacaでやることにする。
VimのNERD Commenterのコマンドをすぐに忘れてしまうので以下にメモしておく

<Leader>c<Space>
＃<Leader>はだいたいバックスラッシュ

VimのヤバすぎコメントプラグインNERD Commenter - ボクノス

Monacaでenchan.jsのSpriteを使ってみる

Monacaでenchan.jsのSpriteを使って、くまのピンボールを作ってみた。

公式チュートリアルを参考に、シーンの追加、Spriteの定期処理を学んだ
Let’s start enchant.js | enchant.js - A simple JavaScript framework for creating games and apps.

コードは以下のとおり

// This is a JavaScript file
enchant();
window.onload = function(){
    var game = new Game(320, 320);
    game.fps = 16;
    
    game.preload('img/animal/space3.png');
    game.onload = function(){
        var bear = new Sprite(32, 32);
        bear.image = game.assets['img/animal/space3.png'];
        bear.tick = 0;
        bear.anim = [5, 6, 5, 7];
        
        //くまの動き量
        var xShift = 5;
        var yShift = 3;
        
        bear.addEventListener('enterframe', function(){
           bear.tick++;
           bear.frame = bear.anim[bear.tick % 4]; 
           bear.x += xShift;
           bear.y += yShift;
           
           //右端についたら
           if(bear.x > 320 - 32){
               xShift = -5;
               bear.scaleX = -1;
           }
           //左端についたら
           if(bear.x < 0) {
               xShift = 5;
               bear.scaleX = 1;
           }
          
          //下についたら
            if(bear.y > 320 - 32){
               yShift = -5;
           }
           //上についたら
           if(bear.y < 0) {
               yShift = 5;
           }
       
           
        });
        
        var bearScene = new Scene();
        game.pushScene(bearScene);
        bearScene.addChild(bear);
        //game.rootScene.addChild(bear);
     };
    game.start();
      
};

衝突判定を入れてみると以下のとおり。
本当は衝突したらしばらく止まるようにしたかったのだが、うまく行かなかったのでまた明日

// This is a JavaScript file
enchant();
window.onload = function(){
    var game = new Game(320, 320);
    game.fps = 16;
    
    game.preload('img/animal/space3.png');
    game.onload = function(){
        var bear = new Sprite(32, 32);
        var bear2 = new Sprite(32, 32);
        bear.image = game.assets['img/animal/space3.png'];
        bear2.image = game.assets['img/animal/space3.png'];
        bear.tick = 0;
        bear.anim = [5, 6, 5, 7];
        bear2.anim = [15, 16, 15, 17];
        
        //くまの初期位置
        bear.x = 0;
        bear.y = 0;
        bear2.x = 320 - 32;
        bear2.y = 0;
        
        //くまの初速
        var xShift1 = 5;
        var yShift1 = 3;
        var xShift2 = 4;
        var yShift2 = 7;
        
        //hitフラグ
        var hitFlag = false;
        
        bear.addEventListener('enterframe', function(){
           bear.tick++;
           bear.frame = bear.anim[bear.tick % 4]; 
           bear2.frame = bear2.anim[bear.tick % 4]; 
           
           bear.x += xShift1;
           bear.y += yShift1;
           bear2.x += xShift2;
           bear2.y += yShift2;
           
           //右端についたら
           if(bear.x > 320 - 32){
               xShift1 = -5;
               bear.scaleX = -1;
           }
           if(bear2.x > 320 - 32){
               xShift2 = -4;
               bear2.scaleX = -1;
           }
           //左端についたら
           if(bear.x < 0) {
               xShift1 = 5;
               bear.scaleX = 1;
           }
           if(bear2.x < 0) {
               xShift2 = 4;
               bear2.scaleX = 1;
           }
           
          //下についたら
            if(bear.y > 320 - 32){
               yShift1 = -3;
           }
            if(bear2.y > 320 - 32){
               yShift2 = -7;
           }
           //上についたら
           if(bear.y < 0) {
               yShift1 = 3;
           }
           if(bear2.y < 0) {
               yShift2 = 7;
           }
           
           //ぶつかった
           if(bear.within(bear2, 20)){
               hitFlag = true;
           }
           
           if(hitFlag){
               var xtmp1 = xShift1; var ytmp1 = yShift1; var scale1 = bear.scaleX
               var xtmp2 = yShift2; var ytmp2 = yShift2; var scale2 = bear2.scaleX
               var counter = 0;
               
               //最初の１秒
               while( counter != game.fps){    
                   bear.frame =
                   bear2.frame = 18;
                   xShift1 = 0; yShift1 = 0;
                   xShift2 = 0; yShift2 = 0;
                   console.log(counter);
                   counter++;
               }
               
                xShift1 = -xtmp1; yShift1 = -ytmp1; bear.scaleX = -scale1
                xShift2 = -xtmp2; yShift2 = -ytmp2; bear2.scaleX = -scale2
                hitFlag = false;
               
            }
           
        });
        
        var bearScene = new Scene();
        game.pushScene(bearScene);
        bearScene.addChild(bear);
        bearScene.addChild(bear2);
        //game.rootScene.addChild(bear);
     };
    game.start();
    
    
};

Monaca

エディターにMonacaを使ってenchant.jsで作るのが一番手っ取り早そうだ
とりあえず以下のサイトを参考にサンプルが動くところまでを確認
Monaca + enchant.js でお手軽スマフォゲームアプリ開発 : アシアルブログ
monaca + enchant.js + nend でandroid無料アプリを作る 〜2.monacaに載せる〜 - Future is NOW!!!


おんなじこと考えて、おんなじことやろうとしている人達がいるなー
メルマガを購読してみよう
Ａｎｄｒｏｉｄアプリで起業する！ ～No Foolish, No Life.～

レイアウトもつくらないとなー