利用vue3怎么重構(gòu)一個拼圖游戲？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。
源代碼臃腫，暴露的配置項不足，特備是和項目現(xiàn)有邏輯結(jié)合時體現(xiàn)的更加明顯
生成的游戲可能出現(xiàn)無解情況，為了避免無解，只好寫死幾種情況然后隨機生成
源代碼是vue2版本，不支持vue3
最后決定使用 vue3 重新實現(xiàn)拼圖游戲，著重注意以下細(xì)節(jié)
組件使用起來足夠簡單
可以自定義游戲難度
支持圖片和數(shù)組兩種模式
無論是拼圖片還是拼數(shù)字，其原理都是要把原本打亂的數(shù)組移動成有序狀態(tài)。網(wǎng)上也有很多實現(xiàn)數(shù)字華容的的算法，算法主要需要解決的就是如何生成一組 隨機且有解 的數(shù)組，有的人可能有疑問，數(shù)組華容道還有可能無解嗎？
如果生成的游戲像上面這樣,那就是無解了。原理就像我們玩魔方一樣，正常情況下不管我們打亂的多亂都可以還原，但是如果我們把 某幾個塊摳出來換換位置 ，那就可能還原不了了
網(wǎng)上也有很多算法可以避免生成無解的情況，但是寫的都比較高深，加上自己閱讀算法的能力有限，最后決定按照自己的思路實現(xiàn)。
我的思路其實比較簡單，一句話總結(jié)就是逆向推理法，我們可以先從排列好的數(shù)組開始，然后隨機的通過 移動 打亂其順序，這樣肯定可以保證生成的題目有解，同時可以根據(jù)打亂的步數(shù)來控制游戲的難度，真是個一舉兩得的idear。
數(shù)據(jù)存放
首先我考慮的是使用一個一維數(shù)組來存放數(shù)據(jù)
let arr = [1,2,3,4,5,6,7,8,0] // 0 代表空白
但是這樣會出現(xiàn)一個問題，就是移動的時候邏輯變的相當(dāng)麻煩，因為一維數(shù)組只能記錄數(shù)據(jù)并不能記錄豎直方向的位置，這個時候我們自然就想到使用二維數(shù)組了，比如，當(dāng)我們需要生成一個3*3的游戲時數(shù)據(jù)是這樣的:
let arr [ [1,2,3], [4,5,6], [7,8,0] ]
這樣我們就可以通過下面來模擬x,y軸來表示每個數(shù)字的位置。比如0的位置是(2,2)，6的位置是(1,2)，如果我想移動6和0的位置，只需要把他們的坐標(biāo)做調(diào)換即可。
移動函數(shù)
數(shù)字華容道最關(guān)鍵的交互就是用戶點擊那個塊就移動哪個塊,但是需要注意的是只有0附近的數(shù)組可以移動。下面我們先完成移動函數(shù)
重慶分公司
重慶分公司
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;
}是不是很簡單,其實就是把要移動的兩個數(shù)的下標(biāo)給交換下位置
有了移動函數(shù)，我們就可以實現(xiàn)上,下,左,右的移動了
// 上移動
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,
};
}現(xiàn)在我們再實現(xiàn)一個判斷移動方向的方法，如下所示：
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里面判斷的意思是如果我們點擊的塊是空白快或者不是和空白快挨著的那個，那我們就不做任何處理
生成游戲面板
其實就是隨機調(diào)用上移,下移,左移,右移函數(shù)，把數(shù)組打亂
// 隨機打亂
function moveInit(diffic) {
state.arr = creatArr(level);
const num = diffic ? diffic : state.diffec;
const fns = [moveTop, moveDown, moveLeft, moveRight];
let Index = null;
let fn;
for (let i = 0; i < num; i++) {
Index = Math.floor(Math.random() * fns.length);
// moveConsole(Index);
fn = fns[Index](startX, startY);
if (fn != -1) {
const { x, y } = fn;
startX = x;
startY = y;
}
}
}短短幾個函數(shù),就完成了核心邏輯，還有幾個函數(shù)沒有介紹到比如判斷游戲完成,尋找空白塊的位置,創(chuàng)建二維數(shù)組大家可自行閱讀源碼
使用vue3重構(gòu)
以上邏輯貌似和vue3沒什么關(guān)系，但是我們忽略了最重要的一點，就是 改變數(shù)組后,視圖也就改變了 這不就是響應(yīng)式嗎，使用vue3后我們可以把關(guān)于游戲的所有邏輯放到一個js里面，大大減少了代碼的耦合度
const { arr, shouldMove, moveInit } = useCreateGame(
gamedata.level,
gamedata.difficulty,
gameEndCallback
);可能有的人會有疑問?把所有邏輯抽離出來這不是很正常的操作嗎?難道用vue2的時候都不能抽離了?
但是大家不要忘記了，我們的這個數(shù)組需要是響應(yīng)式的，如果我們單獨把邏輯抽離出來那我們在js文件里面改變數(shù)組還是響應(yīng)式的嗎
但當(dāng)我們使用vue3的composition-api時就可以再js文件中聲明一個響應(yīng)式變量，且在組件中使用時它還是響應(yīng)式的
export default function useCreateGame() {
//聲明一個響應(yīng)式變量
...
const state = reactive({
arr: [],
});
...
return {
...toRefs(state)
...
}
}const { arr, shouldMove, moveInit } = useCreateGame(
gamedata.level,
gamedata.difficulty,
gameEndCallback
);
// 這個時候 arr 還是響應(yīng)式的這正是composition-api強大所在,有了composition-api我們可以任意組裝我們的邏輯代碼了
在vue2 如果要維護(hù)一個響應(yīng)式變量我們是不是就要使用vuex這種狀態(tài)管理器了,這樣就增加了代碼的耦合度
現(xiàn)在vite已經(jīng)到了vite2版本，并且官方還在飛快迭代中，使用vite2創(chuàng)建的項目默認(rèn)是可以使用setup新特性的,比如我們可以這樣寫:
