<!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>
        /* 全局样式初始化 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #050510;
            color: #ffffff;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            position: relative;
        }

        /* 动态背景 Canvas */
        #bgCanvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            opacity: 0.6;
        }

        /* 内容容器 */
        .container {
            z-index: 2;
            text-align: center;
            background: rgba(16, 20, 30, 0.8);
            padding: 40px;
            border-radius: 15px;
            border: 1px solid #00f2ff;
            box-shadow: 0 0 20px rgba(0, 242, 255, 0.2);
            backdrop-filter: blur(5px);
            max-width: 600px;
            width: 90%;
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 5px;
            background: linear-gradient(90deg, #00f2ff, #0078ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 10px rgba(0, 242, 255, 0.5);
        }

        p.subtitle {
            color: #a0aab5;
            margin-bottom: 30px;
            font-size: 0.9rem;
        }

        /* 互动区域 */
        .game-area {
            position: relative;
            margin: 0 auto 20px auto;
            border: 2px solid #333;
            border-radius: 5px;
            background: #000;
            box-shadow: inset 0 0 10px #000;
        }

        canvas#gameCanvas {
            display: block;
            background-color: #000;
        }

        .game-ui {
            margin-bottom: 15px;
            font-size: 0.9rem;
            color: #00f2ff;
        }
        
        .btn {
            padding: 10px 25px;
            background: transparent;
            color: #00f2ff;
            border: 1px solid #00f2ff;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 1rem;
            margin-top: 10px;
        }

        .btn:hover {
            background: #00f2ff;
            color: #000;
            box-shadow: 0 0 15px #00f2ff;
        }

        /* 底部备案号区域 - 必须清晰可见 */
        footer {
            position: absolute;
            bottom: 20px;
            width: 100%;
            text-align: center;
            z-index: 2;
            font-size: 13px;
            color: #666;
        }

        footer a {
            color: #7d8996;
            text-decoration: none;
            transition: color 0.3s;
        }

        footer a:hover {
            color: #00f2ff;
        }
        
        /* 移动端提示 */
        .mobile-tip {
            display: none;
            font-size: 12px;
            color: #666;
            margin-top: 10px;
        }

        @media (max-width: 600px) {
            h1 { font-size: 1.8rem; }
            .container { padding: 20px; }
            .mobile-tip { display: block; }
        }
    </style>
