cfc/zxyj-frontend/pages/games/sudoku.vue

<template>
  <view class="game-container">
    <view class="game-header">
      <text class="game-title">🔳 数独</text>
      <view class="game-stats">
        <text>时间: {{ time }}秒</text>
      </view>
    </view>
    
    <view class="difficulty-select" v-if="!isPlaying">
      <button 
        v-for="level in levels" 
        :key="level.value"
        class="level-btn"
        :class="{ active: selectedLevel === level.value }"
        @click="selectedLevel = level.value"
      >
        {{ level.label }}
      </button>
    </view>
    
    <view class="board">
      <view class="row" v-for="(row, rowIndex) in board" :key="rowIndex">
        <view 
          class="cell" 
          v-for="(cell, colIndex) in row" 
          :key="colIndex"
          :class="{ 
            fixed: cell.fixed, 
            selected: isCellSelected(rowIndex, colIndex),
            error: cell.error
          }"
          @click="selectCell(rowIndex, colIndex)"
        >
          {{ cell.value || '' }}
        </view>
      </view>
    </view>
    
    <view class="number-pad" v-if="isPlaying">
      <button 
        v-for="n in 9" 
        :key="n"
        class="num-btn"
        @click="fillNumber(n)"
      >
        {{ n }}
      </button>
      <button class="num-btn clear" @click="fillNumber(0)">清空</button>
    </view>
    
    <view class="controls" v-if="!isPlaying">
      <button class="start-btn" @click="startGame">开始游戏</button>
    </view>
    
    <view class="result-modal" v-if="showResult">
      <view class="result-content">
        <text class="result-title">🎉 数独完成!</text>
        <text class="result-score">用时: {{ time }}秒</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'

// 简单的数独生成算法
function generateSudoku(level) {
  // 基础数独解决方案
  const base = [
    [1,2,3,4,5,6,7,8,9],
    [4,5,6,7,8,9,1,2,3],
    [7,8,9,1,2,3,4,5,6],
    [2,3,4,5,6,7,8,9,1],
    [5,6,7,8,9,1,2,3,4],
    [8,9,1,2,3,4,5,6,7],
    [3,4,5,6,7,8,9,1,2],
    [6,7,8,9,1,2,3,4,5],
    [9,1,2,3,4,5,6,7,8]
  ]
  
  // 根据难度挖空
  const holes = { easy: 30, medium: 40, hard: 50 }
  const count = holes[level] || 30
  
  // 复制并打乱
  let board = JSON.parse(JSON.stringify(base))
  
  // 随机交换行和列来打乱
  for (let i = 0; i < 10; i++) {
    const r1 = Math.floor(Math.random() * 3) * 3
    const r2 = r1 + Math.floor(Math.random() * 3)
    ;[board[r1], board[r2]] = [board[r2], board[r1]]
  }
  for (let i = 0; i < 10; i++) {
    const c1 = Math.floor(Math.random() * 3) * 3
    const c2 = c1 + Math.floor(Math.random() * 3)
    board.forEach(row => {
      [row[c1], row[c2]] = [row[c2], row[c1]]
    })
  }
  
  // 挖空
  let cells = []
  for (let r = 0; r < 9; r++) {
    for (let c = 0; c < 9; c++) {
      cells.push({ r, c })
    }
  }
  // 随机打乱
  for (let i = cells.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1))
    ;[cells[i], cells[j]] = [cells[j], cells[i]]
  }
  
  for (let i = 0; i < count; i++) {
    const { r, c } = cells[i]
    board[r][c] = 0
  }
  
  return board
}

function checkSolution(board) {
  for (let r = 0; r < 9; r++) {
    for (let c = 0; c < 9; c++) {
      if (board[r][c] === 0) return false
    }
  }
  // 检查每行
  for (let r = 0; r < 9; r++) {
    const nums = new Set(board[r])
    if (nums.size !== 9) return false
  }
  // 检查每列
  for (let c = 0; c < 9; c++) {
    const nums = new Set()
    for (let r = 0; r < 9; r++) {
      nums.add(board[r][c])
    }
    if (nums.size !== 9) return false
  }
  // 检查3x3宫格
  for (let boxRow = 0; boxRow < 9; boxRow += 3) {
    for (let boxCol = 0; boxCol < 9; boxCol += 3) {
      const nums = new Set()
      for (let r = boxRow; r < boxRow + 3; r++) {
        for (let c = boxCol; c < boxCol + 3; c++) {
          nums.add(board[r][c])
        }
      }
      if (nums.size !== 9) return false
    }
  }
  return true
}

