摸了个鱼：用Vue3写一个“汉诺塔”小游戏

先看效果

同时兼容手机和pc浏览器

游戏规则

点击红绿蓝三个按钮可以移动塔层，数字大的层数不能盖在小层数上。当所有塔层都移动到蓝色按钮上分，则赢得游戏！

代码

为了省事我直接把逻辑都写在了App.vue里，感兴趣的朋友可以搞个vue3基础项目模板后直接替换原有App.vue，然后跑起来看。

<script setup lang="ts">
import { reactive, ref } from 'vue';

let data = reactive([[], [], []]) as any
let count = ref()

let nacviveBox = ref(null) as any

function verify() {
  if (count.value !== 0 && data[2].length === count.value) {
    alert('真棒！恭喜你，你赢了')
    init()
  }
}
// 游戏状态初始化
function init() {
  data[0] = []
  data[1] = []
  data[2] = []
  count.value = null
  nacviveBox.value = null
}
function ckeck(v: number) {
  // 选择要移动的塔
  if (nacviveBox.value == null && data[v].length !== 0) {
    nacviveBox.value = v
    return
  }
  // 重复选择无效
  if (v == nacviveBox.value) {
    nacviveBox.value = null
    return
  }
  // 空选无效
  if (data[nacviveBox.value].length == 0) {
    nacviveBox.value = null
    return
  }

  // 移动
  if (data[v].length == 0 || data[nacviveBox.value][0] < data[v][0]) {
    let num = data[nacviveBox.value].shift()
    data[v].unshift(num)
    console.log('移动结束')
  }
  // 重置选择
  nacviveBox.value = null

  // 校验结果
  verify()
}
function begin() {
  // 根据输入的数字添加塔层
  let d = []
  for (let i = 0; i < count.value; i++) {;
    d.push(i + 1)
  }
  data[0] = d
  data[1] = []
  data[2] = []
}
</script>

<template>
  <div class="main">
    <div class="beginbox">
      <input type="number" v-model="count" placeholder="输入数字后点击开始">
      <button @click="begin">开始挑战！</button>
    </div>
    <div class="flx ta">
      <div class="ta1" v-for="item, index in 3">
        <div v-for="item in data[index]" :style="{
        width: 30 * item + 'px',
      }">{{ item }}
        </div>
      </div>
    </div>
    <div class="flx bt">
      <div v-for="item, index in 3">
        <button :class="{ bt1: index === 0, bt2: index === 1, bt3: index === 2, active: nacviveBox === index }"
          @click="ckeck(index)">{{ index }}</button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
}

body {
  margin: 0;
}

.beginbox {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100px;

  input {
    width: 300px;
    margin-bottom: 10px;
    font-size: 30px;
    display: block;
    box-sizing: border-box;
  }

  button {
    width: 200px;
    height: 100%;
    cursor: pointer;
    animation: fontSizeAnimation 2s infinite alternate ease-in-out;
  }
}

@keyframes fontSizeAnimation {

  0%,
  100% {
    font-size: 16px;
  }

  50% {
    font-size: 24px;
  }
}

.main {
  width: 100vw;
  height: 100vh;
  background-color: antiquewhite;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flx {
  display: flex;
  /* width: 500px; */
  /* background-color: cadetblue; */

  >div {
    text-align: center;
    width: 130px;
  }
}


.ta {
  margin-bottom: 30px;

  >div {
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;

    >div {
      height: 25px;
      border-radius: 5px;
      margin-top: 5px;
      background-color: aquamarine;
    }
  }
}

.bt {
  button {
    width: 100px;
    height: 50px;
    border-radius: 5px;
    border: 0;
    cursor: pointer;
    color: white;

    &:hover {
      border: 1px solid black;
    }
  }

  .bt1 {
    background-color: rgba(255, 0, 0, 0.5);
  }

  .bt2 {
    background-color: rgba(0, 255, 0, 0.5);
  }

  .bt3 {
    background-color: rgba(0, 0, 255, 0.5);
  }
}

.active {
  border: 3px dashed white !important;
}
</style>