4

我只是在学习 javascript（尝试为 windows 8 ui 创建游戏）。

这是我在画架上的按钮，但我认为这段代码也（太）丑陋了。按钮必须使用所有按钮状态的一个 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

Prototyping the object is a pretty good way to do it, but if you want to avoid this completely you could just add DOM buttons and position them to be part of your UI or create the UI entirely in using DOM.

Related Question: Can I put an HTML button inside the canvas?

All the best, Shalom

于 2013-09-13T18:24:26.547 回答