基于Vue3实现数字华容道游戏的示例代码

<div class="relative w-full h-full lg:(w-750px h-800px)">
    <route-view
</div>

// 定义行个数
const rowLen = 3
// 定义cnt宽高和item的宽高
const cntWidth = ref(0)
const cntHeight = ref(0)
const itemWidth = ref(0)
const itemHeight = ref(0)

// 定义数组
const lists = ref([])

lists.value = new Array(rowLen.value * rowLen.value).fill(1).map((item, index) => ({
    key: index, // 存储原序号
    value: item, // 1 代表不是空位
    moveIndex: index
  }))

// 设置最后一个为-1
  lists.value[lists.value.length - 1]['value'] = 0
  
//获取dom和渲染
onMounted(() => {
   // 获取cnt宽高和item的宽高
  getCntWidth()
  // 让第一次渲染不会有transform动画
  lazyShow.value = false
})

<div v-show="!lazyShow" v-for="(item, index ) in lists" class="box rounded-md  overflow-hidden absolute"
      :class="[item.value ? 'origin' : 'opacity-0']" @click="boxClick(item)" :style="{
        transform: `translate(${(item.moveIndex % rowLen) * (1 / rowLen) * cntWidth}px, ${parseInt(item.moveIndex / rowLen) * (1 / rowLen) * cntHeight}px) `, width: itemWidth + 'px', height: itemHeight + 'px'
      }">
    <p class="absolute z-10 text-light-100 left-1/2 top-1/2" :class="hasImg ? 'opacity-60' : ''"
        :style="{ 'font-size': (180 / rowLen) + 'px' }">{{ item.key + 1 }}</p>
</div>

// 是否在一行
  const isInline = parseInt(index / rowLen.value) === parseInt(emptyIndex / rowLen.value)
 
 // 在一行是否相邻
  Math.abs(emptyIndex - index) === 1
   
  // 不在一行是否是上下关系
  Math.abs(index - emptyIndex) === rowLen.value

// 是否在一行
  if (isInline) {
    // 一行则判断是否左右相邻
    console.log('相差：' + (index - emptyIndex))
    // 是否相邻
    if (Math.abs(emptyIndex - index) === 1) {
      // 改变对应moveIndex
      changeIndex()
    } else {
      console.log('不相邻')
      return
    }
  } else {
    //  不是则判断是否上下相邻
    console.log('相差：' + (index - emptyIndex))
    // 是否上或者下
    if (Math.abs(index - emptyIndex) === rowLen.value) {
      // 改变对应moveIndex
      changeIndex()
    } else {
      console.log('不相邻')
      return
    }
  }
  
  // 声明改变的数组moveIndex的方法
  const changeIndex = () => {
    // 步数改变
    emit('stepChange');
    // 改变对应数组里的moveIndex 注意不是 index和 moveIndex
    ([lists.value[item.key].moveIndex, lists.value[emptyItem.key].moveIndex] = [emptyIndex, index]);
  }

// 是否都成功
  const getIsAllOk = () => {
    // 
    return lists.value.some(item => item.moveIndex !== item.key)
  }
  // // 判断是否都成功了
  const flag = getIsAllOk()
  console.log(flag)
  if (!flag) {
    // alert('成功')
    gamePass()
  }

// 打乱数据
const mixData = () => {
  const arr = new Array(rowLen.value * rowLen.value).fill(0).map((item, index) => index)
  // console.log(arr)
  arr.sort(() => {
    return Math.random() > 0.5 ? -1 : 1
  })
  arr.forEach((item, index) => {
    lists.value[index].moveIndex = item
  })

  // 如果直接是成功的则重新来一次排序
  const flag = getIsAllOk()
  if (!flag) {
    // alert('成功')
    mixData()
  }
}

const params = route.query
// 定义行个数
rowLen.value = +params.num || 3;

// 重新获取item宽高
cnt.value && getCntWidth()

<img v-if="hasImg" class="absolute" :src="Default" alt=""
        :style="{ width: cntWidth + 'px', maxWidth: cntWidth + 'px', height: cntHeight + 'px', left: -(item.key % rowLen) * (1 / rowLen) * cntWidth + 'px', top: -parseInt(item.key / rowLen) * (1 / rowLen) * cntHeight + 'px' }">
  
 // 是否渲染图片
  hasImg.value = params.hasImg === '1' ? true : false;