103 lines
4.9 KiB
YAML
103 lines
4.9 KiB
YAML
# Technical Design Document for {{GAME_NAME}}
|
|
|
|
## 1. Introduction
|
|
- **Purpose:** This document outlines the technical architecture, components, and implementation details for the WeChat Mini Game, "{{GAME_NAME}}".
|
|
- **Target Audience:** Development team, QA team, and technical stakeholders.
|
|
- **Related Documents:** Game Design Document, MVP Plan.
|
|
|
|
## 2. System Architecture
|
|
- A high-level diagram illustrating the overall architecture.
|
|
|
|
```
|
|
+------------------------+ +-----------------------+ +----------------------+
|
|
| WeChat Mini Game | | | | |
|
|
| (Client) |----->| Game Backend Server |----->| Database |
|
|
| | | (e.g., Node.js) | | (e.g., MongoDB, MySQL) |
|
|
| - Game Logic (JS/TS) |<-----| |<-----| |
|
|
| - Rendering (Canvas) | +-----------------------+ +----------------------+
|
|
| - WeChat APIs |
|
|
+------------------------+
|
|
^
|
|
|
|
|
+------------------------+
|
|
| WeChat Open Data |
|
|
| Context (for Social) |
|
|
+------------------------+
|
|
```
|
|
|
|
## 3. Client-Side Architecture (WeChat Mini Game)
|
|
- **Programming Language:** JavaScript / TypeScript (Specify which one and the version).
|
|
- **Engine/Framework:** Native WeChat Mini Game framework.
|
|
- **Directory Structure:**
|
|
```
|
|
/ (root)
|
|
|-- /assets
|
|
| |-- /images
|
|
| |-- /audio
|
|
|-- /js
|
|
| |-- /libs (third-party libraries)
|
|
| |-- /main.js (entry point)
|
|
| |-- /game-logic.js
|
|
| |-- /ui-components.js
|
|
|-- /pages
|
|
| |-- /index
|
|
| |-- /game
|
|
|-- app.js
|
|
|-- app.json
|
|
|-- app.wxss
|
|
|-- project.config.json
|
|
```
|
|
- **State Management:** How will the application state be managed? (e.g., Global object, simple event bus, a lightweight state management library).
|
|
- **Key Components / Modules:**
|
|
- **`GameManager`:** Controls the main game loop, state transitions (e.g., main menu, playing, game over).
|
|
- **`InputHandler`:** Manages user input (touch events).
|
|
- **`AssetLoader`:** Handles loading of images, audio, and other assets.
|
|
- **`Renderer`:** Responsible for drawing all game objects to the canvas.
|
|
- **`APIWrapper`:** A module to wrap all `wx.` API calls for easier management and mocking.
|
|
|
|
## 4. Backend Architecture (if applicable)
|
|
- **Platform:** (e.g., Node.js with Express, Serverless Framework on Tencent Cloud).
|
|
- **Database Schema:**
|
|
- **`Users` Collection/Table:**
|
|
- `_id`: (Primary Key)
|
|
- `openId`: (WeChat User ID)
|
|
- `nickname`: String
|
|
- `avatarUrl`: String
|
|
- `highScore`: Number
|
|
- `lastLogin`: Date
|
|
- **Other Collections/Tables...**
|
|
- **API Endpoints:**
|
|
- `POST /api/login`: Authenticates the user with a code from `wx.login` and returns a session token.
|
|
- `GET /api/user/:id`: Retrieves user profile data.
|
|
- `POST /api/score`: Submits a new score for the user.
|
|
- `GET /api/leaderboard`: Retrieves the global or friend leaderboard.
|
|
|
|
## 5. Data Persistence
|
|
- **Client-Side:**
|
|
- **`wx.setStorageSync` / `wx.getStorageSync`:** Used for storing non-critical data like user settings (e.g., sound on/off).
|
|
- **`wx.setStorage` / `wx.getStorage`:** Used for asynchronous storage of data like the local high score.
|
|
- **Server-Side:**
|
|
- The primary database will be the source of truth for all critical user data.
|
|
|
|
## 6. WeChat API Integration
|
|
- **`wx.login`:** For user authentication.
|
|
- **`wx.getUserProfile`:** To get user's nickname and avatar.
|
|
- **Open Data Context & `wx.getFriendCloudStorage`:** For implementing friend leaderboards without needing a custom backend.
|
|
- **`wx.shareAppMessage`:** For sharing functionality.
|
|
- **`wx.createInnerAudioContext`:** For sound effects and music.
|
|
- **`wx.request`:** For all communication with the backend server.
|
|
|
|
## 7. Performance Considerations
|
|
- **Asset Optimization:** All images will be compressed (e.g., using TinyPNG) and sized appropriately. Audio files will be in a compressed format (e.g., MP3).
|
|
- **Draw Call Batching:** Where possible, similar sprites will be drawn together to reduce draw calls.
|
|
- **Object Pooling:** Re-use objects (like enemies or projectiles) instead of creating and destroying them frequently to reduce garbage collection overhead.
|
|
- **Code Subpackaging:** For larger games, use WeChat's subpackaging feature to reduce the initial download size.
|
|
|
|
## 8. Error Handling & Logging
|
|
- **Client-Side:** `try...catch` blocks for critical operations. A global error handler to catch unhandled exceptions.
|
|
- **Logging:** Use a remote logging service (or a simple backend endpoint) to log critical errors for easier debugging of issues in the wild.
|
|
|
|
## 9. Security
|
|
- **Authentication:** The backend will securely exchange the `js_code` from `wx.login` for a `session_key` and `openid` from WeChat's servers. This `session_key` will be used to verify the integrity of subsequent requests.
|
|
- **Data Transfer:** All communication between the client and server will be over HTTPS.
|