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");
});