export default {
  data() {
    return {
      board: [],
      solution: [],
      selectedCell: null,
      isPlaying: false,
      time: 0,
      timer: null,
      showResult: false,
      score: 0,
      selectedLevel: 'easy',
      levels: [
        { label: '简单', value: 'easy' },
        { label: '中等', value: 'medium' },
        { label: '困难', value: 'hard' }
      ],
      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)
      }
    },
    isCellSelected(row, col) {
      return this.selectedCell && this.selectedCell.row === row && this.selectedCell.col === col
    },
    initBoard(data) {
      return data.map(row => row.map(val => ({
        value: val === 0 ? '' : val,
        fixed: val !== 0,
        error: false
      })))
    },
    startGame() {
      const puzzle = generateSudoku(this.selectedLevel)
      this.solution = puzzle
      this.board = this.initBoard(puzzle)
      this.isPlaying = true
      this.time = 0
      this.showResult = false
      
      this.timer = setInterval(() => {
        this.time++
      }, 1000)
    },
    selectCell(row, col) {
      if (!this.board[row][col].fixed) {
        this.selectedCell = { row, col }
      }
    },
    fillNumber(num) {
      if (!this.selectedCell) return
      
      const { row, col } = this.selectedCell
      this.board[row][col].value = num === 0 ? '' : num
      
      // 检查是否完成
      if (this.checkWin()) {
        this.finishGame()
      }
    },
    checkWin() {
      const current = this.board.map(row => row.map(cell => parseInt(cell.value) || 0))
      return checkSolution(current)
    },
    finishGame() {
      clearInterval(this.timer)
      this.isPlaying = false
      this.showResult = true
      
      // 分数计算：基础分 + 时间加成
      const baseScore = { easy: 60, medium: 75, hard: 90 }
      const base = baseScore[this.selectedLevel] || 60
      
      // 用时越短加成分越高
      const timeBonus = Math.max(40 - Math.floor(this.time / 10), 0)
      this.score = base + timeBonus
      
      // 调用API记录积分
      if (this.childId) {
        this.submitScore()
      }
    },
    async submitScore() {
      try {
        const BASE_URL = 'http://localhost:8080'
        const token = uni.getStorageSync('token')
        // 如果有taskId，说明是从任务跳转来的，使用任务完成接口
        if (this.taskId) {
          const res = await uni.request({
            url: `${BASE_URL}/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
            }
          })
          if (res.data && res.data.code === 200) {
            this.pointsEarned = res.data.data.pointsEarned
            this.newBalance = res.data.data.newBalance
            uni.showToast({
              title: `获得${this.pointsEarned}积分!`,
              icon: 'success'
            })
          }
        } else {
          // 普通小游戏完成
          const res = await completeMiniGame(this.childId, 'sudoku', this.time, this.score)
          if (res.code === 200) {
            this.pointsEarned = res.data.pointsEarned
            this.newBalance = res.data.newBalance
            uni.showToast({
              title: `获得${this.pointsEarned}积分!`,
              icon: 'success'
            })
          }
        }
      } catch (e) {
        console.error('提交成绩失败', e)
      }
    },
    resetGame() {
      this.isPlaying = false
      this.showResult = false
      this.board = []
      this.selectedCell = null
    }
  }
}
</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: 30rpx;
}

.game-title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #FFE66D;
}

.game-stats {
  margin-top: 20rpx;
  color: #fff;
  font-size: 32rpx;
}

.difficulty-select {
  display: flex;
  justify-content: center;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.level-btn {
  background: #2a2a4a;
  color: #fff;
  padding: 15rpx 40rpx;
  border-radius: 30rpx;
  border: none;
}

.level-btn.active {
  background: #4ECDC4;
  color: #1a1a2e;
}

.board {
  background: #2a2a4a;
  padding: 10rpx;
  border-radius: 10rpx;
  display: inline-block;
}

.row {
  display: flex;
}

.cell {
  width: 70rpx;
  height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  color: #fff;
  border: 1rpx solid rgba(255,255,255,0.1);
  cursor: pointer;
}

.cell.fixed {
  color: #4ECDC4;
  font-weight: bold;
}

.cell.selected {
  background: rgba(78, 205, 196, 0.3);
}

.cell.error {
  color: #FF6B6B;
}

.number-pad {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15rpx;
  margin-top: 40rpx;
}

.num-btn {
  width: 80rpx;
  height: 80rpx;
  background: #2a2a4a;
  color: #fff;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  border: none;
}

.num-btn.clear {
  background: #FF6B6B;
}

.controls {
  text-align: center;
  margin-top: 40rpx;
}

.start-btn {
  background: linear-gradient(135deg, #2196F3, #4CAF50);
  color: #fff;
  padding: 20rpx 60rpx;
  border-radius: 50rpx;
  border: none;
}

.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 {
  display: block;
  font-size: 48rpx;
  color: #FFE66D;
  margin-bottom: 30rpx;
}

.result-score {
  display: block;
  color: #fff;
  font-size: 32rpx;
  margin-bottom: 20rpx;
}

.restart-btn {
  background: #4ECDC4;
  color: #1a1a2e;
  padding: 20rpx 60rpx;
  border-radius: 50rpx;
  border: none;
  margin-top: 30rpx;
}
</style>