4

私はJavaScriptを学んでいます（Windows 8 UI用のゲームを作成しようとしています）。

そして、これは私のeaseljsのボタンですが、このコードも（あまりにも）醜いと思います。ボタンは、すべてのボタン状態の 1 つの 3x テクスチャを使用して、mouseEvents でテクスチャを変更する必要があります。

この目的のための他の解決策はありますか？

使用:

btn_newgame = new my_controls.Button("button.png", "New Game", "30px sans-serif");
btn_newgame.set_position("center", 300);
btn_newgame.click = function (event) { console.log('newgame click'); };

ボタンコード:

(function () {

Button.prototype = new createjs.Container();
Button.prototype.constructor = Button;

function Button(source_img, text, font, font_color) {
    this.initialize();
    this.mouseEventsEnabled = true;

    this.set_scale = set_scale;
    this.set_position = set_position;


    text = text || "";
    font = font || "12px sans-serif";
    font_color = font_color || "black";



    this.img_bitmap = new createjs.Bitmap(source_img)
    this.btn_text = new createjs.Text(text, font, font_color);
    this.btn_text.x = source_img.naturalWidth / 2 - this.btn_text.getMeasuredWidth() / 2;
    this.btn_text.y = this.btn_text.getMeasuredHeight() / 8;

    this.addChild(this.img_bitmap);
    this.addChild(this.btn_text);

    this.width = source_img.naturalWidth,
    this.height = source_img.naturalHeight / 4;


    // for different states = different pieces of one texture.
    this.states = {
        out: new createjs.Rectangle(0, 0, this.width, this.height),
        over: new createjs.Rectangle(0, this.height, this.width, this.height),
        down: new createjs.Rectangle(0, this.height * 2, this.width, this.height)
    };

    this.img_bitmap.sourceRect = this.states['out'];


    this.press;
    this.over;
    this.out;
    this.click;

    this.onPress = onPress;
    this.onMouseOver = onMouseOver;
    this.onMouseOut = onMouseOut;
    this.onClick = onClick;

}

function set_scale (scale_x, scale_y) {
    this.scaleX = scale_x || 1;
    this.scaleY = scale_y || 1;
}


function set_position (posX, posY) {

    posX = posX || 0;
    posY = posY || 0;


    if (typeof posX == "number") {
        this.x = posX;
    }
    else {
        switch (posX) {
            case "center":
                this.x = canvas.width / 2 - Math.floor(this.width / 2 * this.scaleX);
                break;
            case "left":
                this.x = 0;
                break;
            case "right":
                this.x = canvas.width - Math.floor(this.width * this.scaleX);
                break;
            default:
                this.x = 0;
        }
    }

    if (typeof posY == "number") {
        this.y = posY;
    }
    else {
        switch (posY) {
            case "center":
                this.y = canvas.height / 2 - Math.floor(this.height / 2 * this.scaleY);
                break;
            case "top":
                this.y = 0;
                break;
            case "bottom":
                this.y = canvas.height - Math.floor(this.height * this.scaleY);
                break;
            default:
                this.y = 0;
        }
    }
}



function onPress (event) {
    this.img_bitmap.sourceRect = this.states['down'];
    this.btn_text.x += 1;
    this.btn_text.y += 1;
    if (this.press)
        this.press(event);
}

function onMouseOver (event) {
    this.img_bitmap.sourceRect = this.states['over'];
    this.last_state = 'over';
    if (this.over)
        this.over(event);
}

function onMouseOut (event) {
    this.img_bitmap.sourceRect = this.states['out'];
    this.last_state = 'out';
    if (this.out)
        this.out(event);
}

function onClick (event) {
    this.img_bitmap.sourceRect = this.states['over'];
    this.btn_text.x -= 1;
    this.btn_text.y -= 1;
    if (this.click)
        this.click(event);
}

my_controls.Button = Button;
})(my_controls); // Button
4

1 に答える 1

0

オブジェクトのプロトタイピングは非常に良い方法ですが、これを完全に避けたい場合は、DOM ボタンを追加して UI の一部として配置するか、DOM を使用して完全に UI を作成することができます。

関連する質問: キャンバス内に HTML ボタンを配置できますか?

万歳、シャローム

于 2013-09-13T18:24:26.547 に答える