KaBoom-button

在这个button范例 中,其实本质上展示了如何借助现有的方法制作出按钮

创建一个addButton的方法如下:

function addButton(txt, p, f) {
        //传入三个参数,按钮文字txt,按钮的位置,回调的方法
        //创建一个背景色的组件 bg,传入位置参数
        const bg = add([
            pos(p),
            rect(60, 30),
            origin("center"),
            color(1, 1, 1),
        ]);
        //在背景上添加文字
        add([
            text(txt),
            pos(p),
            rect(100, 100),
            origin("center"),
            color(0, 0, 0),
        ]);
        //为背景添加方法
        bg.action(() => {
            //如果bg上有指针悬浮,修改颜色
            if (bg.isHovered()) {
                bg.color = rgb(0.8, 0.8, 0.8);
                //如果指针悬浮 && 鼠标按下,调用f方法
                if (mouseIsClicked()) {
                    f();
                }
            } else {
                //否则修改回原来的颜色
                bg.color = rgb(1, 1, 1);
            }
        });
    }

然后一旦我们有了 'addButton()' 这样的方法 ,我们就可以使用它们创建了按钮啦!

addButton("start", vec2(100, 100), () => {
        alert("oh hi");
});

最后更新于