《高阶前端指北》之写一个九宫格拼图小插件(上册)

1,867 阅读4分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第3天,点击查看活动详情

话说我们上次搞了一个比较牛X的插件构建脚手架,这次就好好测测到底有多牛。之前团队学习写过一个小案例,比较典型,这里拿出来给大家分享。

构思逻辑

这里引用一句哲学:人类根本就无法想象没见过的东西!人类对未来事物的所有预测都是基于已经出现的科学技术或者已经出现的事物,哪怕再天马行空的想象,也无法脱离既有的事物和理论基础

对于多数开发者来说,对于哪些未曾见过或未曾涉及的领域总是感到棘手。其实,这是人之本性。但高阶的开发者们总有自己的小诀窍,使他们总是拥有解决棘手项目的能力。

作为高阶开发者首先要学会构思,就好比盖楼一样,学会先画图纸。我们先思考他完整的样子,拥有什么功能,具备什么能力,甚至布局。如果脑子里面没思路,我也分享你一个小技巧,多去查找一些类似案例,然后按照我下面的剖析方法沉淀经验。
下面请跟着我的思路一起构思九宫格拼图游戏的项目。

Layout

首先我们需要生成一个容器,并划分3*3的格子组合成9宫格,传入图片绘制成背景图。我们可以通过背景图定位的方式显示对应的模块。
图片分成格子的方法:

//将图片分成格子
this.widthUnit = width / col; //容器宽度/3=每个格子的长度
this.heightUnit = height / row;  //容器高度/3=每个格子的高度
const div = document.createElement('div')
// ** 这一步就实现了图片分割 **
div.style.backgroundPosition = `-${x * this.widthUnit}px -${y * this.heightUnit}px`

然后通过定位的方式,创建容器内的9个格子,我们设置最后一个8号为缺口格子,即隐藏格

坐标

复杂的来了,如何实现拼图?

首先,利用我们小学知识“坐标系”的形式标记格子。横向为x轴,纵向为y轴,那么下面的格子被标记为了

//格子标记形式
const position = [[0,0],[1,0],[2,0],[0,1],[1,1],[2,1],[2,0]...];
//那么如果想要找某个格子就简单了
number4 = position[4] //[1,1]

这样,格子与空间就产生了关联。由上可推导出,格子在x和y轴上行走的距离:

left  =  x * 格子边长
right =  y * 格子边长

定位

然后我们给格子们安排位置,因为每个格子的宽度就等于imgWidth/col

//获取格子初始化位置然后赋值
private async setBlockItemPosition(ele: HTMLElement, index: number) {
  const [x, y] = this.getCoordinateByIndex(index) //取某个格子的空间位置
  ele.style.left = `${x * this.widthUnit}px`
  ele.style.top = `${y * this.heightUnit}px`
}

距离

接下来,要计算一下格子之间的相互距离。从记忆深处可得坐标系两点之间的距离公式

// 两坐标点之间的距离 = |x1-x2|+|y1-y2|
private getCoordDistance(a: [number, number], b: [number, number]): number {
  const [x1, y1] = a
  const [x2, y2] = b
  return Math.abs(x1 - x2) + Math.abs(y1 - y2)
}

image.png

移动

重点来了,格子是怎么移动的呢?这里需要各位思考,其实移动的方法有很多,就看你能想到哪一种最丝滑。

我们需要判断格子是否能够移动?刚才提到8号格子是隐藏格,那么可以推导出,如果点击的格子距8号格子的距离为1则表示可以移动,即可以与8号交换位置。 其实这里8号并不是真的隐藏,只是opacity=0而已。下面我们来判断是否可移动:

// getHideIndex为获取隐藏格子索引的函数
private canMove(index: number): boolean {
  const distance = this.getCoordDistance(
    this.getCoordinateByIndex(this.getHideIndex()),
    this.getCoordinateByIndex(index)
    )
  return distance === 1
}

到此,整个九宫格游戏的核心逻辑已完成。复杂吗?不复杂!!!

总结

手绘图,手打字,纯原创,摘自未发布的书籍:《高阶前端指北》,转载请注明出处。

本章节,我们学习了,如何将一个九宫格拼图的需求一步步转化为通俗易懂的关键点。然后再逐个击破。
在平时工作中难免会遇到很多自己不熟悉领域的需求,乍一听不靠谱、无思路、没见过、难实现。其实,当你按照我的方法逐个拆解时会发现,没有什么需求是无法实现的,有的只是复不复杂问题。
下节课给大家分享,如何快速封装成一个支持多框架,纯ts的插件。

闲着没事的朋友可以我,点个赞评个论收个藏关个注