</head>
<body>

    <canvas id="bgCanvas"></canvas>

    <div class="container">
        <h1>辉的云</h1>
        <p class="subtitle">Cloud Application & Data Service</p>

        <div class="game-ui">
            得分: <span id="score">0</span> | 按空格键开始/暂停
        </div>
        <div class="game-area">
            <canvas id="gameCanvas" width="300" height="300"></canvas>
        </div>
        <button class="btn" onclick="toggleGame()">开始</button>
        <p class="mobile-tip">推荐使用电脑键盘方向键操作</p>
    </div>

    <footer>
        <p>Copyright © 2025 辉的云 All Rights Reserved.</p>
        <p style="margin-top: 5px;">
            <a href="https://beian.miit.gov.cn/" target="_blank">豫ICP备2025153608号-1</a>
        </p>
    </footer>

    <script>
        /** * 1. 背景粒子特效逻辑
         */
        const bgCanvas = document.getElementById('bgCanvas');
        const bgCtx = bgCanvas.getContext('2d');
        let width, height;
        let particles = [];

        function resize() {
            width = bgCanvas.width = window.innerWidth;
            height = bgCanvas.height = window.innerHeight;
        }
        
        class Particle {
            constructor() {
                this.x = Math.random() * width;
                this.y = Math.random() * height;
                this.vx = (Math.random() - 0.5) * 0.5;
                this.vy = (Math.random() - 0.5) * 0.5;
                this.size = Math.random() * 2;
            }
            update() {
                this.x += this.vx;
                this.y += this.vy;
                if (this.x < 0 || this.x > width) this.vx *= -1;
                if (this.y < 0 || this.y > height) this.vy *= -1;
            }
            draw() {
                bgCtx.fillStyle = 'rgba(0, 242, 255, 0.5)';
                bgCtx.beginPath();
                bgCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                bgCtx.fill();
            }
        }

        function initBg() {
            resize();
            particles = [];
            for (let i = 0; i < 50; i++) particles.push(new Particle());
        }

        function animateBg() {
            bgCtx.clearRect(0, 0, width, height);
            particles.forEach(p => {
                p.update();
                p.draw();
            });
            // 连线效果
            particles.forEach((p1, i) => {
                particles.slice(i + 1).forEach(p2 => {
                    const dx = p1.x - p2.x;
                    const dy = p1.y - p2.y;
                    const dist = Math.sqrt(dx * dx + dy * dy);
                    if (dist < 150) {
                        bgCtx.strokeStyle = `rgba(0, 242, 255, ${0.1 - dist/1500})`;
                        bgCtx.lineWidth = 1;
                        bgCtx.beginPath();
                        bgCtx.moveTo(p1.x, p1.y);
                        bgCtx.lineTo(p2.x, p2.y);
                        bgCtx.stroke();
                    }
                });
            });
            requestAnimationFrame(animateBg);
        }

        window.addEventListener('resize', resize);
        initBg();
        animateBg();

        /** * 2. 贪吃蛇互动逻辑
         */
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const gridSize = 15; // 格子大小
        const tileCount = Math.floor(canvas.width / gridSize);
        
        let velocityX = 0;
        let velocityY = 0;
        let nextVelocityX = 0;
        let nextVelocityY = 0;
        let playerX = Math.floor(tileCount / 2);
        let playerY = Math.floor(tileCount / 2);
        let trail = [];
        let tail = 5;
        let appleX = 15;
        let appleY = 15;
        let score = 0;
        let gameRunning = false;
        let gameInterval;
        const startText = '开始';
        const pauseText = '暂停';
        const tickMs = 1000 / 12;

        function updateScore(value) {
            score = value;
            document.getElementById('score').innerText = score;
        }

        function drawCell(x, y, color) {
            ctx.fillStyle = color;
            ctx.fillRect(x * gridSize, y * gridSize, gridSize - 2, gridSize - 2);
        }

        function drawScene() {
            ctx.fillStyle = '#000';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            for (let i = 0; i < trail.length; i++) {
                drawCell(trail[i].x, trail[i].y, '#00f2ff');
            }

            drawCell(appleX, appleY, '#ff0055');
        }

        function placeApple() {
            let tries = 0;
            do {
                appleX = Math.floor(Math.random() * tileCount);
                appleY = Math.floor(Math.random() * tileCount);
                tries++;
            } while (trail.some(part => part.x === appleX && part.y === appleY) && tries < tileCount * tileCount);
        }

        function resetRound(keepMoving) {
            playerX = Math.floor(tileCount / 2);
            playerY = Math.floor(tileCount / 2);
            tail = 5;
            trail = [{x: playerX, y: playerY}];
            updateScore(0);

            velocityX = keepMoving ? 1 : 0;
            velocityY = 0;
            nextVelocityX = velocityX;
            nextVelocityY = velocityY;
            placeApple();
            drawScene();
        }

        function gameLoop() {
            velocityX = nextVelocityX;
            velocityY = nextVelocityY;

            if (velocityX === 0 && velocityY === 0) {
                drawScene();
                return;
            }

            playerX = (playerX + velocityX + tileCount) % tileCount;
            playerY = (playerY + velocityY + tileCount) % tileCount;

            // 穿墙逻辑
            const eatingApple = appleX === playerX && appleY === playerY;
            const bodyToCheck = eatingApple ? trail : trail.slice(1);
            if (bodyToCheck.some(part => part.x === playerX && part.y === playerY)) {
                resetRound(true);
                return;
            }

            trail.push({x: playerX, y: playerY});

            // 吃苹果
            if (eatingApple) {
                tail++;
                updateScore(score + 10);
                placeApple();
            }

            while (trail.length > tail) {
                trail.shift();
            }

            drawScene();
        }

        function setDirection(x, y) {
            if (x !== 0 && velocityX === -x) return;
            if (y !== 0 && velocityY === -y) return;
            nextVelocityX = x;
            nextVelocityY = y;
        }

        function keyPush(evt) {
            const isArrowKey = evt.keyCode >= 37 && evt.keyCode <= 40;
            const isSpaceKey = evt.keyCode === 32;
            if (isArrowKey || isSpaceKey) evt.preventDefault();

            if(!gameRunning && evt.keyCode >= 37 && evt.keyCode <= 40) return;
            
            switch (evt.keyCode) {
                case 37: // Left
                    setDirection(-1, 0);
                    break;
                case 38: // Up
                    setDirection(0, -1);
                    break;
                case 39: // Right
                    setDirection(1, 0);
                    break;
                case 40: // Down
                    setDirection(0, 1);
                    break;
                case 32: // Space
                    toggleGame();
                    break;
            }
        }

        function toggleGame() {
            if (gameRunning) {
                clearInterval(gameInterval);
                gameRunning = false;
                document.querySelector('.btn').innerText = startText;
            } else {
                clearInterval(gameInterval);
                gameInterval = setInterval(gameLoop, tickMs);
                gameRunning = true;
                if(velocityX === 0 && velocityY === 0) {
                    setDirection(1, 0); // 默认向右开始
                }
                document.querySelector('.btn').innerText = pauseText;
            }
        }

        document.addEventListener('keydown', keyPush);
        
        // 初始画面渲染一次
        resetRound(false);

    </script>
</body>
</html>