面试测试题：卡牌游戏（请使用Vue3 + Ts 完成）

记录一下面试所遇见的测试题：

思路：去掉大小王的扑克牌，合计54张牌，跟我们正常玩扑克牌一样，先洗牌，然后依次发牌。不同的地方就是在于结果判断（这个地方没完成）。

1、洗牌算法（乱序算法）

//洗牌
//思路：在1-54之间取一个随机整数，然后跟牌库最后一位替换，依次执行完成洗牌。
const shuffleFunc = (arr: string[]): void => {
  const radomNums: string[] = data.nums.slice(0);
  let len: number = radomNums.length;
  while (len > 1) {
    let rand: number = Math.floor(Math.random() * len);
    len--;
    [radomNums[len], radomNums[rand]] = [radomNums[rand], radomNums[len]]

  }
  return radomNums;
}

2、发牌算法（依次发牌）

//发牌
//思路：循环打乱后的牌库数组，取余数给玩家发牌
type dealType = [string[], string[], string[], string[]];
const dealFunc = (arr: string[], playNum: number = 4): void => {
  let list: any = [[], [], [], []];
  for (let i: number = 0; i < arr.length; i++) {
    for (let j: number = 0; j < playNum; j++) {
      if (i % playNum === j) {
        list[j].push(arr[i]);
      }
    }
  }
  return list;
}

3、结果判断算法（未完成）

//结果(未完成)
//思路：个人思路遍历每个人的牌，先进行一个初步的排序，后截取字符串下标“0”的字符，接着new set去重，数组长度最小的就是赢家。（没办法兼容第二种情况，所以这个思路不是可行的。）
const resultFunc = (arr: dealType): dealType => {
  let list: any = arr.map((item: string[]): string[] => {
    let data: string[] = item.sort()
    return data;
  })
  return list;
}

const resultFunc1 = (arr: dealType) => {
  //截取字符串下标“0”的字符
  for (let i: number = 0; i < arr.length; i++) {
    arr[i].forEach((item: string, index: number) => {
      arr[i][index] = item[0];
    })
  }
  //new set去重
  for (let i: number = 0; i < arr.length; i++) {
    arr[i] = Array.from(new Set(arr[i]))
  }
  console.log(arr)
}

4、完整代码：

<template>
  <view class="content" style="padding: 15px;">
    <view>牌库</view>
    <view>
      <!-- {{ data.nums }} -->
      <text v-for="(item, index) in data.nums" :key="index">
        {{ item + ' ' }}
      </text>
    </view>
    <view>洗牌后</view>
    <view>
      <text v-for="(item, index) in data.shuffleList" :key="index">
        {{ item + ' ' }}
      </text>
    </view>
    <view>
      发牌后
    </view>
    <view v-for="(item, index) in data.Licensing" :key="index" style="margin-top: 10px;">
      {{ '玩家' + index }}：
      <text v-for="(item1, index1) in item" :key="index1">
        {{ item1 + ' ' }}
      </text>
    </view>
    <view style="display: flex;align-items: center;justify-content: space-around;width: 100%;margin-top: 20px;">
      <button @click="shuffleFunc(data.nums)">洗牌</button>
      <button @click="dealFunc(data.shuffleList)">发牌</button>
      <button @click="clearFunc()">清空</button>
    </view>

  </view>
</template>

<script setup lang="ts">
import { onShow, onHide } from "@dcloudio/uni-app";
import { communityBannerListApi } from '../../api/api-list'
import { ref, Ref, reactive } from 'vue'
const title: Ref<string> = ref('Hello')
onShow(() => {
  // console.log('测试显示')
  // test()
})
type dataType = {
  nums: string[],
  shuffleList: string[],
  Licensing: any,
}
let data = reactive<dataType>({
  nums: [
    '2@',
    '2#',
    '2^',
    '2*',
    '3@',
    '3#',
    '3^',
    '3*',
    '4@',
    '4#',
    '4^',
    '4*',
    '5@',
    '5#',
    '5^',
    '5*',
    '6@',
    '6#',
    '6^',
    '6*',
    '7@',
    '7#',
    '7^',
    '7*',
    '8@',
    '8#',
    '8^',
    '8*',
    '9@',
    '9#',
    '9^',
    '9*',
    '10@',
    '10#',
    '10^',
    '10*',
    'J@',
    'J#',
    'J^',
    'J*',
    'Q@',
    'Q#',
    'Q^',
    'Q*',
    'K@',
    'K#',
    'K^',
    'K*',
    'A@',
    'A#',
    'A^',
    'A*'
  ],
  shuffleList: [],
  Licensing: []
})

//洗牌
//思路：在1-54之间取一个随机整数，然后跟牌库最后一位替换，依次执行完成洗牌。
const shuffleFunc = (arr: string[]): void => {
  const radomNums: string[] = data.nums.slice(0);
  let len: number = radomNums.length;
  while (len > 1) {
    let rand: number = Math.floor(Math.random() * len);
    len--;
    [radomNums[len], radomNums[rand]] = [radomNums[rand], radomNums[len]]

  }
  data.shuffleList = radomNums;
}

//发牌
//思路：循环打乱后的牌库数组，取余数给玩家发牌
type dealType = [string[], string[], string[], string[]];
const dealFunc = (arr: string[], playNum: number = 4): void => {
  let list: any = [[], [], [], []];
  for (let i: number = 0; i < arr.length; i++) {
    for (let j: number = 0; j < playNum; j++) {
      if (i % playNum === j) {
        list[j].push(arr[i]);
      }
    }
  }
  data.Licensing = list;
}

//结果(未完成)
//思路：个人思路遍历每个人的牌，先进行一个初步的排序，后截取字符串下标“0”的字符，接着new set去重，数组长度最小的就是赢家。（没办法兼容第二种情况，所以这个思路不是可行的。）
const resultFunc = (arr: dealType): dealType => {
  let list: any = arr.map((item: string[]): string[] => {
    let data: string[] = item.sort()
    return data;
  })
  return list;
}

const resultFunc1 = (arr: dealType) => {
  //截取字符串下标“0”的字符
  for (let i: number = 0; i < arr.length; i++) {
    arr[i].forEach((item: string, index: number) => {
      arr[i][index] = item[0];
    })
  }
  //new set去重
  for (let i: number = 0; i < arr.length; i++) {
    arr[i] = Array.from(new Set(arr[i]))
  }
  console.log(arr)
}

//清空
const clearFunc = () => {
  data.Licensing = [];
  data.shuffleList = [];
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>