前言
花了两天时间，重构了项目中的一个拼图小游戏（又名数字华容道），为了方便使用抽离成了独立组件，效果如下：
线上体验
源码地址在文章最后哦!
主要重构点
原有拼图游戏是通过开源代码加以改造，使用的是 vue2 。在实际项目使用一切正常，但还是存在以下痛点
- 源代码臃肿，暴露的配置项不足，特备是和项目现有逻辑结合时体现的更加明显
- 生成的游戏可能出现无解情况，为了避免无解，只好写死几种情况然后随机生成
- 源代码是vue2版本，不支持vue3
最后决定使用 vue3 重新实现拼图游戏，着重注意以下细节
- 组件使用起来足够简单
- 可以自定义游戏难度
- 支持图片和数组两种模式
实现思路
无论是拼图片还是拼数字，其原理都是要把原本打乱的数组移动成有序状态。网上也有很多实现数字华容的的算法，算法主要需要解决的就是如何生成一组 随机且有解 的数组，有的人可能有疑问，数组华容道还有可能无解吗？
如果生成的游戏像上面这样,那就是无解了。原理就像我们玩魔方一样，正常情况下不管我们打乱的多乱都可以还原，但是如果我们把 某几个块抠出来换换位置 ，那就可能还原不了了
网上也有很多算法可以避免生成无解的情况，但是写的都比较高深，加上自己阅读算法的能力有限，最后决定按照自己的思路实现。
我的思路其实比较简单，一句话总结就是逆向推理法，我们可以先从排列好的数组开始，然后随机的通过 移动 打乱其顺序，这样肯定可以保证生成的题目有解，同时可以根据打乱的步数来控制游戏的难度，真是个一举两得的idear。
源码实现
数据存放
首先我考虑的是使用一个一维数组来存放数据
let arr = [1,2,3,4,5,6,7,8,0] // 0 代表空白
但是这样会出现一个问题，就是移动的时候逻辑变的相当麻烦，因为一维数组只能记录数据并不能记录竖直方向的位置，这个时候我们自然就想到使用二维数组了，比如，当我们需要生成一个3*3的游戏时数据是这样的:
let arr [ [1,2,3], [4,5,6], [7,8,0] ]
这样我们就可以通过下面来模拟x,y轴来表示每个数字的位置。比如0的位置是(2,2)，6的位置是(1,2)，如果我想移动6和0的位置，只需要把他们的坐标做调换即可。
移动函数
数字华容道最关键的交互就是用户点击那个块就移动哪个块,但是需要注意的是只有0附近的数组可以移动。下面我们先完成移动函数
function move(x, y, moveX, moveY) {
const num = state.arr[x][y];
state.arr[x][y] = state.arr[moveX][moveY];
state.arr[moveX][moveY] = num;
}
是不是很简单,其实就是把要移动的两个数的下标给交换下位置
有了移动函数，我们就可以实现上,下,左,右的移动了
// 上移动
function moveTop(x, y) {
if (x <= 0) return -1;
// 开始交换位置
const okx = x - 1;
move(x, y, okx, y);
return {
x: okx,
y,
};
}
//下移动
function moveDown(x, y) {
if (x >= level - 1) return -1;
const okx = x + 1;
move(x, y, okx, y);
return {
x: okx,
y,
};
}
// 左移动
function moveLeft(x, y) {
if (y <= 0) return -1;
const oky = y - 1;
move(x, y, x, oky);
return {
x,
y: oky,
};
}
// 右移动
function moveRight(x, y) {
if (y >= level - 1) return -1;
const oky = y + 1;
move(x, y, x, oky);
return {
x,
y: oky,
};
}
现在我们再实现一个判断移动方向的方法，如下所示：
function shouldMove(x, y) {
// 判断向哪移动
const { emptyX, emptyY } = seekEmpty();
if (x === emptyX && y !== emptyY && Math.abs(y - emptyY) === 1) {
// 说明在一个水平线上 可能是左右移动
if (y > emptyY) {
moveLeft(x, y);
} else {
moveRight(x, y);
}
}
if (y === emptyY && x !== emptyX && Math.abs(x - emptyX) === 1) {
// 说明需要上下移动
if (x > emptyX) {
moveTop(x, y);
} else {
moveDown(x, y);
}
}
}
if里面判断的意思是如果我们点击的块是空白快或者不是和空白快挨着的那个，那我们就不做任何处理
生成游戏面板
其实就是随机调用上移,下移,左移,右移函数，把数组打乱
// 随机打乱
function moveInit(diffic) {
state.arr = creatArr(level);
const num = diffic "htmlcode">
const { arr, shouldMove, moveInit } = useCreateGame(
gamedata.level,
gamedata.difficulty,
gameEndCallback
);
可能有的人会有疑问"htmlcode">
export default function useCreateGame() {
//声明一个响应式变量
...
const state = reactive({
arr: [],
});
...
return {
...toRefs(state)
...
}
}
const { arr, shouldMove, moveInit } = useCreateGame(
gamedata.level,
gamedata.difficulty,
gameEndCallback
);
// 这个时候 arr 还是响应式的
这正是composition-api强大所在,有了composition-api我们可以任意组装我们的逻辑代码了
在vue2 如果要维护一个响应式变量我们是不是就要使用vuex这种状态管理器了,这样就增加了代码的耦合度
关于vite2
现在vite已经到了vite2版本，并且官方还在飞快迭代中，使用vite2创建的项目默认是可以使用setup新特性的,比如我们可以这样写:
<template>
<div>
{{ name }}
</div>
</template>
<script setup>
import { ref } from "vue";
const name = ref('"公众号码不停息"');
</script>
等价于这样写
<template>
<div>
{{ name }}
</div>
</template>
<script>
import { ref } from "vue";
export default {
setup() {
const name = ref("公众号码不停息");
return {
name,
};
},
};
</script>
看着就简单了很多,并且在setup版本中vue又出了几个api,感兴趣的可以去官网看下，个人感觉还是挺香的。因为新语法还是实验性质的本次代码重构并未使用。
源码地址
源码地址:数字华容道拼图游戏 欢迎start"_blank" href="https://juejin.cn/post/6918897727321407496" rel="external nofollow" >基于vue-router思考"_blank" href="https://juejin.cn/post/6907040632045305863" rel="external nofollow" >基于webpack打包多页应用,对前端工程化的思考
vue3,重构拼图
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。