# CubeCounter

**Repository Path**: WDpippo/CubeCounter

## Basic Information

- **Project Name**: CubeCounter
- **Description**: 数方块个数，小游戏，随机生成小方块，在30秒内点选更多正确的方块数
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-10
- **Last Updated**: 2026-03-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# Cube Counter

Cube Counter 是一款基于 Vue 3 + Three.js 的 3D 计数游戏，玩家需要在 3D 空间中统计立方体的数量。

## 项目技术栈

- **前端框架**: Vue 3 + TypeScript
- **3D 渲染**: Three.js
- **构建工具**: Vite
- **包管理**: pnpm

## 项目结构

```
├── src/
│   ├── components/          # Vue 组件
│   │   ├── GameHeader.vue          # 游戏顶部信息栏
│   │   ├── GameOverModal.vue       # 游戏结束弹窗
│   │   ├── Leaderboard.vue         # 排行榜组件
│   │   ├── LeaderboardModal.vue    # 排行榜弹窗
│   │   ├── OptionsPanel.vue        # 选项设置面板
│   │   └── StartScreen.vue         # 开始界面
│   ├── game/                # 游戏核心逻辑
│   │   ├── audioManager.ts         # 音频管理器
│   │   ├── gameLogic.ts            # 游戏逻辑
│   │   ├── threeSceneAuto.ts       # 自动相机 3D 场景
│   │   └── threeSceneManual.ts     # 手动控制 3D 场景
│   ├── main/
│   │   ├── index.ts                 # 入口文件
│   │   └── index.vue                # 根组件
│   └── types/               # TypeScript 类型定义
│       ├── cubePosition.d.ts        # 立方体位置类型
│       ├── gameScore.d.ts           # 游戏分数类型
│       ├── gameState.d.ts           # 游戏状态类型
│       └── userInfo.d.ts            # 用户信息类型
├── index.html
├── package.json
├── vite.config.ts
└── tsconfig.json
```

## 功能特性

- **3D 立方体计数**: 在 3D 空间中生成随机立方体，玩家需要准确统计数量
- **双视角模式**: 支持自动旋转视角和手动控制视角两种模式
- **游戏排行榜**: 记录玩家最高分
- **音效反馈**: 游戏过程中的音效提示
- **响应式设计**: 适配不同屏幕尺寸

## 运行项目

```bash
# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build
```

## 游戏流程

1. **开始界面**: 点击开始按钮进入游戏
2. **计数阶段**: 观察 3D 场景中的立方体，输入你统计的数量
3. **结果判定**: 系统判定计数是否正确
4. **排行榜**: 正确计数后可查看排行榜

## 注意事项

- 请确保浏览器支持 WebGL
- 建议在网络稳定的环境下运行以加载所有资源