当前位置：首页 > article >正文

UniApp 24点数学游戏开发实践

article 2025/3/4 13:11:01

UniApp 24点数学游戏开发实践

一、项目简介

24点数学游戏是一个经典的数学益智游戏，旨在培养用户的数学思维和计算能力。本项目基于UniApp + Vue3开发，实现了一个跨平台的24点游戏应用。

在线演示

演示地址: http://demo.xiyueta.com/case/web20250222/#/pagesA/tool/sxyzsw
测试账号: demo
测试密码: 123456

使用效果

数学益智思维

1.1 功能特点

闯关模式：按难度递增的关卡设计
详细的解题过程：实时展示运算步骤和中间结果
智能提示系统：在用户遇到困难时提供合理的提示
进度保存：自动保存用户闯关进度
成就系统：记录用户解题进度

1.2 技术栈

前端框架：UniApp + Vue3
状态管理：Vue3 Composition API
UI组件：uni-ui + 自定义组件
数据存储：uni.storage
动画效果：CSS3 + uni.animation

二、核心功能实现

2.1 游戏核心算法

// 使用递归实现24点算法
function solve24(numbers) {
  if (numbers.length === 1) {
    return Math.abs(numbers[0] - 24) < 0.0001;
  }
  
  for (let i = 0; i < numbers.length; i++) {
    for (let j = i + 1; j < numbers.length; j++) {
      const a = numbers[i];
      const b = numbers[j];
      const remainNums = numbers.filter((_, idx) => idx !== i && idx !== j);
      
      // 尝试所有可能的运算
      const attempts = [
        a + b,
        a - b,
        b - a,
        a * b,
        a / b,
        b / a
      ];
      
      for (const result of attempts) {
        if (solve24([...remainNums, result])) {
          return true;
        }
      }
    }
  }
  return false;
}

2.2 状态管理设计

// 使用Vue3 Composition API管理游戏状态
const gameState = reactive({
  numbers: [], // 当前题目数字
  operations: [], // 运算步骤
  currentStep: 0, // 当前步骤
  level: 1 // 当前关卡
});

// 计算属性监听游戏状态
const isGameOver = computed(() => {
  return gameState.currentStep >= 3 || 
         Math.abs(calculateResult() - 24) < 0.0001;
});

2.3 数据持久化

// 保存游戏进度
const saveProgress = () => {
  try {
    uni.setStorageSync('game_progress', {
      level: gameState.level,
      timestamp: Date.now()
    });
  } catch (e) {
    console.error('保存进度失败:', e);
  }
};

// 读取游戏进度
const loadProgress = () => {
  try {
    const progress = uni.getStorageSync('game_progress');
    if (progress) {
      gameState.level = progress.level;
    }
  } catch (e) {
    console.error('读取进度失败:', e);
  }
};

三、开发中遇到的问题及解决方案

3.1 数字精度问题

在JavaScript中进行除法运算时可能出现精度误差，影响判定结果。

解决方案：

// 使用自定义的精度比较函数
const isEqual = (a, b, precision = 0.0001) => {
  return Math.abs(a - b) < precision;
};

// 在计算过程中统一处理精度
const formatNumber = (num) => {
  return parseFloat(num.toFixed(4));
};

3.2 性能优化

在递归计算所有可能解时，可能会出现性能问题。

解决方案：

// 使用记忆化存储优化递归性能
const memo = new Map();

const getKey = (numbers) => numbers.sort().join(',');

function solve24WithMemo(numbers) {
  const key = getKey(numbers);
  if (memo.has(key)) {
    return memo.get(key);
  }
  
  // 原有的solve24逻辑
  const result = solve24(numbers);
  memo.set(key, result);
  return result;
}