<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合成大西瓜</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #26a65b;
            font-family: Arial, sans-serif;
            overflow: hidden;
            touch-action: none;
            user-select: none;
        }
        #game-container {
            position: relative;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }
        #game-canvas {
            display: block;
            background: #26a65b;
        }
        #score-container {
            position: absolute;
            top: 20px;
            left: 20px;
            color: white;
            font-size: 24px;
            font-weight: bold;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
        }
        #game-over {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 36px;
            display: none;
        }
        #restart-btn {
            margin-top: 20px;
            padding: 10px 30px;
            background: #f1c40f;
            border: none;
            border-radius: 5px;
            font-size: 24px;
            color: #2c3e50;
            cursor: pointer;
        }
        #next-fruit {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background: rgba(255,255,255,0.2);
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <canvas id="game-canvas"></canvas>
        <div id="score-container">分数: <span id="score">0</span></div>
        <div id="next-fruit"></div>
        <div id="game-over">
            <div>游戏结束!</div>
            <div>最终分数: <span id="final-score">0</span></div>
            <button id="restart-btn">重新开始</button>
        </div>
        <a href="/game/0gamelist.html" class="back-btn">返回游戏列表</a>
    </div>

    <script>
        // 游戏配置
        const config = {
            width: window.innerWidth,
            height: window.innerHeight,
            gravity: 0.5,
            friction: 0.4,
            restitution: 0.6,
            fruitTypes: [
                { name: '葡萄', radius: 20, color: '#8e44ad', score: 1, mergeTo: 1 },
                { name: '樱桃', radius: 28, color: '#e74c3c', score: 2, mergeTo: 2 },
                { name: '橘子', radius: 36, color: '#f39c12', score: 3, mergeTo: 3 },
                { name: '柠檬', radius: 44, color: '#f1c40f', score: 4, mergeTo: 4 },
                { name: '猕猴桃', radius: 52, color: '#2ecc71', score: 5, mergeTo: 5 },
                { name: '番茄', radius: 60, color: '#e74c3c', score: 6, mergeTo: 6 },
                { name: '桃子', radius: 68, color: '#ff9ff3', score: 7, mergeTo: 7 },
                { name: '菠萝', radius: 76, color: '#feca57', score: 8, mergeTo: 8 },
                { name: '椰子', radius: 84, color: '#c8d6e5', score: 9, mergeTo: 9 },
                { name: '西瓜', radius: 92, color: '#1dd1a1', score: 10, mergeTo: null }
            ],
            maxFruits: 10,
            ceilingHeight: 100
        };

        // 游戏状态
        let canvas, ctx;
        let fruits = [];
        let currentFruit = null;
        let nextFruitType = 0;
        let score = 0;
        let gameOver = false;
        let animationId;
        let lastTimestamp = 0;
        let gameStarted = false;

        // 初始化游戏
        function init() {
            canvas = document.getElementById('game-canvas');
            ctx = canvas.getContext('2d');
            
            resizeCanvas();
            window.addEventListener('resize', resizeCanvas);
            
            // 事件监听
            canvas.addEventListener('mousedown', handleMouseDown);
            canvas.addEventListener('mousemove', handleMouseMove);
            canvas.addEventListener('mouseup', handleMouseUp);
            
            canvas.addEventListener('touchstart', handleTouchStart, { passive: false });
            canvas.addEventListener('touchmove', handleTouchMove, { passive: false });
            canvas.addEventListener('touchend', handleTouchEnd);
            
            document.getElementById('restart-btn').addEventListener('click', restartGame);
            
            // 生成第一个水果
            generateNextFruit();
            
            // 开始游戏循环
            gameLoop();
        }

        // 调整画布大小
        function resizeCanvas() {
            config.width = window.innerWidth;
            config.height = window.innerHeight;
            canvas.width = config.width;
            canvas.height = config.height;
        }

        // 游戏主循环
        function gameLoop(timestamp = 0) {
            const deltaTime = timestamp - lastTimestamp;
            lastTimestamp = timestamp;
            
            update(deltaTime);
            render();
            
            if (!gameOver) {
                animationId = requestAnimationFrame(gameLoop);
            }
        }

        // 更新游戏状态
        function update(deltaTime) {
            // 更新当前控制的水果
            if (currentFruit && !currentFruit.dropped) {
                currentFruit.x = Math.max(
                    currentFruit.radius, 
                    Math.min(config.width - currentFruit.radius, currentFruit.x)
                );
            }
            
            // 更新所有水果
            for (let i = 0; i < fruits.length; i++) {
                const fruit = fruits[i];
                
                // 应用重力
                fruit.vy += config.gravity;
                
                // 更新位置
                fruit.x += fruit.vx;
                fruit.y += fruit.vy;
                
                // 边界碰撞检测
                if (fruit.x - fruit.radius < 0) {
                    fruit.x = fruit.radius;
                    fruit.vx *= -config.restitution;
                } else if (fruit.x + fruit.radius > config.width) {
                    fruit.x = config.width - fruit.radius;
                    fruit.vx *= -config.restitution;
                }
                
                // 底部碰撞检测
                if (fruit.y + fruit.radius > config.height) {
                    fruit.y = config.height - fruit.radius;
                    fruit.vy *= -config.restitution;
                    
                    // 摩擦力
                    fruit.vx *= config.friction;
                    
                    // 停止判断
                    if (Math.abs(fruit.vy) < 0.5) {
                        fruit.vy = 0;
                    }
                }
                
                // 天花板碰撞检测
                if (fruit.y - fruit.radius < config.ceilingHeight) {
                    fruit.y = fruit.radius + config.ceilingHeight;
                    fruit.vy *= -config.restitution;
                    
                    // 游戏结束检查
                    if (fruit.type === 0 && fruit.y <= config.ceilingHeight + fruit.radius) {
                        endGame();
                    }
                }
                
                // 水果间碰撞检测
                for (let j = i + 1; j < fruits.length; j++) {
                    const otherFruit = fruits[j];
                    const dx = otherFruit.x - fruit.x;
                    const dy = otherFruit.y - fruit.y;
                    const distance = Math.sqrt(dx * dx + dy * dy);
                    
                    // 碰撞发生
                    if (distance < fruit.radius + otherFruit.radius) {
                        // 相同类型水果合并
                        if (fruit.type === otherFruit.type && fruit.type < config.fruitTypes.length - 1) {
                            mergeFruits(fruit, otherFruit);
                            break; // 合并后跳出循环
                        }
                        
                        // 碰撞响应
                        const angle = Math.atan2(dy, dx);
                        const sin = Math.sin(angle);
                        const cos = Math.cos(angle);
                        
                        // 旋转速度
                        const vx1 = fruit.vx * cos + fruit.vy * sin;
                        const vy1 = fruit.vy * cos - fruit.vx * sin;
                        const vx2 = otherFruit.vx * cos + otherFruit.vy * sin;
                        const vy2 = otherFruit.vy * cos - otherFruit.vx * sin;
                        
                        // 碰撞后速度
                        const finalVx1 = ((fruit.radius - otherFruit.radius) * vx1 + 2 * otherFruit.radius * vx2) / 
                                         (fruit.radius + otherFruit.radius);
                        const finalVx2 = ((otherFruit.radius - fruit.radius) * vx2 + 2 * fruit.radius * vx1) / 
                                         (fruit.radius + otherFruit.radius);
                        
                        // 更新速度
                        fruit.vx = finalVx1 * cos - vy1 * sin;
                        fruit.vy = vy1 * cos + finalVx1 * sin;
                        otherFruit.vx = finalVx2 * cos - vy2 * sin;
                        otherFruit.vy = vy2 * cos + finalVx2 * sin;
                        
                        // 分离水果防止重叠
                        const overlap = fruit.radius + otherFruit.radius - distance;
                        const moveX = overlap * cos * 0.5;
                        const moveY = overlap * sin * 0.5;
                        
                        fruit.x -= moveX;
                        fruit.y -= moveY;
                        otherFruit.x += moveX;
                        otherFruit.y += moveY;
                    }
                }
            }
            
            // 移除标记为删除的水果
            fruits = fruits.filter(fruit => !fruit.delete);
        }

        // 渲染游戏
        function render() {
            // 清空画布
            ctx.clearRect(0, 0, config.width, config.height);
            
            // 绘制背景
            ctx.fillStyle = '#26a65b';
            ctx.fillRect(0, 0, config.width, config.height);
            
            // 绘制天花板
            ctx.fillStyle = '#16a085';
            ctx.fillRect(0, 0, config.width, config.ceilingHeight);
            
            // 绘制所有水果
            fruits.forEach(fruit => {
                drawFruit(fruit);
            });
            
            // 绘制当前控制的水果
            if (currentFruit && !currentFruit.dropped) {
                drawFruit(currentFruit);
                
                // 绘制预测线
                ctx.beginPath();
                ctx.moveTo(currentFruit.x, currentFruit.y);
                ctx.lineTo(currentFruit.x, config.height);
                ctx.strokeStyle = 'rgba(255,255,255,0.5)';
                ctx.lineWidth = 2;
                ctx.stroke();
            }
        }

        // 绘制水果
        function drawFruit(fruit) {
            const fruitType = config.fruitTypes[fruit.type];
            
            // 绘制水果主体
            ctx.beginPath();
            ctx.arc(fruit.x, fruit.y, fruit.radius, 0, Math.PI * 2);
            ctx.fillStyle = fruitType.color;
            ctx.fill();
            
            // 绘制高光
            ctx.beginPath();
            ctx.arc(
                fruit.x - fruit.radius * 0.3, 
                fruit.y - fruit.radius * 0.3, 
                fruit.radius * 0.2, 
                0, 
                Math.PI * 2
            );
            ctx.fillStyle = 'rgba(255,255,255,0.3)';
            ctx.fill();
            
            // 绘制水果名称
            ctx.fillStyle = '#fff';
            ctx.font = `${fruit.radius * 0.4}px Arial`;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(fruitType.name, fruit.x, fruit.y);
        }

        // 生成下一个水果
        function generateNextFruit() {
            // 随机生成水果类型 (倾向于生成小水果)
            nextFruitType = Math.min(
                Math.floor(Math.pow(Math.random(), 2) * config.fruitTypes.length),
                config.fruitTypes.length - 2
            );
            
            // 更新预览
            updateNextFruitPreview();
            
            // 创建当前控制的水果
            currentFruit = {
                x: config.width / 2,
                y: 150,
                vx: 0,
                vy: 0,
                radius: config.fruitTypes[nextFruitType].radius,
                type: nextFruitType,
                dropped: false
            };
            
            gameStarted = true;
        }

        // 更新下一个水果预览
        function updateNextFruitPreview() {
            const nextFruitEl = document.getElementById('next-fruit');
            const fruitType = config.fruitTypes[nextFruitType];
            
            nextFruitEl.innerHTML = '';
            
            const previewCanvas = document.createElement('canvas');
            previewCanvas.width = 50;
            previewCanvas.height = 50;
            const previewCtx = previewCanvas.getContext('2d');
            
            // 绘制预览水果
            previewCtx.beginPath();
            previewCtx.arc(25, 25, 20, 0, Math.PI * 2);
            previewCtx.fillStyle = fruitType.color;
            previewCtx.fill();
            
            // 绘制高光
            previewCtx.beginPath();
            previewCtx.arc(15, 15, 5, 0, Math.PI * 2);
            previewCtx.fillStyle = 'rgba(255,255,255,0.3)';
            previewCtx.fill();
            
            // 绘制水果名称
            previewCtx.fillStyle = '#fff';
            previewCtx.font = '10px Arial';
            previewCtx.textAlign = 'center';
            previewCtx.textBaseline = 'middle';
            previewCtx.fillText(fruitType.name, 25, 25);
            
            nextFruitEl.appendChild(previewCanvas);
        }

        // 放下当前水果
        function dropFruit() {
            if (!currentFruit || currentFruit.dropped) return;
            
            currentFruit.dropped = true;
            fruits.push(currentFruit);
            
            // 延迟生成下一个水果
            setTimeout(() => {
                generateNextFruit();
                
                // 检查水果数量是否过多
                if (fruits.length > config.maxFruits) {
                    endGame();
                }
            }, 500);
        }

        // 合并两个相同水果
        function mergeFruits(fruit1, fruit2) {
            const newType = fruit1.type + 1;
            const newFruit = {
                x: (fruit1.x + fruit2.x) / 2,
                y: (fruit1.y + fruit2.y) / 2,
                vx: (fruit1.vx + fruit2.vx) / 2,
                vy: (fruit1.vy + fruit2.vy) / 2 - 2, // 给一点向上的力
                radius: config.fruitTypes[newType].radius,
                type: newType
            };
            
            // 标记旧水果为删除
            fruit1.delete = true;
            fruit2.delete = true;
            
            // 添加新水果
            fruits.push(newFruit);
            
            // 增加分数
            score += config.fruitTypes[newType].score;
            document.getElementById('score').textContent = score;
            
            // 播放合并音效
            playMergeSound();
        }

        // 播放合并音效
        function playMergeSound() {
            // 实际项目中可以添加音效文件
            // 这里简单使用Web Audio API生成一个音效
            try {
                const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
                const oscillator = audioCtx.createOscillator();
                const gainNode = audioCtx.createGain();
                
                oscillator.type = 'sine';
                oscillator.frequency.value = 400 + Math.random() * 200;
                gainNode.gain.value = 0.1;
                
                oscillator.connect(gainNode);
                gainNode.connect(audioCtx.destination);
                
                oscillator.start();
                gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.3);
                oscillator.stop(audioCtx.currentTime + 0.3);
            } catch (e) {
                console.log('Web Audio API not supported');
            }
        }

        // 游戏结束
        function endGame() {
            gameOver = true;
            document.getElementById('final-score').textContent = score;
            document.getElementById('game-over').style.display = 'flex';
            cancelAnimationFrame(animationId);
        }

        // 重新开始游戏
        function restartGame() {
            fruits = [];
            score = 0;
            gameOver = false;
            document.getElementById('score').textContent = '0';
            document.getElementById('game-over').style.display = 'none';
            
            generateNextFruit();
            gameLoop();
        }

        // 鼠标/触摸事件处理
        function handleMouseDown(e) {
            if (!gameStarted) {
                gameStarted = true;
                return;
            }
            
            if (currentFruit && !currentFruit.dropped) {
                currentFruit.x = e.clientX;
            }
        }

        function handleMouseMove(e) {
            if (currentFruit && !currentFruit.dropped) {
                currentFruit.x = e.clientX;
            }
        }

        function handleMouseUp() {
            if (currentFruit && !currentFruit.dropped) {
                dropFruit();
            }
        }

        function handleTouchStart(e) {
            e.preventDefault();
            if (!gameStarted) {
                gameStarted = true;
                return;
            }
            
            if (currentFruit && !currentFruit.dropped) {
                currentFruit.x = e.touches[0].clientX;
            }
        }

        function handleTouchMove(e) {
            e.preventDefault();
            if (currentFruit && !currentFruit.dropped) {
                currentFruit.x = e.touches[0].clientX;
            }
        }

        function handleTouchEnd(e) {
            if (currentFruit && !currentFruit.dropped) {
                dropFruit();
            }
        }

        // 启动游戏
        window.onload = init;
    </script>
</body>
</html>