phina.jsを使ってみた

とりあえずここを見ながらやってみた

とりあえず試してみたいって方のための phina.js 入門

• phina.jsを選んだ理由としてベンチマークでenchant.jsより速そうだったこと。
• 機能的にも欲しいものが揃っていそうだったこと。
• enchant.jsの本とかも出してた人が作ったっぽいフレームワークだったから。

この辺が理由です。
JavaScriptの記法はド素人レベルなので少々苦戦してますが、数日の成果を貼っておきます。
(と言ってもチュートリアルの組み合わせみたいなものですけど)

phina.globalize();

var ASSETS = {
  image: {
    'night': './night.gif',
    'enemy': './wood.gif',
  },
};

phina.define('MainScene', {
  superClass: 'CanvasScene',

  init: function() {
    this.superInit();

    // プレイヤー
    var player = Sprite('night').addChildTo(this);
    player.x = this.gridX.center();
    player.y = this.gridY.center();
    this.player = player;

    // ラベル
    var label = Label('Hunting').addChildTo(this);
    label.x = this.gridX.center();
    label.y = 30;
    label.fill = 'red';
    label.fontSize = 48;

    // 敵をmonster定義
    this.monster = CanvasElement('enemy').addChildTo(this);
    // 障害物 n 個表示
    (8).times(function() {
        // 敵生成
        var enemy = Sprite('enemy').addChildTo(this.monster);
        // 位置をランダムに設定
        enemy.x = Random.randint(0, 640);
        enemy.y = Random.randint(0, 960);
    }, this),

    // カーソル移動
    this.update = function(app) {
        var keyboard = app.keyboard;

        if(keyboard.getKey('left')) {
            player.x -= 16;
        };
        if(keyboard.getKey('right')) {
            player.x += 16;
        };
        if(keyboard.getKey('up')) {
            player.y -= 16;
        };
        if(keyboard.getKey('down')) {
            player.y += 16;
        };

        // 衝突判定
        this.monster.children.each(function(child) {
            if (this.player.hitTestElement(child)) {
                child.remove();
            };
        }, this);
    };

  },
});

phina.main(function() {
  var app = GameApp({
    startLabel: 'main',
    assets: ASSETS,
  });
  app.run();
});

カーソルでキャラクターを移動させて、敵にあたると消えるというシンプルなものです。
HTML側はphina.jsと上記のJavaScriptを読み込んでいるだけです。

久しぶりに新しいものに触った気がします。
新鮮でしたが記法に疎かったせいか凄い苦戦しました。
phina.jsの本とか出たら買うので誰か書いてください。

開発 JavaScript phina.js