羊了个羊 - 后台管理系统

胖小了个花
279 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

是的你没猜错，这个管理系统，是给有些🐶策划用的。

国庆在家无聊，用尽洪荒之力，终于过关一次羊了个羊，百无聊赖的，就换位思考了下，如果是我，平时怎么维护羊了个羊的卡片顺序的？

玩过的都应该知道，每次图案是随机的，但是层叠关系是一致的。所以这次主要关注层叠关系，我们来看一看如何做一个“可视化的 容易操作的 后台管理系统”。

效果展示

main_manager.gif

体验地址 bigflowerfat.gitee.io/count-count

交互

  1. 背景是一个网格，鼠标悬浮后，显示红框，表示卡片添加的位置
  2. 点击后添加卡片
  3. 被遮挡的卡片变为灰色
  4. 导出，给游戏界面使用

最开始准备做成室内地图的样子，左侧是一个层数的列表，点哪层，可以在哪层添加卡片。

image.png

但实际操作下来，来回切图层太费劲了。 还是直接点的好

代码梗概

如何画网格

利用背景渐变

.grid-line {
  border-left: 1px solid gray;
  border-top: 1px solid gray;
  background: -webkit-linear-gradient(top, transparent 70, gray 70),
              -webkit-linear-gradient(left, transparent 70, gray 70);
  background-size: 70 70;
}

鼠标悬浮，显示红框

image.png

通过 mouseove 事件，监听鼠标的 x, y，除以步进值，得到红框当前属于的序号，上图中，xIndex = 3, yIndex = 3

// 修正悬浮框的位置 index
let xIndex = parseInt((e.x - relativeX) / STEP_X);
if (xIndex > CARD_ROW * 2 - 2) xIndex = CARD_ROW * 2 - 2;
let yIndex = parseInt((e.y - relativeY) / STEP_Y);
if (yIndex > CARD_COLUMN * 2 - 2) yIndex = CARD_COLUMN * 2 - 2;
// 拿到最终悬浮框的偏移量
mouseOverPosition.value[0] = xIndex * STEP_X;
mouseOverPosition.value[1] = yIndex * STEP_Y;

点击后添加卡片

因为卡片有个层叠关系，所以当添加卡片的时候，需要计算出待添加卡片的层级。 换句话说，

  • 如果没有覆盖别的卡片，则待添加卡片为最初的 1 级
  • 如果覆盖了其他卡片，则获取被覆盖卡片的最大层级 m，m+1就是待添加卡片的层级

image.png

例如上图中，

  • 卡片0：层级1
  • 卡片1：层级1
  • 卡片2：层级2（覆盖了 卡片0 和 卡片1，1 + 1 = 2）
  • 卡片3：层级3（覆盖了 卡片1 和 卡片2，卡片2层级更大为2，故 2 + 1 = 3）
  • 红框位置添加卡片：获取到被覆盖的卡片，最大层级是卡片3的层级3，所以待添加卡片的层级为 3 + 1 = 4

小记

  1. [vue] 在 css 中使用 js 代码中的变量 width: v-bind(CARD_WIDTH)
  2. 获取 DOM 的位置 .getBoundingClientRect()

这个算是上一篇文章 《数了个数》，仿《羊了个羊》的后续了

源码已经上传到了 gitee.com/bigflowerfa…

avatar
文章
阅读
粉丝