三国华容道 - 抖音小游戏

一款专为抖音平台优化的经典华容道益智游戏，融合现代游戏设计理念，打造极致用户体验。

🎮 游戏特色

• 📱 完美适配移动端：针对手机屏幕优化的触控操作和响应式布局
• 🎯 每日挑战模式：每天一个专属关卡，双倍积分等你来拿
• 🏆 成就系统：8个精心设计的成就，挑战你的极限
• 🎬 智能广告复活：步数过多时自动提示，一键减少5步
• ⭐ 星级评价系统：根据步数和时间获得1-3星评价
• 🔄 撤销功能：支持悔棋，降低游戏难度
• 💡 提示系统：每关一次提示机会
• 📊 20个关卡：经典布局+随机关卡，持续更新

核心功能

1. 每日挑战模式 🎯

• 专属关卡：每天从精选关卡中随机选择一个
• 倒计时显示：实时显示剩余挑战时间
• 双倍奖励：完成每日挑战获得双倍积分
• 成就解锁：累计完成5次每日挑战解锁专属成就

// 每日挑战基于日期生成
function getDailyLevelIndex() {
    const dayOfYear = Math.floor((new Date() - new Date(new Date().getFullYear(), 0, 0)) / 86400000);
    return CONFIG.DAILY_CHALLENGE_LEVELS[dayOfYear % CONFIG.DAILY_CHALLENGE_LEVELS.length];
}

2. 成就系统 🏆

成就	描述	难度
🎯 初露锋芒	完成第1关	⭐
⚡ 速度恶魔	30秒内完成任意关卡	⭐⭐⭐
⭐ 完美主义者	获得3个三星评价	⭐⭐
👑 华容道大师	完成所有关卡	⭐⭐⭐⭐⭐
🔄 复活达人	使用复活功能5次	⭐⭐
🏅 每日冠军	完成5次每日挑战	⭐⭐⭐
↩️ 悔棋大师	累计撤销100次	⭐⭐
🔥 坚持不懈	连续7天登录	⭐⭐⭐⭐

3. 智能广告复活 🎬

• 自动触发：步数超过最优解1.8倍时自动提示
• 视觉提醒：顶部警告条+底部快捷按钮
• 冷却机制：60秒冷却时间，防止滥用
• 步数奖励：观看完整视频获得5步奖励

// 智能复活触发逻辑
function checkSmartRevive() {
    const levelData = LEVELS[gameState.currentLevel - 1];
    const ratio = gameState.moveCount / levelData.optimal;

    if (ratio >= CONFIG.SMART_REVIVE_THRESHOLD && !gameState.isDailyChallenge) {
        showMoveWarning();
        showSmartReviveHint();
    }
}

4. 抖音平台特性

• 激励视频广告：tt.createRewardedVideoAd()
• 云存档：tt.setCloudStorage() / tt.getCloudStorage()
• 社交分享：tt.shareAppMessage()
• 数据分析：tt.reportAnalytics()
• 震动反馈：navigator.vibrate()

5. 用户体验优化

• 单手操作友好的竖屏设计
• 流畅的棋子拖拽动画
• 胜利时的震动反馈和粒子效果
• 关卡完成度的可视化展示
• 加载动画提升等待体验

文件结构

华容道/
├── index.html          # 游戏主文件（包含HTML/CSS/JS，2000+行）
├── game.json           # 抖音小游戏配置文件
├── project.config.json # 项目配置文件
└── README.md          # 项目说明

抖音小游戏接入指南

1. 注册抖音开放平台账号

• 访问 抖音开放平台
• 完成实名认证
• 创建小游戏应用，获取 AppID

2. 配置广告位

• 在开放平台"商业化"模块申请流量主权限
• 创建激励视频广告位，获取 AdUnitId
• 将广告位ID填入 index.html 第1235行的 adUnitId 字段

3. 修改配置文件

• 更新 project.config.json 中的 appid 为你申请的 AppID
• 根据需要调整 game.json 中的配置

4. 上传发布

• 使用抖音开发者工具导入项目
• 填写游戏基本信息、上传素材
• 提交审核，等待上线

技术实现

移动端适配

// 动态计算棋盘大小，适配各种屏幕
function calculateBoardSize() {
    const maxWidth = Math.min(container.clientWidth - 24, 340);
    const maxHeight = Math.min(window.innerHeight * 0.55, 425);
    
    CONFIG.CELL_WIDTH = Math.floor((maxWidth - CONFIG.GAP * (CONFIG.BOARD_COLS - 1)) / CONFIG.BOARD_COLS);
    CONFIG.CELL_HEIGHT = Math.floor((maxHeight - CONFIG.GAP * (CONFIG.BOARD_ROWS - 1)) / CONFIG.BOARD_ROWS);
    
    const size = Math.min(CONFIG.CELL_WIDTH, CONFIG.CELL_HEIGHT);
    CONFIG.CELL_WIDTH = size;
    CONFIG.CELL_HEIGHT = size;
}

触控优化

