cfc/zxyj-frontend/pages/games/1a2b.vue

<template>
  <view class="game-container">
    <view class="game-header">
      <text class="game-title">猜数字</text>
      <view class="game-stats">
        <text>剩余次数: {{ remainingGuesses }}</text>
      </view>
    </view>
    
    <view class="instructions" v-if="!isPlaying">
      <text class="info-text">电脑会生成一个4位不重复数字</text>
      <text class="info-text">A = 数字和位置都正确</text>
      <text class="info-text">B = 数字正确但位置错误</text>
      <text class="info-text">请在{{ maxGuesses }}次内猜出正确答案</text>
    </view>
    
    <view class="input-area" v-if="!isPlaying">
      <input 
        class="guess-input" 
        type="number" 
        v-model="userGuess" 
        maxlength="4" 
        placeholder="输入4位不重复数字"
      />
      <button class="start-btn" @click="startGame">开始游戏</button>
    </view>
    
    <view class="history" v-if="history.length > 0">
      <text class="history-title">猜测历史:</text>
      <view class="history-item" v-for="(item, index) in history" :key="index">
        <text>{{ index + 1 }}. {{ item.guess }} - {{ item.result }}</text>
      </view>
    </view>
    
    <view class="input-area" v-if="isPlaying && !gameOver">
      <input 
        class="guess-input" 
        type="number" 
        v-model="userGuess" 
        maxlength="4" 
        placeholder="输入猜测"
      />
      <button class="guess-btn" @click="makeGuess">猜测</button>
    </view>
    
    <view class="result-modal" v-if="gameOver">
      <view class="result-content">
        <text class="result-title">{{ isWin ? '猜对了!' : '游戏结束' }}</text>
        <text class="result-info">答案是: {{ answer }}</text>
        <text class="result-score">获得积分: {{ score }}</text>
        <button class="restart-btn" @click="resetGame">再玩一次</button>
      </view>
    </view>
  </view>
</template>

<script>
import { completeMiniGame, getChildren } from '@/utils/api.js'

export default {
  data() {
    return {
      answer: '',
      userGuess: '',
      isPlaying: false,
      gameOver: false,
      isWin: false,
      maxGuesses: 10,
      remainingGuesses: 10,
      history: [],
      score: 0,
      time: 0,
      timer: null,
      childId: null,
      taskId: null,
      pointsEarned: 0,
      newBalance: 0
    }
  },
  onLoad(options) {
    if (options.taskId) {
      this.taskId = parseInt(options.taskId)
    }
    if (options.childId) {
      this.childId = parseInt(options.childId)
    }
    this.loadChildId()
  },
  onUnload() {
    if (this.timer) clearInterval(this.timer)
  },
  methods: {
    async loadChildId() {
      try {
        if (!this.childId) {
          const res = await getChildren()
          if (res.data && res.data.length > 0) {
            this.childId = res.data[0].id
          }
        }
      } catch (e) {
        console.error('获取孩子ID失败', e)
      }
    },
    generateAnswer() {
      let digits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
      let result = ''
      for (let i = 0; i < 4; i++) {
        const idx = Math.floor(Math.random() * digits.length)
        result += digits[idx]
        digits.splice(idx, 1)
      }
      return result
    },
    startGame() {
      if (this.userGuess.length !== 4 || !this.isUnique(this.userGuess)) {
        uni.showToast({ title: '请输入4位不重��数字', icon: 'none' })
        return
      }
      this.answer = this.generateAnswer()
      this.isPlaying = true
      this.gameOver = false
      this.remainingGuesses = this.maxGuesses
      this.history = []
      this.score = 0
      this.timer = setInterval(() => { this.time++ }, 1000)
    },
    isUnique(str) {
      return new Set(str).size === str.length
    },
    checkGuess(guess) {
      let a = 0, b = 0
      for (let i = 0; i < 4; i++) {
        if (guess[i] === this.answer[i]) {
          a++
        } else if (this.answer.includes(guess[i])) {
          b++
        }
      }
      return `${a}A${b}B`
    },
    makeGuess() {
      if (this.userGuess.length !== 4 || !this.isUnique(this.userGuess)) {
        uni.showToast({ title: '请输入4位不重复数字', icon: 'none' })
        return
      }
      const result = this.checkGuess(this.userGuess)
      this.history.push({ guess: this.userGuess, result })
      this.remainingGuesses--
      if (result === '4A0B') {
        this.score = Math.max(100 - (this.maxGuesses - this.remainingGuesses) * 8, 60)
        this.gameOver = true
        this.isWin = true
        clearInterval(this.timer)
        this.submitScore()
      } else if (this.remainingGuesses === 0) {
        this.gameOver = true
        this.isWin = false
        this.score = 30
        this.submitScore()
      }
      this.userGuess = ''
    },
    async submitScore() {
      if (!this.childId) return
      try {
        if (this.taskId) {
          const token = uni.getStorageSync('token')
          await uni.request({
            url: `http://localhost:8080/api/tasks/${this.taskId}/complete-minigame`,
            method: 'POST',
            header: {
              'Authorization': token ? `Bearer ${token}` : '',
              'Content-Type': 'application/json'
            },
            data: {
              childId: this.childId,
              completionTime: this.time,
              score: this.score
            }
          })
        }
        const res = await completeMiniGame(this.childId, '1a2b', this.time, this.score)
        if (res.code === 200) {
          uni.showToast({ title: `获得${res.data.pointsEarned}积分!`, icon: 'success' })
        }
      } catch (e) {
        console.error('提交成绩失败', e)
      }
    },
    resetGame() {
      this.isPlaying = false
      this.gameOver = false
      this.userGuess = ''
      this.history = []
      this.time = 0
      if (this.timer) clearInterval(this.timer)
    }
  }
}
</script>

