使用vue3重构拼图游戏的实现示例

let arr = [1,2,3,4,5,6,7,8,0] // 0 代表空白

let arr [
  [1,2,3],
  [4,5,6],
  [7,8,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);
   }
  }
 }

 // 随机打乱
 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打包多页应用,对前端工程化的思考