如何实现一个词云 (5)

处理后的单词对象如下:

const word = { w: number; // 宽 h: number; // 高 x0: number; // x左边界偏移量,<= 0 x1: number; // x右边界偏移量,>= 0 y0: number; // y上边界偏移量,<= 0 y1: number; // y下边界偏移量,>= 0 sprite: number[]; // 单词的像素占用信息,数组长度为w * h / 32 x: number; // 绘制坐标 y: number; // 绘制坐标 } 碰撞检测的偏移处理 碰撞检测计算

有了单词的sprite信息后,就可以使用它与board进行碰撞检测了。

这里要注意的是,现在存在两个单位概念。

真实画布的单位,即像素

通过布局函数获取的文字绘制坐标以像素为单位。

用于存储的最小单位,即一个整数,记录32个像素

在计算单词是否重叠时是以整数为最小单位进行运算。在判断两个整数单位中是否有像素点重叠时,只需将两个整数进行"与"运算,如结果为1,则说明重叠了,如结果为0,则说明没有重叠。

在进行碰撞检测时,通常需要对整数进行位运算来达到判断重叠和获取特定数值的操作。

位运算基本知识

接下来可能要用到一些简单的位运算知识~先来复习一下吧

假设我们有两个二进制数A和B,0b为二进制前缀

A = 0b1001 B = 0b0011 按位与(&)

对每一位执行"与"操作,对应位置都为1时,结果才为1,否则为0。

与操作可用于进行像素对比。

如何实现一个词云

按位或(|)

对每一位执行"或"操作,对应位置有一个都为0时,结果为0,否则为1。

或操作可以用于将两个整数合成一个。

如何实现一个词云

左移运算符(<<)

各二进位全部左移若干位,高位丢弃,低位补0

如何实现一个词云

右移运算符(>>)

各二进位全部右移若干位,对无符号数,高位补0。

左移与右移可用于截取左边或右边的部分值。

如何实现一个词云

上述的碰撞检测中,是假设是像素为单位进行计算的,在像素为单位的情况下,只需在board中找到

词汇碰撞检测的通用处理

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgjjpy.html