Hatena::ブログ(Diary)

C++でゲームプログラミング

2012-08-17

[][]enchant.js を触ってみた

簡単にですが、ちょっと触ってみました。


[index.html]

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no"> 
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script type="text/javascript" src="enchant.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
</body >
</html>

[main.js]

enchant();

window.onload = function (){
    var window_width  = 240;
    var window_height = 320;
    var game = new Game(window_width, window_height);

    game.fps = 24;
    game.preload("circle.png");
    game.onload = function (){
        var speed = 6;
        var vec_x = 1;
        var vec_y = 1;
        var sprite_width  = 48;
        var sprite_height = 48;

        var ball = new Sprite(sprite_width, sprite_height);
        ball.image = game.assets["circle.png"];
        ball.addEventListener(Event.ENTER_FRAME, function (e){
            ball.x += (vec_x * speed);
            ball.y += (vec_y * speed);
            if( ball.x < 0){
                ball.x = 0;
                vec_x *= -1;
            }
            if( ball.x > (window_width - sprite_width)){
                ball.x = window_width - sprite_width;
                vec_x *= -1;
            }
            if( ball.y < 0){
                ball.y = 0;
                vec_y *= -1;
            }
            if( ball.y > (window_height - sprite_height)){
                ball.y = window_height - sprite_height;
                vec_y *= -1;
            }
        })
        game.rootScene.addChild(ball);
    }
    game.start();
}


[所感]

JavaScript 自体触ったのが初めてで、enchant.js の入門サイトとか見ながらコーディングしていたんですが、思ったよりも戸惑うことなくコードを記述する事が出きましたね。

なんというか、昔ながらのゲームコーディングしているなーって感じで(泥臭いともいう。

スプライト描画もすぐに出きましたし、イベントリスナへの登録→キー入力で処理〜というのも素直な実装が書けますね。

確かにこれはだいぶ敷居が低い気がする。


あとやっぱり enchant.js の導入が思ったよりも簡単でしたね。

enchant.js を同じディレクトリにコピーするだけで簡単に動作することが出きました。


ただ、Vimコーディングしていたんですが、いちいちブラウザで動作確認を行うのが手間でしたね…。

ブラウザでの描画は兎も角、簡単なシンタックスチェックぐらいは Vim 上で確認したいですねー。

(一度、typo でエラーしていたのが全然気づかなかった。

うーん、どうにか出来ないかなーJavaScript 回りの開発環境の知識が足りない。


そんな感じで開発環境はまだまだアレですが、開発自体は思ったよりも簡単って印象でした。

これ、生の JavaScript だとどれぐらいのコード量になるんだろう。

真面目に作るとしてゲーム素材とか探そうかなぁー。


[参照]

http://d.hatena.ne.jp/blankblank/20110522/1306069754