【游戏】镜面翻转-vue3

vagg
1,252 阅读3分钟

我正在参加掘金社区游戏创意投稿大赛个人赛，详情请看：游戏创意投稿大赛

前言

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

游戏规则：存在5*5的格子，需要将它们全部翻转成另外一面，每一面翻动时，其上下左右均会翻转，全部翻转成一个颜色即通过！

环境

主要环境：

vue3 version：3.2.4
vite version：2.5.0

注：考虑到这个游戏不太复杂，所以没使用多页面的方式来制作，就没引入vue-router

主要插件：

windicss version：3.5.1

预览：vaggchen.github.io/turnBox/

代码地址：github.com/vaggchen/tu…

运行如图：

turnBox.gif

思路

  1. 搭建环境，下载依赖
  2. 运行项目
  3. 利用windicss主体兼容pc和移动端 姑且认为小于1024的是平板或者手机 lg(1024px)
App.vue
<div class="relative w-full h-full lg:(w-750px h-800px)">
    <Game />
</div>
  1. 主体Game.vue设置4个主体组件：GameTool.vue游戏工具栏、GameCnt.vue游戏主体、Tip.vue开局提示、GamePass.vue游戏通过

实现

GameCnt

布局

先画出5*5的格子，这里有多种方法，笔者这里采取最简单的grid布局实现

// 定义行个数
const rowLen = 5
// 定义数组
const lists = ref([])
lists.value = new Array(rowLen * colLen).fill(0)

<div class="h-full p-4 py-8 grid gap-2" :class="`grid-cols-${rowLen}`">
    <div v-for="(item,index ) in lists" class="bg-blue-300 rounded-md">
      <!-- {{item}} -->
    </div>
</div>

image.png

点击元素的翻转

实现简单的翻转：

// 点击box时
const boxClick = (index) => {
  lists.value[index] = lists.value[index]?0:1
}

<div v-for="(item,index ) in lists" class=" rounded-md" :class="!item?'bg-blue-300':'bg-red-300'" @click="boxClick(index)">
  <!-- {{item}} -->
</div>

点击元素上下左右的翻转

上和下思路一致，左和右思路一致，这里就简单讲下

改变该元素之上的值要怎么做？

  1. 获取上一行的序号值，即 index - rowLen
  2. 边界判断，判断是否不在数组里，即 index - rowLen > -1
  3. 赋值即可

2行代码即可：

  let topInxdex = index - rowLen;
  topInxdex > -1 && (lists.value[topInxdex] = changeVal(topInxdex))

那么该元素之左的值要怎么做？

  1. 获取该元素左的序号值，即 index - 1
  2. 边界判断，判断是否为一行元素，即 parseInt(index / rowLen) === parseInt(leftInxdex / rowLen)
  3. 赋值即可

2行代码即可：

  let leftInxdex = index - 1;
  leftInxdex > -1 && (parseInt(index / rowLen) === parseInt(leftInxdex / rowLen)) && (lists.value[leftInxdex] = changeVal(leftInxdex))

判断游戏通过

这个地方可以通过computed和watch来监控，但为了简单，直接将方法写在点击元素方法里面

// 是否都成功
  const getIsAllOk = () => {
    return lists.value.some(item => item === 0)
  }
  // 判断是否都成功了
  const flag = getIsAllOk()
  if (!flag) {
    gamePass()
  }
  
  // 成功调用的方法
const gamePass = () => {
  emit('gamePass')
}

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

GameTool

左侧是移动步数，右侧是重新开始按钮

移动步数后左侧会调整为移动多少次

image.png

GamePass

为了组件独立性，暂时不考虑融合进GameCnt里面

  1. 先画出一样的红色5*5格子
  2. 设置一张显示图片（可以是搞怪的图片，或者女朋友照片啥的）
  3. 写动画@keyframes即可

GameTip

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

最后

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

Game.cnt 的翻转效果优化过，否则只有变色效果，不能点题了

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

笔者比较菜，很难通关，欢迎各位大佬尝试！

avatar
文章
阅读
粉丝