Forked from: phi's enchant.js - アナログパッドを使って Sprite を移動させてみよう View Diff (237)

enchant.js - ボタンを配置してみよう

phi

2012-03-30 03:18:35

License: MIT License

Fork: 21

Fav: 1

View: 11475

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 232 lines
HTML 1 lines
CSS 1 lines

enchant.js - ボタンを配置してみよう
KeyEx
ui.enchant.js
enchant.js v0.4.0

/**
 *  最新の ui.enchant.js では定義されています.
 */

/**
 * ボタンオブジェクトのクラス: Button
 * @scope enchant.ui.Button.prototype
 */
enchant.ui.Button = enchant.Class.create(enchant.Entity, {
    /**
     * ボタンオブジェクトを作成する。
     * @constructs
     * @extends enchant.Entity
     */
    initialize: function(text, theme, height, width) {
        enchant.Entity.call(this);
        
        // ベンタプレフィクスを判定
        this.VENDOR_PREFIX = (function() {
            var ua = navigator.userAgent;
            if (ua.indexOf('Opera') != -1) {
                return '-O-';
            } else if (ua.indexOf('MSIE') != -1) {
                return '-ms-';
            } else if (ua.indexOf('WebKit') != -1) {
                return '-webkit-';
            } else if (navigator.product == 'Gecko') {
                return '-Moz-';
            } else {
                return '';
            }
        })();

this.width = width || null;
        this.height = height || null;
        this.text = text;
        this.pressed = false;

// デフォルトのスタイル (テーマで上書き可能)
        var style = this._element.style;
        style["display"]          = "inline-block";
        style["font-size"]        = "12px";
        style["height"]           = "2em";
        style["line-height"]      = "2em";
        style["min-width"]        = "2em";
        style["padding"]          = "2px 10px";
        style["text-align"]       = "center";
        style["font-weight"]      = "bold";
        style[this.VENDOR_PREFIX + "border-radius"] = "0.5em";

// テーマの指定がなければ "dark" を使う
        theme = theme || "dark";

if(typeof theme === "string"){
            // theme 引数が string なら、その名前のデフォルトテーマを使う
            this.theme = enchant.ui.Button.DEFAULT_THEME[theme];
        }else{
            // theme 引数が object なら、その引数をテーマとして扱う
            this.theme = theme;
        }

// テーマを適用する
        this._applyTheme(this.theme.normal);

// タッチしたときの挙動
        this.addEventListener("touchstart", function(){
            this._applyTheme(this.theme.active);
            this.pressed = true;
            this.y ++;
        });

// タッチが離されたときの挙動
        this.addEventListener("touchend", function(){
            this._applyTheme(this.theme.normal);
            this.pressed = false;
            this.y --;
        });
    },
    _applyTheme: function(theme){
        var style = this._element.style;
        for(var i in theme) if(theme.hasOwnProperty(i)){
            var prop = i.replace(/\-VENDOR\-/, this.VENDOR_PREFIX);
            style[prop] = theme[i].replace(/\-VENDOR\-/, this.VENDOR_PREFIX);
            console.log("apply theme",i,":",theme[i]);
            console.log("# vendor prefix replaced : ",prop,":", theme[i].replace(/\-VENDOR\-/, this.VENDOR_PREFIX));
        }
    },
    /**
     * 表示するテキスト
     * @type {String}
     */
    text: {
        get: function() {
            return this._element.innerHTML;
        },
        set: function(text) {
            this._element.innerHTML = text;
        }
    },
    /**
     * フォントサイズ
     */
    size: {
        get: function() {
            return this._element.style["fontSize"];
        },
        set: function(size){
            this._element.style["fontSize"] = size;
        }
    },
    /**
     * フォントの指定
     * @type {String}
     */
    font: {
        get: function() {
            return this._style.font;
        },
        set: function(font) {
            this._style.font = font;
        }
    },
    /**
     * Text color settings.
     * CSS��'color' Can be set to same format as properties.
     * @type {String}
     */
    color: {
        get: function() {
            return this._style.color;
        },
        set: function(color) {
            this._style.color = color;
        }
    }
});

