vue五行竞猜小游戏开发教程

<template>
  <div class="game-container">
    <h2>🎮 五行竞猜游戏</h2>
    <p>先选要竞猜的五行和生肖，再点击开始竞猜按钮</p>
   <!-- 结果（可选：显示内环停止的五行） -->
    <div>
   <div v-if="tempresult" class="result">
      <p>🎯 您选中的五行是：{{ tempresult }}</p>
     
    </div>
    <div v-if="tempsxresult" class="result">
      <p>🎯 您选中的生肖是：{{ tempsxresult }}</p>
     
    </div>
  </div>
  <div v-if="wxshowtip" class="result">
      <p>🎯 您未选择五行</p>
     
    </div>
    <div v-if="sxshowtip" class="result">
      <p>🎯 您未选择生肖</p>
     
    </div>
    <!-- 同心圆双环容器 -->
    <div class="rings-container">
      <!-- 外环：十二生肖（大环，不参与竞猜，内环停后旋转） -->
      <div class="outer-ring" :style="{ transform: `rotate(${outerRotation}deg)` }">
        <div
          v-for="(sx, index) in shengxiaoList"
          :key="'sx-' + index"
          @click=getsxcolor(index) 
          :id="'id'+index"
          class="shengxiao-item"
          :style="getShengxiaoStyle(index)"
        >
          {{ sx }}
        </div>
      </div>

      <!-- 内环：五行（小环，玩家竞猜，点击旋转） -->
      <div class="inner-ring" :style="{ transform: `rotate(${innerRotation}deg)` }">
        <div
          v-for="(wx, index) in wuxingList"
          :key="'wx-' + index"
          @click=getcolor(index)
             :id="'idwx'+index"
          class="wuxing-item"
          :style="getWuxingStyle(index)"
        >
          {{ wx }}
        </div>
      </div>
    </div>

    <!-- 旋转按钮 -->
    <button
      @click="spinInnerThenOuter"
      :disabled="spinning"
      class="spin-btn"
    >
      {{ spinning ? '竞猜中...' : '开始竞猜' }}
    </button>

    <!-- 结果（可选：显示内环停止的五行） -->
     <div v-if="showresult">
    <div v-if="result" class="result">
      <p>🎯 开奖结果的五行是：{{ result }}</p>
     
    </div>
    <div v-if="sxresult" class="result">
      <p>🎯 开奖结果的生肖是：{{ sxresult }}</p>
     
    </div>
  </div>
  
  </div>
</template>

<script setup>
import { ref,watch  } from 'vue';

// 响应式数据
const spinning = ref(false);
const result = ref(null);
const sxresult = ref(null);
const tempresult = ref(null);
const sxshowtip = ref(null);
const wxshowtip = ref(null);
const tempsxresult = ref(null);
const showresult= ref(null);
const innerRotation = ref(0); // 内环旋转角度
const outerRotation = ref(0); // 外环旋转角度

// 五行（内环）
const wuxingList = ['金', '木', '水', '火', '土'];

// 十二生肖（外环）
const shengxiaoList = ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪'];

// 获取五行样式（均匀分布在小圆环上，亮蓝色展示）
const getWuxingStyle = (index) => {
  const angle = (360 / wuxingList.length) * index;
  console.log("index:"+index)
  var flag=false
  if(wuxingList[index]==result.value){
    flag=true
  }
  console.log("result:"+result.value)
  const radian = (angle * Math.PI) / 180;
  const radius = 60; // 内环半径
  const x = Math.cos(radian) * radius;
  const y = Math.sin(radian) * radius;
  return {
    position: 'absolute',
    left: `calc(50% + ${x}px - 10px)`,
    top: `calc(50% + ${y}px - 10px)`,
    fontSize: '16px',
    fontWeight: 'bold',
    color: flag?'#00BFFF':"black", // 亮蓝色
  };
};

// 获取生肖样式（均匀分布在大圆环上，亮蓝色展示）
const getShengxiaoStyle = (index) => {
  console.log(index)
  const angle = (360 / shengxiaoList.length) * index;
  const radian = (angle * Math.PI) / 180;
  const radius = 90; // 外环半径（更大，确保是内环 1.5 倍左右直径）
  const x = Math.cos(radian) * radius;
  const y = Math.sin(radian) * radius;
  var flag=false
  if(shengxiaoList[index]==sxresult.value){
    flag=true
  }
  return {
    position: 'absolute',
    left: `calc(50% + ${x}px - 8px)`,
    top: `calc(50% + ${y}px - 8px)`,
    fontSize: '14px',
    fontWeight: 'bold',
    color: flag?'#00BFFF':"black", // 亮蓝色
  };
};
const getcolor =(index)  => {
  wxshowtip.value=false
  showresult.value=false
  tempresult.value=wuxingList[index]
  result.value=wuxingList[index]
  getWuxingStyle(index)
};
 
const getsxcolor =(index)  => {
  sxshowtip.value=false
  sxresult.value=shengxiaoList[index]
  tempsxresult.value=shengxiaoList[index]
  shengxiaoList(index)
};
// 点击按钮：内环旋转，然后外环旋转
const spinInnerThenOuter = () => {
 if(!tempresult.value){
  wxshowtip.value=true
return
 }else{
  wxshowtip.value=false
 }
 if(!tempsxresult.value){
  sxshowtip.value=true
  return
}else{
  sxshowtip.value=false
}
  if (spinning.value) return;
  spinning.value = true;
  showresult.value=false
  result.value = null;
   sxresult.value=null;
  // 1. 内环旋转（随机角度，比如 3 圈 + 随机）
  const randomSpin = 360 * 10; // 3圈 + 随机
  innerRotation.value += randomSpin;

  // 2. 内环停止后，再旋转外环（2 圈 = 720°）
  setTimeout(() => {
   
    result.value = wuxingList[Math.floor(Math.random() * wuxingList.length)]; // 模拟随机停止的五行
  }, 3000); // 内环转 3 秒后，外环再转
};
watch(result, (newValue, oldValue) => {
  console.log('spinning 状态发生变化：')
  console.log('旧值:', oldValue) // 之前的值
  console.log('新值:', newValue) // 当前的值

  if (newValue&&spinning.value) {
    outerRotation.value += 720; // 外环转 2 圈
    
    setTimeout(() => {
   spinning.value = false;
      sxresult.value = shengxiaoList[Math.floor(Math.random() * shengxiaoList.length)]; // 模拟随机停止的五行
      showresult.value=true
 }, 3000); // 内环转 3 秒后，外环再转
  
    console.log('🌀 开始旋转了！')
  } else {
    
    console.log('⏹️  旋转停止了！')
  }
})
</script>

<style scoped>
.game-container {
  text-align: center;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.rings-container {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
}

/* 内环：五行（小圆环） */
.inner-ring {
  position: absolute;
  top: 61%;
  left: 58%;
  width: 120px; /* 直径较小 */
  height: 120px;
  transform: translate(-50%, -50%);
  transition: transform 3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 外环：十二生肖（大圆环） */
.outer-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px; /* 直径较大（≈ 内环 1.5 倍） */
  height: 180px;
  transform: translate(-50%, -50%);
  transition: transform 2s ease-in-out; /* 外环旋转动画 */
}

.wuxing-item,
.shengxiao-item {
  position: absolute;
  font-weight: bold;
  color: #00BFFF; /* 亮蓝色 */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* 加阴影增强对比 */
}

.spin-btn {
  margin: 20px 0;
  padding: 12px 24px;
  font-size: 16px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.spin-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.result {
  margin-top: 20px;
  font-size: 18px;
  color: #007bff;
}
</style>