<style scoped>
.game-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  padding: 30rpx;
}
.game-header {
  text-align: center;
  margin-bottom: 40rpx;
}
.game-title {
  font-size: 48rpx;
  color: #fff;
  display: block;
  margin-bottom: 20rpx;
}
.game-stats {
  color: #888;
  font-size: 28rpx;
}
.instructions {
  background: rgba(255,255,255,0.1);
  padding: 30rpx;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
}
.info-text {
  color: #aaa;
  font-size: 28rpx;
  display: block;
  margin-bottom: 10rpx;
}
.input-area {
  margin: 30rpx 0;
}
.guess-input {
  background: rgba(255,255,255,0.1);
  border: 1rpx solid rgba(255,255,255,0.2);
  border-radius: 12rpx;
  padding: 20rpx;
  color: #fff;
  font-size: 36rpx;
  text-align: center;
  margin-bottom: 20rpx;
}
.start-btn, .guess-btn {
  background: #4ECDC4;
  color: #1a1a2e;
  border-radius: 12rpx;
  padding: 20rpx;
}
.history {
  background: rgba(255,255,255,0.05);
  padding: 20rpx;
  border-radius: 12rpx;
  margin: 30rpx 0;
}
.history-title {
  color: #888;
  font-size: 28rpx;
  display: block;
  margin-bottom: 16rpx;
}
.history-item {
  color: #ccc;
  font-size: 28rpx;
  padding: 10rpx 0;
  border-bottom: 1rpx solid rgba(255,255,255,0.1);
}
.result-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}
.result-content {
  background: #2a2a4a;
  padding: 60rpx;
  border-radius: 20rpx;
  text-align: center;
}
.result-title {
  font-size: 48rpx;
  color: #FFE66D;
  display: block;
  margin-bottom: 30rpx;
}
.result-info, .result-score {
  color: #fff;
  font-size: 32rpx;
  display: block;
  margin-bottom: 20rpx;
}
.restart-btn {
  background: #4ECDC4;
  color: #1a1a2e;
  padding: 20rpx 60rpx;
  margin-top: 30rpx;
}
</style>