技術文章＞ その他

　

tmlib.js 入門
- スライドパズルが簡単にできちゃった -
Nobuhide Tsuda
21-Apr-2013
Follow @vivisuke Tweet

概要

ステップ・バイ・ステップ

クロイガメン様

HTML部分: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Sliding Block Puzzle</title>
    <!-- tmlib.js をgithub からインクルード、もちろんローカルに置いてもよい -->
    <script src="http://rawgithub.com/phi-jp/tmlib.js/0.2.0/build/tmlib.js"></script>
    <script src="main-0010.js"></script>    <!-- プログラム本体 -->
</head>
<body>
    <canvas id="world" width="640" height="480"></canvas>    <!-- クロイガメン様表示部分 -->
</body>
</html>

JavaScript 部分: 

tm.main(function() {
    var app = tm.app.CanvasApp("#world");   // アプリケーション作成
    app.background = "rgba(0, 0, 0, 0.1)";  // 背景色をセット
    app.run();  // 実行
});

演習問題：

  1. 背景色を "yellow" などに変えてみなさい
  2. app.run(); 行をコメントアウトすると何が起こるか試してみなさい
  3. 上記の結果から何が推測されるかを考えなさい
  4. enchant.js などの他の JavaScript ゲームフレームワークの最小限の記述と比較しなさい

    5. 参照：無料で使えるHTML5 JavaScriptゲームエンジンまとめ

Hello, World

tm.main(function() {
    var app = tm.app.CanvasApp("#world");   // アプリケーション作成
    app.background = "darkgreen";  // 背景色をセット

    var label = tm.app.Label("Hello, world!");  //  ラベルオブジェクト生成
    label.x = 320-100;              // 位置をセット
    label.y = 240;
    label.width = 200;          // 幅をセット
    app.currentScene.addChild(label);   // シーンに追加

    app.run();  // 実行
});

図形をマウス位置に表示

tm.main(function() {
    var app = tm.app.CanvasApp("#world");   // アプリケーション作成
    app.background = "rgba(0, 0, 0, 0.1)";  // 背景色をセット

    var star = tm.app.Shape(64, 64);    // Shape オブジェクト生成
    star.canvas.setColorStyle("blue", "yellow");    //  ペン、ブラシ色設定
    star.canvas.fillStar(32, 32, 32, 5);    //  ★描画。引数：サイズ、半径、頂点数
    app.currentScene.addChild(star);    // シーンに追加

    app.currentScene.update = function(app) {
        star.x = app.pointing.x;    // マウス位置 or タッチ位置に移動
        star.y = app.pointing.y;
    }

    app.run();  // 実行
});

演習問題：

  1. app.background = "gray"; のように色指定するとどうなるか試しなさい
  2. app.background 指定を削除するとどうなるか試しなさい
  3. app.background = "transparent"; 指定するとどうなるか試しなさい
  4. ★ではなく、矩形（fillRect）・円（fillCircle）などを描いてみなさい
  5. 以上から画面更新がどのように行われているかを推測しなさい

水平に動くブロックを表示

tm.main(function() {
    var app = tm.app.CanvasApp("#world");   // アプリケーション作成
    app.background = "lightgray";  // 背景色をセット

    var WD = 128;
    var HT = 64;
    var R = HT/8;
    var block = tm.app.Shape(WD, HT);   // ブロック
    block.canvas.setColorStyle("black", "lightyellow");
    block.canvas.fillRoundRect(0, 0, WD, HT, R);
    block.canvas.strokeRoundRect(0, 0, WD, HT, R);
    block.y = 100;
    block.y = 240;
    app.currentScene.addChild(block);    // シーンに追加

    app.currentScene.update = function(app) {
        block.x = app.pointing.x;
    }

    app.run();  // 実行
});

演習問題：

  1. ブロックを水平ではなく、垂直にのみ移動するよう修正しなさい

ドラッグ中のみ水平移動

tm.main(function() {
    var target = null;  //  ドラッグ中オブジェクト
    .....
    app.currentScene.update = function(app) {
        if( app.pointing.getPointingStart() ) {
            //  マウスボタンプレス
            target = null;
            if( block.isHitPointRect(app.pointing.x, app.pointing.y) )
                target = block;
        }
        if( app.pointing.getPointingEnd() ) {
            //  マウスボタンリリース
            target = null;
        }
        if( target != null )
            target.x = app.pointing.x;
    }

    app.run();  // 実行
});

演習問題：

  1. このコードではブロックの端のあたりをクリックすると、そこが中心位置になるよう移動してしまうという問題がある。 この問題を対処しなさい
  2. ブロックを垂直方向または水平方向にドラッグ移動できるようにしなさい

複数ブロック対応

tm.main(function() {
    var target = null;  //  ドラッグ中オブジェクト
    var blocks = [];    //  ブロックリスト
    var app = tm.app.CanvasApp("#world");   // アプリケーション作成
    app.background = "lightgray";  // 背景色をセット

    var WD = 128;
    var HT = 64;
    var R = HT/8;
    for(var y = 140; y <= 340; y += 100) {
        var block = tm.app.Shape(WD, HT);   //  ブロック生成
        block.canvas.setColorStyle("black", "lightyellow");
        block.canvas.fillRoundRect(0, 0, WD, HT, R);
        block.canvas.strokeRoundRect(0, 0, WD, HT, R);
        block.x = 100;
        block.y = y;
        app.currentScene.addChild(block);    // シーンに追加
        blocks.push(block);
    }

    app.currentScene.update = function(app) {
        if( app.pointing.getPointingStart() ) {
            //  マウスボタンクリック
            target = null;
            for(var i = 0; i < blocks.length; ++i) {
                if( blocks[i].isHitPointRect(app.pointing.x, app.pointing.y) )
                    target = blocks[i];
            }
        }
        if( app.pointing.getPointingEnd() ) {
            //  マウスボタンリリース
            target = null;
        }
        if( target != null )
            target.x = app.pointing.x;
    }

    app.run();  // 実行
});

プレイ可能な版

まとめ