enchant.ui.Button.DEFAULT_THEME = {
    dark:
    {
        normal: {
            "background-image" : "-VENDOR-linear-gradient(#666, #333)",
            "color" : "#fff",
            "border" : "#333 1px solid",
            "text-shadow" : "0 1px 0 #666",
            "-VENDOR-box-shadow" : "0 1px 0 rgba(0,0,0,.8), 0 2px 0 rgba(255,255,255,.3)"
        },
        active: {
            "background-image" : "-VENDOR-linear-gradient(#333, #000)",
            "color" : "#ccc",
            "border" : "#333 1px solid",
            "text-shadow" : "0 1px 0 #000",
            "-VENDOR-box-shadow" : "0 1px 0 rgba(255,255,255,.3)"
        }
    },
    light:
    {
        normal: {
            "background-image" : "-VENDOR-linear-gradient(#fff, #ccc)",
            "color" : "#333",
            "border" : "#999 1px solid",
            "text-shadow" : "0 1px 0 #fff",
            "-VENDOR-box-shadow" : "0 1px 0 rgba(0,0,0,1), 0 2px 0 rgba(255,255,255,.2)"
        },
        active: {
            "background-image" : "-VENDOR-linear-gradient(#ccc, #999)",
            "color" : "#333",
            "border" : "#666 1px solid",
            "text-shadow" : "0 1px 0 #ccc",
            "-VENDOR-box-shadow" : "0 1px 0 rgba(255,255,255,.3)"
        }
    },
    blue:
    {
        normal: {
            "background-image" : "-VENDOR-linear-gradient(#04f, #04c)",
            "color" : "#fff",
            "border" : "#026 1px solid",
            "text-shadow" : "0 1px 0 #666",
            "-VENDOR-box-shadow" : "0 1px 0 rgba(0,0,0,.5), 0 2px 0 rgba(255,255,255,0.2)"
        },
        active: {
            "background-image" : "-VENDOR-linear-gradient(#029, #026)",
            "color" : "#ccc",
            "border" : "#026 1px solid",
            "text-shadow" : "0 1px 0 #000",
            "-VENDOR-box-shadow" : "none"
        }
    }
};

// おまじない(using namespace enchant)
enchant();

/**
 *    メイン
 */
window.onload = function() {
    var game = new Game();
    
    game.onload = function() {
	var scene = game.rootScene;
	
	// デフォルト(ダーク)
	var button = new Button("Default Button");
	button.moveTo(10, 10);
	button.ontouchstart = function() { scene.backgroundColor = "red" };
	scene.addChild(button);
	// ライト
	var lightButton = new Button("Light Button", "light");
	lightButton.moveTo(10, 50);
	lightButton.ontouchstart = function() { scene.backgroundColor = "green" };
	scene.addChild(lightButton);
	// ブルー
	var blueButton = new Button("Blue Button", "blue");
	blueButton.moveTo(10, 90);
	blueButton.ontouchstart = function() { scene.backgroundColor = "blue" };
	scene.addChild(blueButton);
    };
    
    game.start();
};

enchant.js - ボタンを配置してみよう

