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

目录

• 前言
• 环境
• 思路
• 实现
• GameCnt
• GameTool
• GamePass
• GameTip
• Menu
• 最后

前言

恰逢春之四月，天气忽热忽凉，遇游戏大赛，以笨拙之技，书一篇小文。

游戏规则：存在n*n的格子，需要将它们按数字顺序或图片顺序一一还原即可。

环境

主要环境：

vue3 version：3.2.4

vite version：2.5.0

vue-router version：4.0.14

注：这个游戏的路由使用的是自动路由插件

主要插件：

windicss version：3.5.1

预览地址

代码地址

运行如图：

思路

• 搭建环境，下载依赖
• 运行项目
• 利用windicss主体兼容pc和移动端

姑且认为小于1024的是平板或者手机 lg(1024px)

App.vue

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

主体Game.vue设置4个主体组件：GameTool.vue游戏工具栏（返回、开始和步数统计）、GameCnt.vue游戏主体、Tip.vue开局提示、GamePass.vue游戏通过

实现

GameCnt

布局

• 先画出3*3的格子，这里有多种方法，笔者这里采取最简单的动态grid布局实现，后来因为css动画选取的是transform则不用gird布局了
• 宽高获取,这里要获取，原因是使用了transform位移动画，则需要平移距离和宽高了
• 设置lazyShow，让第一次渲染不会有transform动画
• 隐藏最后一个，利用数组对象value值+css实现
• 添加其他css（windicss不好实现的css）

// 定义行个数
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

点击元素上下左右的交换

先判断是否在一行，再判断是否相邻即可。

• 先判断是否在一行
• 在一行是否相邻或不在一行是否是上下关系
• 看情况调用changeIndex

// 是否在一行
  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]);
  }

判断游戏通过

这个地方很简单，主要判断数组对象每一个是否原序号key是否都相等于移动后的moveIndex

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

注：这个gamePass需要在defineEmits里注册

打乱数组

这个地方很有点麻烦，存在无解的情况，暂时没想到更好的实现方法，这里使用的是排序打乱

// 打乱数据
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;

GameTool

左侧是返回按钮，右侧是重新开始按钮，中间是移动步数

移动步数后中间会调整为移动多少次

注：图标从iconfont找的

GamePass

• 先布局全屏遮罩
• 设置中间div样式
• 设置通过成功提示和步数提示即可

GameTip

这个组件就是开局的提示组件

Menu

这个组件就是菜单页 设置了两种入口

最后

GameCnt 可以写一些测试代码，方便测试下通关后的情况

GameCnt 的块级效果优化过，否则只有颜色，不太好看

GamePass 还有优化空间，例如图片通过可以有不同效果啊等等

整体难度不高，可以练习下vue3，以及游戏思维

到此这篇关于基于Vue3实现数字华容道游戏的示例代码的文章就介绍到这了,更多相关Vue数字华容道内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！