ローカルでやろうと思ってたけど

JavaScriptでも何でもそうだと思うんだけど、コード書くのはテキストエディタあればいいけど、それを動かして試す環境もいるんですよね。
色々調べてまずは自前で環境設定*1したんですが、ブラウザに上手く反映されない。

【JavaScript】ぎゃぁぁぁできた！(*ﾟ∀ﾟ*) ページ上部に戻るボタン(解決・設置編) - がちゃまにあ日報

このボタンを作るのにJS binというサイトを使ったので試してみたんだけど、やっぱりダメで。
おい、いきなり躓くか！？( ﾟДﾟ; )
とか思ってたところに現れたのがこのサイト。

code.9leap.net
　
良くみたらenchant.jsのサイトでちゃんと紹介されてんのな(笑)

ここはほんと初心者に優しい。泣ける。
そもそもenchant.jsが画像まで用意してくれてることにも感動したんだけど。
ゲーム作りするときに、０から画像作るのって結構大変なんですよね。
それだけでちょっと挫折しそうになったり(笑)

まずはいくつかのサンプルがあるのでそれをfork(コピーを生成して保存)する。
右にサンプルコード、左に実行画面。
RUNボタンを押せばコードが実行されます。
コードいじる画面はこんな感じ。

これはクマさんを表示しよう、っていうチュートリアルです。
操作の説明なんかいらないほどシンプル。
右のコードいじって、RUNを押すだけです。
実行画面の下に課題みたいなのがあるのも良いですね。
どこをいじったらどうなるかがわかるもの。

私はまだ最後までチュートリアルをやってないんですが(脱線してアレンジしたくなる罠にはまりました)、最後に簡単なゲームのサンプルコードがあるので、一通りやればなんとなく理解できるのではないかと。
あとはひたすら他の人のコードを読んで分析あるのみ！

そんなわけでcode.9leap、なかなかオススメでございます。

ちなみにこれが脱線結果。

enchant();

// ここで自作クラスBearをつくる
Bear = Class.create(Sprite, // Spriteクラスを継承
{
    initialize: function(x, y) { //初期化する
        Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化
        this.image = game.assets['chara1.png'];
        this.scale(2,2);
        this.x = x;
        this.y = y;
        this.frame = 0;
        game.rootScene.addChild(this);
    },
    //enterframeイベントのリスナーを定義する
    onenterframe: function() {
        var p="";
         if(this.age % 5 === 0){
            p=Math.floor (Math.random () * 30) + 1}
            
        switch(p){
            case 1:
            this.x=Math.floor( Math.random() * 270 );
            this.y=Math.floor( Math.random() * 270 );
            this.frame=0;this.opacity=1;
            break;
        
            case 5:              
            this.x=Math.floor( Math.random() * 270 );
            this.y=Math.floor( Math.random() * 270 );
             this.frame=0;this.opacity=1;
            break;
            
            case 8:              
            this.x=Math.floor( Math.random() * 270 );
            this.y=Math.floor( Math.random() * 270 );
            this.frame=0;this.opacity=1;
            break;           
            
            case 9:              
            this.x=Math.floor( Math.random() * 270 );
            this.y=Math.floor( Math.random() * 270 );
            this.frame=0;this.opacity=1;
            break;
            default:              
            break;
        }
        
        
        
    },
    //touchendイベントのリスナーを定義する
    ontouchend: function() {
        this.frame = 3; //泣く
        score+= 50;
    }
});

window.onload = function() {
    game = new Game(320, 320);
    game.preload('chara1.png');
    game.onload = function() {
        var score ="0";
        bear1 = new Bear(10, 100); // 一人目のクマさん
        bear2 = new Bear(40, 110); // 二人目のクマさん 
        bear3 = new Bear(0, 120); // 三人目のクマさん
    }
    game.start();
}

クマランダム出現
↓
クリック
↓
泣くアクションのまま停止　←今ここ
↓
消える

クリック時のアクションに「this.tl.delay(10)」とか組み込んでもダメだったんですよね。
enterframeで読み込んじゃってるからなー。うーむ。
1・5・8・9が出て消えるの待つしかないっていうね。

ほんとはswitch使う必要ない。どの数字が出る確率も一緒だから。
わかってたけど「連続してると嫌だ」という小学生的なこだわりでifをやめました(笑)
あとswitch文好きなんですよね、なんとなく。

おお？enchant.jsの仕組みって、ActionScriptに似てるかも？

— がちゃまにあ (@gachamania21) 2014, 7月 15

とかも思ってみたりね。