<!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 = canvas.width / gridSize;
        
        let velocityX = 0;
        let velocityY = 0;
        let playerX = 10;
        let playerY = 10;
        let trail = [];
        let tail = 5;
        let appleX = 15;
        let appleY = 15;
        let score = 0;
        let gameRunning = false;
        let gameInterval;

        function gameLoop() {
            playerX += velocityX;
            playerY += velocityY;

            // 穿墙逻辑
            if (playerX < 0) playerX = tileCount - 1;
            if (playerX > tileCount - 1) playerX = 0;
            if (playerY < 0) playerY = tileCount - 1;
            if (playerY > tileCount - 1) playerY = 0;

            // 背景清理
            ctx.fillStyle = '#000';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // 绘制蛇
            ctx.fillStyle = '#00f2ff'; // 霓虹蓝蛇身
            for (let i = 0; i < trail.length; i++) {
                ctx.fillRect(trail[i].x * gridSize, trail[i].y * gridSize, gridSize - 2, gridSize - 2);
                if (trail[i].x === playerX && trail[i].y === playerY && (velocityX !==0 || velocityY !==0)) {
                    // 撞到自己，重置
                    tail = 5;
                    score = 0;
                    document.getElementById('score').innerText = score;
                }
            }

            trail.push({x: playerX, y: playerY});
            while (trail.length > tail) {
                trail.shift();
            }

            // 绘制苹果
            ctx.fillStyle = '#ff0055'; // 霓虹红苹果
            ctx.fillRect(appleX * gridSize, appleY * gridSize, gridSize - 2, gridSize - 2);

            // 吃苹果
            if (appleX === playerX && appleY === playerY) {
                tail++;
                score += 10;
                document.getElementById('score').innerText = score;
                appleX = Math.floor(Math.random() * tileCount);
                appleY = Math.floor(Math.random() * tileCount);
            }
        }

        function keyPush(evt) {
            if(!gameRunning && evt.keyCode >= 37 && evt.keyCode <= 40) return;
            
            switch (evt.keyCode) {
                case 37: // Left
                    if(velocityX !== 1) { velocityX = -1; velocityY = 0; }
                    break;
                case 38: // Up
                    if(velocityY !== 1) { velocityX = 0; velocityY = -1; }
                    break;
                case 39: // Right
                    if(velocityX !== -1) { velocityX = 1; velocityY = 0; }
                    break;
                case 40: // Down
                    if(velocityY !== -1) { velocityX = 0; velocityY = 1; }
                    break;
                case 32: // Space
                    toggleGame();
                    break;
            }
        }

        function toggleGame() {
            if (gameRunning) {
                clearInterval(gameInterval);
                gameRunning = false;
                document.querySelector('.btn').innerText = "开始游戏";
            } else {
                gameInterval = setInterval(gameLoop, 1000 / 15); // 15 FPS
                gameRunning = true;
                if(velocityX === 0 && velocityY === 0) {
                     velocityX = 1; // 默认向右开始
                }
                document.querySelector('.btn').innerText = "暂停游戏";
            }
        }

        document.addEventListener('keydown', keyPush);
        
        // 初始画面渲染一次
        gameLoop();

    </script>
</body>
</html>