tmlib.js handson

ゲームを作ろう♪

phi　

自己紹介

避けゲーを作ろう

 

コードを fork しよう

定数とグローバル変数を追加

/*
 * 定数
 */
var SCREEN_WIDTH    = 465;
var SCREEN_HEIGHT   = 465;
var SCREEN_CENTER_X = SCREEN_WIDTH/2;
var SCREEN_CENTER_Y = SCREEN_HEIGHT/2;

/*
 * グローバル変数
 */
var app = null;

tm.main(function() {
    app = tm.app.CanvasApp("#world");
    app.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
    app.fitWindow();
    app.background = "rgba(0, 0, 0, 0.1)";

プレイヤークラスを定義

/*
 * プレイヤー
 */
var Player = tm.createClass({
    superClass: tm.app.TriangleShape,
    // 初期化
    init: function() {
        this.superInit(PLAYER_SIZE, PLAYER_SIZE);
    },
    // 更新
    update: function(app) {
        var p = app.pointing;
        // マウスダウン or タッチ判定
        if (p.getPointing()) {
            // 移動
            this.x += app.pointing.deltaPosition.x*1.25;
            // 画面内制御
            if (this.x < 0) { this.x = 0; }
            else if (this.x > SCREEN_WIDTH) { this.x = SCREEN_WIDTH; }
        }
    }
});

プレイヤーを生成, 表示

tm.main(function() {
    app = tm.app.CanvasApp("#world");
    app.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
    app.fitWindow();
    app.background = "rgba(0, 0, 0, 0.1)";
    
    // プレイヤー
    var player = Player();
    app.currentScene.addChild(player);
    player.x = SCREEN_CENTER_X;
    player.y = SCREEN_HEIGHT-100;
    
    app.currentScene.update = function() {
    };
    
    app.run();
});

実行結果

エネミークラスを定義

/*
 * エネミー
 */
var Enemy = tm.createClass({
    superClass: tm.app.StarShape,
    // 初期化
    init: function() {
        this.superInit(PLAYER_SIZE, PLAYER_SIZE);
    },
    // 更新
    update: function(app) {
        this.y += 8;         // 移動
        this.rotation += 15; // 回転
        // 削除判定
        if (this.y > SCREEN_HEIGHT) {
            this.remove();
            enemyList.erase(this);
        }
    }
});

エネミークラスを生成, 表示

/*
 * グローバル変数
 */
var app = null;
var enemyList = null;

main 関数内の update 処理で

エネミーを生成, シーンに追加する

    // エネミーリスト
    enemyList  = [];
    
    // 更新
    app.currentScene.update = function(app) {
        // エネミー生成
        if (app.frame % 8 == 0) {
            // エネミー
            var enemy = Enemy();
            enemy.x = tm.util.Random.randint(0, SCREEN_WIDTH);
            enemy.y = -50;
            app.currentScene.addChild(enemy);  // シーンに追加
            enemyList.push(enemy);             // リストに追加
        }
    }

実行結果

プレイヤーとエネミーの衝突判定

    // 更新
    app.currentScene.update = function(app) {
        // エネミー生成
        ...省略...
        
        // プレイヤー, エネミー衝突判定
        for (var i=0,len=enemyList.length; i<len; ++i) {
            var enemy = enemyList[i];
            // 衝突判定
            if (player.isHitElement(enemy)) {
                // Game Over
                alert("game over! score: {0}".format(app.frame));
                app.stop();
            }
        }
    }

実行確認

タイトルを設定

完成!!

ありがとうございます