🎮 AfterShip 2025 Annual Summary Game

English | 中文

A retro pixel-art platformer game showcasing AfterShip's 2025 annual highlights! Inspired by classic games like Donkey Kong and Super Mario, this interactive experience transforms company achievements into an engaging adventure.

🎯 Live Demo: Play Now

• 🕹️ Classic Platformer Gameplay - Jump, climb ladders, and collect achievements
• 🎨 Retro Pixel Art Style - 8-bit visuals with CRT scanline effects
• 🔫 Shooting Mechanics - Shoot targets to unlock ladders
• 🎵 Chiptune Music - Super Mario-inspired background music
• 🗣️ Voice Narration - Text-to-speech for achievement announcements
• 🌐 Bilingual Support - Chinese & English language options
• 🏆 Leaderboard System - Compete with other players via Supabase
• 📸 Photo Wall Ending - Emotional photo montage at game completion
• 📱 Responsive Design - Works on desktop and mobile

Simply open index.html in your browser.

# Clone the repository
git clone https://github.com/KinGao294/AfterShip-2025-game-summary.git
cd AfterShip-2025-game-summary

# Start local server
python3 -m http.server 8000

# Open in browser
# http://localhost:8000

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

• Frontend: Pure HTML5, CSS3, JavaScript (No frameworks!)
• Audio: Web Audio API for sound effects & music
• Voice: SpeechSynthesis API (with optional Doubao TTS)
• Backend: Supabase (Authentication & Leaderboard)
• Deployment: Vercel / GitHub Pages

The game uses browser's built-in SpeechSynthesis by default. For higher quality voice narration, you can integrate Volcano Engine (火山引擎) Doubao TTS API:

1. Register at Volcano Engine Console
2. Enable "语音合成" (Speech Synthesis) service
3. Create an API Key
4. Create /api/tts.js with your credentials:

// api/tts.js - Vercel Serverless Function
export default async function handler(req, res) {
    const { text, voice } = req.body;
    
    const response = await fetch('https://openspeech.bytedance.com/api/v1/tts', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${process.env.DOUBAO_API_KEY}`
        },
        body: JSON.stringify({
            app: { appid: process.env.DOUBAO_APP_ID },
            user: { uid: 'game-user' },
            audio: { voice_type: voice, encoding: 'mp3' },
            request: { text, text_type: 'plain' }
        })
    });
    
    // Return audio data...
}

5. Set environment variables in Vercel:
   • DOUBAO_API_KEY
   • DOUBAO_APP_ID

Note: This is optional. The game works perfectly with browser's native voice!

├── index.html          # Main game file (all-in-one)
├── package.json        # Project metadata
├── vercel.json         # Vercel deployment config
├── README.md           # This file
├── LICENSE             # MIT License
├── *.png / *.jpg       # Photo wall images
└── docs/
    └── 2025 文案.md    # Game script (bilingual)

Edit the ACHIEVEMENTS array in index.html:

{ 
    id: 'your_id', 
    x: 400, 
    y: CONFIG.groundY,
    title: { zh: '中文标题', en: 'English Title' },
    text: { zh: '描述', en: 'Description' },
    number: '数据',
    // ...
}

1. Add new zone in ZONES array
2. Add achievements for the zone
3. Add platforms in PLATFORMS array
4. Add ladders in LADDERS array

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

• Inspired by classic Nintendo games (Donkey Kong, Super Mario)
• AfterShip team for the amazing 2025 achievements
• All AfterShippers who made these numbers possible ❤️

一款复古像素风格的平台跳跃游戏，展示 AfterShip 2025 年度亮点！灵感来自经典游戏《大金刚》和《超级马里奥》，将公司成就转化为有趣的冒险体验。

🎯 在线演示： 立即体验

• 🕹️ 经典平台跳跃 - 跳跃、爬梯子、收集成就
• 🎨 复古像素风格 - 8-bit 视觉效果，CRT 扫描线
• 🔫 射击机制 - 射击目标解锁梯子
• 🎵 芯片音乐 - 超级马里奥风格背景音乐
• 🗣️ 语音播报 - 成就公告语音播报
• 🌐 双语支持 - 中英文语言切换
• 🏆 排行榜系统 - 通过 Supabase 与其他玩家竞争
• 📸 照片墙结局 - 游戏通关后的感人照片回顾
• 📱 响应式设计 - 支持桌面和移动端

直接在浏览器中打开 index.html

# 克隆仓库
git clone https://github.com/KinGao294/AfterShip-2025-game-summary.git
cd AfterShip-2025-game-summary

# 启动本地服务器
python3 -m http.server 8000

# 浏览器访问
# http://localhost:8000

# 安装 Vercel CLI
npm i -g vercel

# 部署
vercel

• 前端： 纯 HTML5、CSS3、JavaScript（无框架！）
• 音频： Web Audio API 实现音效和音乐
• 语音： SpeechSynthesis API（可选豆包 TTS）
• 后端： Supabase（认证和排行榜）
• 部署： Vercel / GitHub Pages

游戏默认使用浏览器内置的语音合成。如需更高质量的语音播报，可以接入 火山引擎豆包 TTS API：

1. 注册 火山引擎控制台
2. 开通「语音合成」服务
3. 创建 API Key
4. 创建 /api/tts.js 配置你的凭证：

// api/tts.js - Vercel Serverless Function
export default async function handler(req, res) {
    const { text, voice } = req.body;
    
    const response = await fetch('https://openspeech.bytedance.com/api/v1/tts', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${process.env.DOUBAO_API_KEY}`
        },
        body: JSON.stringify({
            app: { appid: process.env.DOUBAO_APP_ID },
            user: { uid: 'game-user' },
            audio: { voice_type: voice, encoding: 'mp3' },
            request: { text, text_type: 'plain' }
        })
    });
    
    // 返回音频数据...
}

5. 在 Vercel 中设置环境变量：
   • DOUBAO_API_KEY
   • DOUBAO_APP_ID

注意： 这是可选功能。游戏使用浏览器原生语音即可正常运行！

本项目采用 MIT 许可证 - 详见 LICENSE 文件

• 灵感来自任天堂经典游戏（大金刚、超级马里奥）
• 感谢 AfterShip 团队 2025 年的精彩成就
• 感谢每一位让这些数字成为可能的 AfterShipper ❤️

Made with ❤️ by AfterShip Team