// 同时支持触摸和鼠标事件，兼容移动端和PC端
el.addEventListener('touchstart', handleTouchStart, { passive: false });
el.addEventListener('touchmove', handleTouchMove, { passive: false });
el.addEventListener('touchend', handleTouchEnd);
el.addEventListener('mousedown', handleMouseDown);

广告接入

// 初始化激励视频广告
rewardedVideoAd = ttSDK.createRewardedVideoAd({
    adUnitId: 'your_ad_unit_id'
});

// 监听广告事件
rewardedVideoAd.onLoad(() => {
    console.log('激励视频广告加载成功');
});

rewardedVideoAd.onClose((res) => {
    if (res && res.isEnded) {
        onAdComplete(); // 发放奖励
    }
});

// 展示广告
await rewardedVideoAd.show();

随机关卡生成

// 从已知可解的关卡开始，进行合法变换
function generateSolvableLevel(index) {
    const baseLevel = LEVELS[index % 5];
    const pieces = JSON.parse(JSON.stringify(baseLevel.pieces));
    
    // 只交换相同类型的棋子，确保有解
    const shuffled = shufflePieces(pieces);
    
    return {
        name: `第${index + 1}关`,
        optimal: 60 + Math.floor(Math.random() * 50),
        pieces: shuffled
    };
}

关卡设计

游戏包含20个关卡：

• 前5关：经典布局（横刀立马、指挥若定、将拥曹营、齐头并进、兵分三路）
• 6-20关：基于经典布局的随机关卡，确保有解

每个关卡都有最优步数参考，玩家可以根据步数获得星级评价：

• ⭐⭐⭐ 步数 ≤ 最优解 × 1.5
• ⭐⭐ 步数 ≤ 最优解 × 2.0
• ⭐ 步数 ≤ 最优解 × 2.5

数据存储

本地存储

使用 localStorage 保存：

• 已完成关卡
• 各关卡星级
• 当前关卡进度
• 成就解锁状态
• 统计数据（总撤销次数、总复活次数等）

云存档

使用抖音云存储 API：

• 跨设备同步进度
• 数据安全可靠
• 自动备份

// 保存进度
function saveProgress() {
    const data = {
        completedLevels: [...gameState.completedLevels],
        levelStars: gameState.levelStars,
        currentLevel: gameState.currentLevel,
        totalRevives: gameState.totalRevives,
        totalUndos: gameState.totalUndos,
        fastestTime: gameState.fastestTime,
        dailyChallengesCompleted: gameState.dailyChallengesCompleted,
        consecutiveDays: gameState.consecutiveDays,
        lastLoginDate: gameState.lastLoginDate,
        unlockedAchievements: [...gameState.unlockedAchievements]
    };

    localStorage.setItem('huarongdao_douyin', JSON.stringify(data));
    
    if (ttSDK && ttSDK.setCloudStorage) {
        ttSDK.setCloudStorage({
            KVDataList: [{ key: 'progress', value: JSON.stringify(data) }]
        });
    }
}

性能优化

• 使用 will-change 优化动画性能
• 触摸事件使用 passive: false 防止滚动冲突
• 棋盘大小动态计算，适配各种屏幕
• 资源内联，减少HTTP请求
• CSS动画使用GPU加速

审核注意事项

1. 广告合规：确保广告展示符合抖音平台规范
2. 用户体验：广告不能强制观看，必须提供跳过选项
3. 内容健康：游戏内容符合社会主义核心价值观
4. 性能要求：首屏加载时间 < 3秒
5. 适配要求：支持主流手机屏幕分辨率
6. 隐私保护：遵守抖音平台隐私政策

更新日志

v1.1.0 (2025-02-25)

• ✨ 新增每日挑战模式
• ✨ 新增成就系统（8个成就）
• ✨ 新增智能广告复活触发
• 🎨 优化视觉特效和动画
• 🔧 改进随机关卡生成算法
• 📱 进一步优化移动端体验

v1.0.0 (2025-02-25)

• 🎉 初始版本发布
• ✅ 完成抖音小游戏适配
• ✅ 集成广告、分享、云存档功能
• ✅ 20个关卡全部上线

游戏截图

主界面

• 金色渐变标题
• 关卡徽章显示
• 步数和时间统计
• 精美的棋盘设计

每日挑战

• 靶心图标按钮
• 倒计时显示
• 双倍奖励提示

成就系统

• 奖杯图标按钮
• 网格布局展示
• 解锁状态标识

智能复活

• 顶部警告提示
• 底部快捷按钮
• 流畅的动画效果

常见问题

Q: 如何获得三星评价？

A: 步数需要控制在最优解的1.5倍以内。例如，某关最优解是81步，那么121步以内可以获得三星。

Q: 广告复活有次数限制吗？

A: 每次观看广告后有60秒冷却时间，但没有总次数限制。

Q: 每日挑战可以重复完成吗？

A: 每天只能完成一次每日挑战，完成后按钮会自动隐藏。

Q: 成就解锁后有什么奖励？

A: 成就解锁会有震动反馈和提示动画，同时记录在成就系统中，可以随时查看。

联系方式

如有问题或建议，欢迎反馈！

---

注意：本项目仅供学习参考，商用请遵守抖音平台相关规定。