// forked from phi's "enchant.js - アナログパッドを使って Sprite を移動させてみよう" http://jsdo.it/phi/aLnH // forked from phi's "enchant.js - バーチャルパッドを使って Sprite を移動させてみよう" http://jsdo.it/phi/8mfK // forked from phi's "enchant.js - 移動する Sprite を画面外に出ないよう制御してみよう" http://jsdo.it/phi/kb7Y // forked from phi's "enchant.js - キーボードに応じて Sprite を移動させてみよう" http://jsdo.it/phi/ppsF // forked from phi's "enchant.js - Sprite を表示しよう" http://jsdo.it/phi/kAKa // forked from phi's "enchant.js - Entity を生成してSceneに追加しよう" http://jsdo.it/phi/tlgU // forked from phi's "enchant.js のテンプレートを用意しよう" http://jsdo.it/phi/isoa /** * 最新の ui.enchant.js では定義されています. */ /** * ボタンオブジェクトのクラス: Button * @scope enchant.ui.Button.prototype */ enchant.ui.Button = enchant.Class.create(enchant.Entity, { /** * ボタンオブジェクトを作成する。 * @constructs * @extends enchant.Entity */ initialize: function(text, theme, height, width) { enchant.Entity.call(this); // ベンタプレフィクスを判定 this.VENDOR_PREFIX = (function() { var ua = navigator.userAgent; if (ua.indexOf('Opera') != -1) { return '-O-'; } else if (ua.indexOf('MSIE') != -1) { return '-ms-'; } else if (ua.indexOf('WebKit') != -1) { return '-webkit-'; } else if (navigator.product == 'Gecko') { return '-Moz-'; } else { return ''; } })(); this.width = width || null; this.height = height || null; this.text = text; this.pressed = false; // デフォルトのスタイル (テーマで上書き可能) var style = this._element.style; style["display"] = "inline-block"; style["font-size"] = "12px"; style["height"] = "2em"; style["line-height"] = "2em"; style["min-width"] = "2em"; style["padding"] = "2px 10px"; style["text-align"] = "center"; style["font-weight"] = "bold"; style[this.VENDOR_PREFIX + "border-radius"] = "0.5em"; // テーマの指定がなければ "dark" を使う theme = theme || "dark"; if(typeof theme === "string"){ // theme 引数が string なら、その名前のデフォルトテーマを使う this.theme = enchant.ui.Button.DEFAULT_THEME[theme]; }else{ // theme 引数が object なら、その引数をテーマとして扱う this.theme = theme; } // テーマを適用する this._applyTheme(this.theme.normal); // タッチしたときの挙動 this.addEventListener("touchstart", function(){ this._applyTheme(this.theme.active); this.pressed = true; this.y ++; }); // タッチが離されたときの挙動 this.addEventListener("touchend", function(){ this._applyTheme(this.theme.normal); this.pressed = false; this.y --; }); }, _applyTheme: function(theme){ var style = this._element.style; for(var i in theme) if(theme.hasOwnProperty(i)){ var prop = i.replace(/\-VENDOR\-/, this.VENDOR_PREFIX); style[prop] = theme[i].replace(/\-VENDOR\-/, this.VENDOR_PREFIX); console.log("apply theme",i,":",theme[i]); console.log("# vendor prefix replaced : ",prop,":", theme[i].replace(/\-VENDOR\-/, this.VENDOR_PREFIX)); } }, /** * 表示するテキスト * @type {String} */ text: { get: function() { return this._element.innerHTML; }, set: function(text) { this._element.innerHTML = text; } }, /** * フォントサイズ */ size: { get: function() { return this._element.style["fontSize"]; }, set: function(size){ this._element.style["fontSize"] = size; } }, /** * フォントの指定 * @type {String} */ font: { get: function() { return this._style.font; }, set: function(font) { this._style.font = font; } }, /** * Text color settings. * CSS��'color' Can be set to same format as properties. * @type {String} */ color: { get: function() { return this._style.color; }, set: function(color) { this._style.color = color; } } }); enchant.ui.Button.DEFAULT_THEME = { dark: { normal: { "background-image" : "-VENDOR-linear-gradient(#666, #333)", "color" : "#fff", "border" : "#333 1px solid", "text-shadow" : "0 1px 0 #666", "-VENDOR-box-shadow" : "0 1px 0 rgba(0,0,0,.8), 0 2px 0 rgba(255,255,255,.3)" }, active: { "background-image" : "-VENDOR-linear-gradient(#333, #000)", "color" : "#ccc", "border" : "#333 1px solid", "text-shadow" : "0 1px 0 #000", "-VENDOR-box-shadow" : "0 1px 0 rgba(255,255,255,.3)" } }, light: { normal: { "background-image" : "-VENDOR-linear-gradient(#fff, #ccc)", "color" : "#333", "border" : "#999 1px solid", "text-shadow" : "0 1px 0 #fff", "-VENDOR-box-shadow" : "0 1px 0 rgba(0,0,0,1), 0 2px 0 rgba(255,255,255,.2)" }, active: { "background-image" : "-VENDOR-linear-gradient(#ccc, #999)", "color" : "#333", "border" : "#666 1px solid", "text-shadow" : "0 1px 0 #ccc", "-VENDOR-box-shadow" : "0 1px 0 rgba(255,255,255,.3)" } }, blue: { normal: { "background-image" : "-VENDOR-linear-gradient(#04f, #04c)", "color" : "#fff", "border" : "#026 1px solid", "text-shadow" : "0 1px 0 #666", "-VENDOR-box-shadow" : "0 1px 0 rgba(0,0,0,.5), 0 2px 0 rgba(255,255,255,0.2)" }, active: { "background-image" : "-VENDOR-linear-gradient(#029, #026)", "color" : "#ccc", "border" : "#026 1px solid", "text-shadow" : "0 1px 0 #000", "-VENDOR-box-shadow" : "none" } } }; // おまじない(using namespace enchant) enchant(); /** * メイン */ window.onload = function() { var game = new Game(); game.onload = function() { var scene = game.rootScene; // デフォルト(ダーク) var button = new Button("Default Button"); button.moveTo(10, 10); button.ontouchstart = function() { scene.backgroundColor = "red" }; scene.addChild(button); // ライト var lightButton = new Button("Light Button", "light"); lightButton.moveTo(10, 50); lightButton.ontouchstart = function() { scene.backgroundColor = "green" }; scene.addChild(lightButton); // ブルー var blueButton = new Button("Blue Button", "blue"); blueButton.moveTo(10, 90); blueButton.ontouchstart = function() { scene.backgroundColor = "blue" }; scene.addChild(blueButton); }; game.start(); }; <canvas id='world'></canvas>body { background-color: #DDDDDD; font: 30px sans-serif; margin:0px; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

phi

ゲームプログラマやりながら執筆してる24歳. tmlib.js というライブラリ作ってます. 著書「enchant.js スマートフォンゲーム開発講座」『日本国民全員プログラマ化計画』進行中 Math/JavaScript/HTML5/CSS3/Python/C/C++/C#/Java/ももクロ

Blog http://tmlife.net

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/mGaG/js"></script>

QR Code

Discussion

Questions on this code?

Favorite by

hama187

Forked

sort by

forked: enchant.js - ボタンを配置してみ

0kohe1

233/1/1

forked: enchant.js - ボタンを配置してみ

konpo

233/1/1

ガチャ：fork

konpo

234/1/1

forked: enchant.js - ボタンを配置してみ

konpo

233/1/1

enchant.js - ボタンを配置してみよう

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Tweet

Twitter

Discussion

Tags

Favorite by

Forked