﻿<!DOCTYPE html>
<html lang="zh-CN">
<head> <meta name="keywords" content="keywords_temp" />
<meta name="description" content="description_temp" />

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 未找到页面</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
           background-color: #f5f5f5;
        }
		
		
		 

    h1 {
      font-size: 5rem;
      margin-bottom: 1rem;
      animation: glitch 3s infinite;
    }

  @keyframes glitch {
            0% {
                text-shadow: 0 0 0 #fff, 0 0 10px #fff, 0 0 20px #000, 0 0 30px #000, 0 0 40px #fff;
            }
            50% {
                text-shadow: 0 0 0 #fff, 0 0 5px #fff, 0 0 10px #000, 0 0 15px #000, 0 0 20px #fff;
            }
            100% {
                text-shadow: 0 0 0 #fff, 0 0 2px #fff, 0 0 5px #000, 0 0 8px #000, 0 0 10px #fff;
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

    p {
      font-size: 1.5rem;
      margin-bottom: 2rem;
    }

    a {
      text-decoration: none;
      color: #000;
      font-weight: bold;
    }
		
		
		

        .container {
            text-align: center;
        }

        #gameCanvas {
            border: 2px solid #fff;
            background-color: #000;
            margin-top: 20px;
        }

        #info {
            display: flex;
            justify-content: space-between;
            width: 900px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>404 </h1>
        <p>很抱歉，您所寻找的页面不存在。<a href="../index.html">首页</a></p>
        <p>放松一下，玩个小游戏吧！使用方向键控制吃豆人。</p>
        <canvas id="gameCanvas" width="900" height="600"></canvas>
        <div id="info">
            <div>时间: <span id="time">0</span> 秒</div>
            <div>得分: <span id="score">0</span></div>
        </div>
    </div>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        const pacman = {
            x: 450,
            y: 300,
            size: 20,
            dx: 0,
            dy: 0,
            speed: 20
        };

        const food = {
            x: Math.floor(Math.random() * canvas.width / 20) * 20,
            y: Math.floor(Math.random() * canvas.height / 20) * 20,
            size: 20
        };

        let score = 0;
        let time = 0;

        function drawPacman() {
            ctx.fillStyle = 'yellow';
            ctx.beginPath();
            ctx.arc(pacman.x + pacman.size / 2, pacman.y + pacman.size / 2, pacman.size / 2, 0.2 * Math.PI, 1.8 * Math.PI);
            ctx.lineTo(pacman.x + pacman.size / 2, pacman.y + pacman.size / 2);
            ctx.fill();
            ctx.closePath();
        }

        function drawFood() {
            ctx.fillStyle = 'red';
            ctx.fillRect(food.x, food.y, food.size, food.size);
        }

        function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

        function movePacman() {
            pacman.x += pacman.dx;
            pacman.y += pacman.dy;

            if (pacman.x < 0) pacman.x = canvas.width - pacman.size;
            if (pacman.x > canvas.width - pacman.size) pacman.x = 0;
            if (pacman.y < 0) pacman.y = canvas.height - pacman.size;
            if (pacman.y > canvas.height - pacman.size) pacman.y = 0;

            pacman.dx = 0;
            pacman.dy = 0;
        }

        function checkCollision() {
            if (pacman.x < food.x + food.size &&
                pacman.x + pacman.size > food.x &&
                pacman.y < food.y + food.size &&
                pacman.y + pacman.size > food.y) {
                score++;
                document.getElementById('score').textContent = score;
                food.x = Math.floor(Math.random() * canvas.width / 20) * 20;
                food.y = Math.floor(Math.random() * canvas.height / 20) * 20;
            }
        }

        function update() {
            clearCanvas();
            drawFood();
            movePacman();
            drawPacman();
            checkCollision();

            requestAnimationFrame(update);
        }

        function changeDirection(e) {
            switch(e.keyCode) {
                case 37:
                    pacman.dx = -pacman.speed;
                    pacman.dy = 0;
                    break;
                case 38:
                    pacman.dx = 0;
                    pacman.dy = -pacman.speed;
                    break;
                case 39:
                    pacman.dx = pacman.speed;
                    pacman.dy = 0;
                    break;
                case 40:
                    pacman.dx = 0;
                    pacman.dy = pacman.speed;
                    break;
            }
        }

        function startTimer() {
            setInterval(() => {
                time++;
                document.getElementById('time').textContent = time;
            }, 1000);
        }

        document.addEventListener('keydown', changeDirection);

        update();
        startTimer();
    </script>
</body>
</html>
