vue写一个猜拳游戏

<script setup lang="js">
import { ref, onMounted } from 'vue'
const img1 = ref(null)
const img2 = ref(null)
const img3 = ref(null)
const tips = ref(0)
const refImgArray = [
  img1, img2, img3
]
const imgArray = [
  '/src/assets/cqImg/1.png',
  '/src/assets/cqImg/2.png',
  '/src/assets/cqImg/3.png',
]
const computerImg = ref(null)
const timer = ref(null)

const schedule = ref([])
const againFlag = ref(false)
const integral = ref(0)


const pollImg = () => {
  timer.value = setInterval(() => {
    const random = Math.floor(Math.random() * 3)
    computerImg.value = imgArray[random]
  }, 50)
}

const againClick = () => {
  againFlag.value = false
  tips.value = 0
  refImgArray.forEach(item => {
    item.value.style.opacity = '1'
  })
  pollImg()
}

const handlerClick = (e, img) => {
  refImgArray.forEach(item => {
    if (item.value != img) {
      item.value.style.opacity = '.01'
    }
  })
  clearInterval(timer.value)
  const random = Math.floor(Math.random() * 3)
  computerImg.value = imgArray[random]
  if (random == 0 && e == 0) {
    tips.value = 3
    schedule.value.push(3)
  } else if (random == 0 && e == 1) {
    tips.value = 2
    schedule.value.push(2)
    integral.value--
  } else if (random == 0 && e == 2) {
    tips.value = 1
    integral.value++
    schedule.value.push(1)
  } else if (random == 1 && e == 0) {
    tips.value = 1
    schedule.value.push(1)
    integral.value++
  } else if (random == 1 && e == 1) {
    tips.value = 3
    schedule.value.push(3)
  } else if (random == 1 && e == 2) {
    tips.value = 2
    schedule.value.push(2)
    integral.value--
  } else if (random == 2 && e == 0) {
    tips.value = 2
    schedule.value.push(2)
    integral.value--
  } else if (random == 2 && e == 1) {
    tips.value = 1
    schedule.value.push(1)
    integral.value++
  } else if (random == 2 && e == 2) {
    tips.value = 3
    schedule.value.push(3)
  }

  againFlag.value = true

}

onMounted(() => {
  pollImg()
})
</script>

<template>
  <div style="width: 700px;">
    <div class="content">
      <div class="top">
        <p>电脑</p>
        <img :src="computerImg" alt="" style="width: 200px; height: 200px" />
      </div>
      <div style="
          font-size: 30px;
          font-weight: bold;
          height: 100px;
          line-height: 100px;
          color: yellow;
        " v-show="tips == 0">
        对决中. . . . .
      </div>

      <div style="
          font-size: 30px;
          font-weight: bold;
          height: 100px;
          line-height: 100px;
          color: green;
        " v-show="tips == 1">
        你赢了
      </div>

      <div style="
          font-size: 30px;
          font-weight: bold;
          height: 100px;
          line-height: 100px;
          color: red;
        " v-show="tips == 2">
        你输了
      </div>

      <div style="
          font-size: 30px;
          font-weight: bold;
          height: 100px;
          line-height: 100px;
          color: white;
        " v-show="tips == 3">
        平局
      </div>

      <div class="bottom">
        <div class="mark" v-show="againFlag">
          <button @click="againClick">再来一次</button>
        </div>
        <div class="menu">
          <img src="../assets/cqImg/1.png" alt="" @click="handlerClick(0, img1)" ref="img1" />
          <img src="../assets/cqImg/2.png" alt="" style="margin: 0 50px" @click="handlerClick(1, img2)" ref="img2" />
          <img src="../assets/cqImg/3.png" alt="" @click="handlerClick(2, img3)" ref="img3" />
        </div>
        <p>你</p>
      </div>

      <el-card style="height: 300px;width: 90%;margin-bottom: 20px;font-weight: bold;font-size: 15px;overflow: auto;">
        <h2 style="display: flex;justify-content: space-between;">
          <span>计分板</span>
          <span>积分：{{ integral }}</span>
        </h2>
        <div v-for="(o, i) in schedule" :key="o" class="text item">
          第{{ i + 1 }}把：
          <span v-if="o == 1" style="color: green;">你赢了</span>
          <span v-if="o == 2" style="color: red;">你输了</span>
          <span v-if="o == 3">平局</span>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ccc;

  .top {
    p {
      text-align: center;
      font-size: 25px;
      font-weight: bold;
      color: red;
    }
  }

  .bottom {
    position: relative;

    .mark {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: black;
      opacity: .7;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10;

      button {
        width: 200px;
        height: 50px;
        background-color: #bfa;
        color: black;
        opacity: 1;
        cursor: pointer;
      }
    }

    .menu {
      z-index: -10;
    }

    p {
      text-align: center;
      font-size: 25px;
      font-weight: bold;
      color: blue;

    }

    img {
      width: 200px;
      height: 200px;
    }
  }
}
</style>