# Phaser3 container 容器事件绑定
container 用作包围、佷容器
通常用于游戏对象批量、整体处理
比如位移、旋转等操作
一般不会直接绑定事件
但由于本身提供了 setInteractive 方法
用于开启事件监听能力
所以也是可以绑定事件的
先看下官方的例子
通过添加一个响应区域容器及对应的回调实现事件绑定
// 点击区域偏移通过修改 Rectangle 的 x、y 坐标处理
// container 容器会随着发生位移
let rect = new Phaser.Geom.Rectangle(100, 100, 300, 300)
this.add
.container()
.setInteractive(rect, Phaser.Geom.Rectangle.Contains)
.on('pointerdown', () => {
console.log('clicked')
})
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
这显得有点啰嗦
更简洁一点的做法
通过 setSize 设置事件响应内置宽高
由于 container 默认原点是中心点
而且不能通过 setOrigin 设置原点（锚点）坐标
所以要实现 300x300 点击区域大小
要将 container 容器向右、向下移动 300 的 1/2
即 150 距离
this.add
.container(300 / 2, 300 / 2)
.setSize(300, 300)
.setInteractive()
.on('pointerdown', () => {
console.log('clicked')
})
1
2
3
4
5
6
7
2
3
4
5
6
7
这个好处在于不用绑定额外的事件响应区域
缺点在于需要明确容器尺寸大小
# 优质搜罗
# HTML 骚操作
前端开发中会有一些不为人所熟知的特性
比如 ol 元素 start 属性设置起始索引
mark 标签的文本高亮
更多 HTML 特性详见 (opens new window)
# 几个不错的 JS 操作
1.向下取整
// 通常
Math.floor(1.2) // 1
// 可用按位非操作符
~~1.2 // 1
1
2
3
4
5
2
3
4
5
2.指数数字
// 表示 10000
1e4 // 10000
1
2
2
3.数组 indexOf 优雅地判断
var arr = [1, 2, 3, 4]
// 判断数组中是否存在 2 元素
if (arr.indexOf(2) > -1) {
// 存在 ...
}
if (arr.indexOf(2) === -1) {
// 不存在...
}
// 使用按位非处理
// 结果 > -1 时
// 处理后结果为负数，负数为真值，即当成 true 看待
if (~arr.indexOf(2)) {
// 存在...
}
// 如果值为 -1 时
// 按位非处理后为 0
// 取反，结果为 true
if (!~arr.indexOf(2)) {
// 不存在
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
4.判断奇偶
- 奇数 & 1 // 1
- 偶数 & 1 // 0
13 & 1 // 结果为 1，表示 13 为奇数
10 & 1 // 结果为 0，表示 10 为偶数
1
2
3
2
3
# 聊点别的
15 老款的 Mac 换了个电池
官方线下店与自己换价格相差了几倍
比如，自换的 280 块
到线下店可能是 8、9 百块
多出来的钱买点好吃的不行嘛
而且换电池
也不是啥有技术含量的活
配上说明书
过程甚是丝滑
记得一定要买解胶水
要不拆电池的过程就让你怀疑到底做错了啥
扫一扫，微信中打开
