Spaces:

zdwalter
/

plane-fighter-1

Running

App Files Files Community

zdwalter commited on Apr 2

Commit

be1c803

verified ·

1 Parent(s): e13ec2e

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +884 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Plane Fighter 1
-emoji: 🐠
-colorFrom: pink
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: plane-fighter-1
+emoji: 🐳
+colorFrom: blue
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,884 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sky Adventure - 飞行游戏</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        body {
+            overflow: hidden;
+            touch-action: none;
+        }
+        #gameCanvas {
+            display: block;
+            background: linear-gradient(to bottom, #1e3c72 0%, #2a5298 100%);
+        }
+        .game-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+        }
+        .cloud {
+            position: absolute;
+            background-color: rgba(255, 255, 255, 0.8);
+            border-radius: 50%;
+        }
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
+        }
+        .plane {
+            animation: float 2s ease-in-out infinite;
+        }
+        .star {
+            position: absolute;
+            color: gold;
+            text-shadow: 0 0 10px yellow;
+            animation: twinkle 1s ease-in-out infinite alternate;
+        }
+        @keyframes twinkle {
+            from { opacity: 0.7; transform: scale(0.9); }
+            to { opacity: 1; transform: scale(1.1); }
+        }
+        .obstacle {
+            position: absolute;
+            background-color: #555;
+            border-radius: 5px;
+        }
+        .explosion {
+            position: absolute;
+            width: 60px;
+            height: 60px;
+            background: radial-gradient(circle, rgba(255,100,0,0.8) 0%, rgba(255,200,0,0.6) 50%, rgba(255,255,255,0) 70%);
+            border-radius: 50%;
+            animation: explode 0.5s ease-out forwards;
+        }
+        @keyframes explode {
+            0% { transform: scale(0); opacity: 1; }
+            100% { transform: scale(2); opacity: 0; }
+        }
+        .control-btn {
+            position: absolute;
+            width: 60px;
+            height: 60px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            color: white;
+            pointer-events: auto;
+            user-select: none;
+            -webkit-tap-highlight-color: transparent;
+        }
+        .control-btn:active {
+            background: rgba(255, 255, 255, 0.4);
+            transform: scale(0.95);
+        }
+        #leftBtn {
+            bottom: 30px;
+            left: 30px;
+        }
+        #rightBtn {
+            bottom: 30px;
+            left: 110px;
+        }
+        #upBtn {
+            bottom: 100px;
+            right: 30px;
+        }
+        #downBtn {
+            bottom: 30px;
+            right: 30px;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white flex flex-col items-center justify-center h-screen">
+    <div class="relative w-full h-full">
+        <canvas id="gameCanvas" class="w-full h-full"></canvas>
+        <!-- 开始界面 -->
+        <div id="startScreen" class="game-overlay flex flex-col items-center justify-center bg-black bg-opacity-70">
+            <h1 class="text-5xl font-bold mb-6 text-yellow-300">SKY ADVENTURE</h1>
+            <div class="plane text-6xl mb-8">✈️</div>
+            <p class="text-xl mb-8 text-center max-w-md px-4">控制飞机躲避障碍物<br>收集星星获得高分!</p>
+            <button id="startButton" class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-3 px-8 rounded-full text-xl transition-all duration-300 transform hover:scale-105 pointer-events-auto">
+                开始游戏
+            </button>
+            <div class="mt-8 flex space-x-4">
+                <div class="flex items-center">
+                    <i class="fas fa-arrow-up text-xl mr-2"></i>
+                    <span>上升</span>
+                </div>
+                <div class="flex items-center">
+                    <i class="fas fa-arrow-down text-xl mr-2"></i>
+                    <span>下降</span>
+                </div>
+                <div class="flex items-center">
+                    <i class="fas fa-arrow-left text-xl mr-2"></i>
+                    <i class="fas fa-arrow-right text-xl"></i>
+                    <span class="ml-2">转向</span>
+                </div>
+            </div>
+        </div>
+        <!-- 游戏UI -->
+        <div id="gameUI" class="game-overlay hidden">
+            <div class="absolute top-4 left-4 bg-black bg-opacity-50 px-4 py-2 rounded-lg">
+                <div class="flex items-center">
+                    <i class="fas fa-star text-yellow-400 mr-2"></i>
+                    <span id="scoreDisplay" class="text-xl">0</span>
+                </div>
+            </div>
+            <div class="absolute top-4 right-4 bg-black bg-opacity-50 px-4 py-2 rounded-lg">
+                <div class="flex items-center">
+                    <i class="fas fa-heart text-red-500 mr-2"></i>
+                    <span id="livesDisplay" class="text-xl">3</span>
+                </div>
+            </div>
+            <div class="absolute bottom-4 left-4 bg-black bg-opacity-50 px-4 py-2 rounded-lg">
+                <div class="flex items-center">
+                    <i class="fas fa-tachometer-alt text-blue-400 mr-2"></i>
+                    <span id="speedDisplay" class="text-xl">100</span>
+                    <span class="ml-1">km/h</span>
+                </div>
+            </div>
+            <!-- 触摸控制按钮 -->
+            <div id="leftBtn" class="control-btn hidden">
+                <i class="fas fa-arrow-left"></i>
+            </div>
+            <div id="rightBtn" class="control-btn hidden">
+                <i class="fas fa-arrow-right"></i>
+            </div>
+            <div id="upBtn" class="control-btn hidden">
+                <i class="fas fa-arrow-up"></i>
+            </div>
+            <div id="downBtn" class="control-btn hidden">
+                <i class="fas fa-arrow-down"></i>
+            </div>
+        </div>
+        <!-- 游戏结束界面 -->
+        <div id="gameOverScreen" class="game-overlay hidden flex flex-col items-center justify-center bg-black bg-opacity-70">
+            <h1 class="text-5xl font-bold mb-6 text-red-500">GAME OVER</h1>
+            <div class="text-3xl mb-8">
+                得分: <span id="finalScore" class="text-yellow-400">0</span>
+            </div>
+            <button id="restartButton" class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-3 px-8 rounded-full text-xl transition-all duration-300 transform hover:scale-105 pointer-events-auto">
+                再玩一次
+            </button>
+        </div>
+    </div>
+    <script>
+        // 游戏状态
+        const gameState = {
+            started: false,
+            gameOver: false,
+            score: 0,
+            lives: 3,
+            speed: 100,
+            plane: {
+                x: 0,
+                y: 0,
+                width: 60,
+                height: 60,
+                velocity: 0,  // 左右方向速度
+                verticalVelocity: 0,  // 上下方向速度
+                rotation: 0
+            },
+            stars: [],
+            obstacles: [],
+            clouds: [],
+            explosions: [],
+            lastStarTime: 0,
+            lastObstacleTime: 0,
+            lastCloudTime: 0,
+            keys: {
+                ArrowUp: false,
+                ArrowDown: false,
+                ArrowLeft: false,
+                ArrowRight: false
+            },
+            isMobile: false
+        };
+        // 获取DOM元素
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        const startScreen = document.getElementById('startScreen');
+        const gameUI = document.getElementById('gameUI');
+        const gameOverScreen = document.getElementById('gameOverScreen');
+        const startButton = document.getElementById('startButton');
+        const restartButton = document.getElementById('restartButton');
+        const scoreDisplay = document.getElementById('scoreDisplay');
+        const livesDisplay = document.getElementById('livesDisplay');
+        const speedDisplay = document.getElementById('speedDisplay');
+        const finalScore = document.getElementById('finalScore');
+        const leftBtn = document.getElementById('leftBtn');
+        const rightBtn = document.getElementById('rightBtn');
+        const upBtn = document.getElementById('upBtn');
+        const downBtn = document.getElementById('downBtn');
+        // 检测是否移动设备
+        function detectMobile() {
+            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+        }
+        // 设置画布大小
+        function resizeCanvas() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+            if (gameState.started && !gameState.gameOver) {
+                gameState.plane.x = canvas.width / 2;
+                gameState.plane.y = canvas.height / 2;
+            }
+        }
+        // 初始化���戏
+        function initGame() {
+            gameState.isMobile = detectMobile();
+            resizeCanvas();
+            gameState.started = true;
+            gameState.gameOver = false;
+            gameState.score = 0;
+            gameState.lives = 3;
+            gameState.speed = 100;
+            gameState.plane = {
+                x: canvas.width / 2,
+                y: canvas.height / 2,
+                width: 60,
+                height: 60,
+                velocity: 0,
+                verticalVelocity: 0,
+                rotation: 0
+            };
+            gameState.stars = [];
+            gameState.obstacles = [];
+            gameState.clouds = [];
+            gameState.explosions = [];
+            gameState.lastStarTime = 0;
+            gameState.lastObstacleTime = 0;
+            gameState.lastCloudTime = 0;
+            startScreen.classList.add('hidden');
+            gameOverScreen.classList.add('hidden');
+            gameUI.classList.remove('hidden');
+            // 显示触摸控制按钮（如果是移动设备）
+            if (gameState.isMobile) {
+                leftBtn.classList.remove('hidden');
+                rightBtn.classList.remove('hidden');
+                upBtn.classList.remove('hidden');
+                downBtn.classList.remove('hidden');
+            }
+            updateUI();
+            createInitialClouds();
+            requestAnimationFrame(gameLoop);
+        }
+        // 创建初始云朵
+        function createInitialClouds() {
+            for (let i = 0; i < 10; i++) {
+                createCloud(true);
+            }
+        }
+        // 创建云朵
+        function createCloud(initial = false) {
+            const size = Math.random() * 60 + 40;
+            const x = initial ? Math.random() * canvas.width : canvas.width + size;
+            const y = Math.random() * canvas.height;
+            const speed = Math.random() * 1 + 0.5;
+            gameState.clouds.push({
+                x,
+                y,
+                size,
+                speed,
+                parts: Array(3).fill().map(() => ({
+                    size: size * (Math.random() * 0.3 + 0.7),
+                    offsetX: (Math.random() - 0.5) * size * 0.6,
+                    offsetY: (Math.random() - 0.5) * size * 0.6
+                }))
+            });
+        }
+        // 创建星星
+        function createStar() {
+            const size = Math.random() * 20 + 15;
+            const x = canvas.width + size;
+            const y = Math.random() * (canvas.height - size * 2) + size;
+            const speed = Math.random() * 3 + 3 + gameState.speed / 50;
+            gameState.stars.push({
+                x,
+                y,
+                size,
+                speed,
+                rotation: 0,
+                rotationSpeed: Math.random() * 0.1 - 0.05
+            });
+        }
+        // 创建障碍物
+        function createObstacle() {
+            const width = Math.random() * 80 + 40;
+            const height = Math.random() * 80 + 40;
+            const x = canvas.width + width;
+            const y = Math.random() * (canvas.height - height);
+            const speed = Math.random() * 2 + 2 + gameState.speed / 50;
+            const type = Math.random() > 0.5 ? 'rectangle' : 'circle';
+            gameState.obstacles.push({
+                x,
+                y,
+                width,
+                height,
+                speed,
+                type
+            });
+        }
+        // 创建爆炸效果
+        function createExplosion(x, y) {
+            gameState.explosions.push({
+                x,
+                y,
+                size: 0,
+                maxSize: Math.random() * 40 + 40,
+                alpha: 1
+            });
+        }
+        // 更新UI
+        function updateUI() {
+            scoreDisplay.textContent = gameState.score;
+            livesDisplay.textContent = gameState.lives;
+            speedDisplay.textContent = Math.floor(gameState.speed);
+        }
+        // 检测碰撞
+        function checkCollision(rect1, rect2) {
+            return (
+                rect1.x < rect2.x + rect2.width &&
+                rect1.x + rect1.width > rect2.x &&
+                rect1.y < rect2.y + rect2.height &&
+                rect1.y + rect1.height > rect2.y
+            );
+        }
+        // 游戏结束
+        function endGame() {
+            gameState.gameOver = true;
+            gameUI.classList.add('hidden');
+            gameOverScreen.classList.remove('hidden');
+            finalScore.textContent = gameState.score;
+            // 隐藏触摸控制按钮
+            leftBtn.classList.add('hidden');
+            rightBtn.classList.add('hidden');
+            upBtn.classList.add('hidden');
+            downBtn.classList.add('hidden');
+        }
+        // 游戏主循环
+        function gameLoop(timestamp) {
+            if (!gameState.started || gameState.gameOver) return;
+            // 清除画布
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            // 更新游戏状态
+            updateGame(timestamp);
+            // 绘制游戏元素
+            drawGame();
+            // 继续循环
+            requestAnimationFrame(gameLoop);
+        }
+        // 更新游戏状态
+        function updateGame(timestamp) {
+            // 更新飞机速度
+            if (gameState.keys.ArrowUp || gameState.keys.ArrowDown) {
+                gameState.speed = Math.max(50,
+                    Math.min(200,
+                        gameState.speed + (gameState.keys.ArrowUp ? 0.5 : -0.5)
+                    )
+                );
+            }
+            // 更新水平方向移动
+            if (gameState.keys.ArrowLeft) {
+                gameState.plane.rotation = Math.max(gameState.plane.rotation - 2, -20);
+                gameState.plane.velocity = Math.max(gameState.plane.velocity - 0.5, -5);
+            } else if (gameState.keys.ArrowRight) {
+                gameState.plane.rotation = Math.min(gameState.plane.rotation + 2, 20);
+                gameState.plane.velocity = Math.min(gameState.plane.velocity + 0.5, 5);
+            } else {
+                // 如果没有按左右键，飞机逐渐回正
+                gameState.plane.rotation *= 0.95;
+                gameState.plane.velocity *= 0.95;
+                if (Math.abs(gameState.plane.rotation) < 0.5) gameState.plane.rotation = 0;
+                if (Math.abs(gameState.plane.velocity) < 0.5) gameState.plane.velocity = 0;
+            }
+            // 更新垂直方向移动
+            if (gameState.keys.ArrowUp) {
+                gameState.plane.verticalVelocity = Math.max(gameState.plane.verticalVelocity - 0.5, -5);
+            } else if (gameState.keys.ArrowDown) {
+                gameState.plane.verticalVelocity = Math.min(gameState.plane.verticalVelocity + 0.5, 5);
+            } else {
+                // 如果没有按上下键，垂直速度逐渐归零
+                gameState.plane.verticalVelocity *= 0.95;
+                if (Math.abs(gameState.plane.verticalVelocity) < 0.5) gameState.plane.verticalVelocity = 0;
+            }
+            // 更新飞机位置
+            gameState.plane.x += gameState.plane.velocity;
+            gameState.plane.y += gameState.plane.verticalVelocity;
+            // 限制飞机在屏幕内
+            gameState.plane.x = Math.max(gameState.plane.width / 2, Math.min(gameState.plane.x, canvas.width - gameState.plane.width / 2));
+            gameState.plane.y = Math.max(gameState.plane.height / 2, Math.min(gameState.plane.y, canvas.height - gameState.plane.height / 2));
+            // 生成新星星
+            if (timestamp - gameState.lastStarTime > 2000) {
+                createStar();
+                gameState.lastStarTime = timestamp;
+            }
+            // 生成新障碍物
+            if (timestamp - gameState.lastObstacleTime > 1500) {
+                createObstacle();
+                gameState.lastObstacleTime = timestamp;
+            }
+            // 生成新云朵
+            if (timestamp - gameState.lastCloudTime > 1000) {
+                createCloud();
+                gameState.lastCloudTime = timestamp;
+            }
+            // 更新云朵
+            gameState.clouds.forEach(cloud => {
+                cloud.x -= cloud.speed;
+            });
+            gameState.clouds = gameState.clouds.filter(cloud => cloud.x + cloud.size > 0);
+            // 更新星星
+            gameState.stars.forEach(star => {
+                star.x -= star.speed;
+                star.rotation += star.rotationSpeed;
+                // 检测碰撞
+                const planeRect = {
+                    x: gameState.plane.x - gameState.plane.width / 2,
+                    y: gameState.plane.y - gameState.plane.height / 2,
+                    width: gameState.plane.width,
+                    height: gameState.plane.height
+                };
+                const starRect = {
+                    x: star.x - star.size / 2,
+                    y: star.y - star.size / 2,
+                    width: star.size,
+                    height: star.size
+                };
+                if (checkCollision(planeRect, starRect) && !gameState.gameOver) {
+                    star.collected = true;
+                    gameState.score += 10;
+                    updateUI();
+                }
+            });
+            gameState.stars = gameState.stars.filter(star => star.x + star.size > 0 && !star.collected);
+            // 更新障碍物
+            gameState.obstacles.forEach(obstacle => {
+                obstacle.x -= obstacle.speed;
+                // 检测碰撞
+                const planeRect = {
+                    x: gameState.plane.x - gameState.plane.width / 2,
+                    y: gameState.plane.y - gameState.plane.height / 2,
+                    width: gameState.plane.width,
+                    height: gameState.plane.height
+                };
+                const obstacleRect = obstacle.type === 'rectangle' ? {
+                    x: obstacle.x - obstacle.width / 2,
+                    y: obstacle.y - obstacle.height / 2,
+                    width: obstacle.width,
+                    height: obstacle.height
+                } : {
+                    x: obstacle.x - obstacle.width / 2,
+                    y: obstacle.y - obstacle.height / 2,
+                    width: obstacle.width,
+                    height: obstacle.height
+                };
+                if (checkCollision(planeRect, obstacleRect) && !gameState.gameOver) {
+                    obstacle.hit = true;
+                    gameState.lives--;
+                    updateUI();
+                    createExplosion(gameState.plane.x, gameState.plane.y);
+                    if (gameState.lives <= 0) {
+                        endGame();
+                    }
+                }
+            });
+            gameState.obstacles = gameState.obstacles.filter(obstacle => obstacle.x + obstacle.width > 0 && !obstacle.hit);
+            // 更新爆炸效果
+            gameState.explosions.forEach(explosion => {
+                explosion.size += 2;
+                explosion.alpha -= 0.02;
+            });
+            gameState.explosions = gameState.explosions.filter(explosion => explosion.alpha > 0);
+        }
+        // 绘制游戏元素
+        function drawGame() {
+            // 绘制背景渐变
+            const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
+            gradient.addColorStop(0, '#1e3c72');
+            gradient.addColorStop(1, '#2a5298');
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            // 绘制云朵
+            gameState.clouds.forEach(cloud => {
+                cloud.parts.forEach(part => {
+                    ctx.beginPath();
+                    ctx.arc(
+                        cloud.x + part.offsetX,
+                        cloud.y + part.offsetY,
+                        part.size / 2,
+                        0,
+                        Math.PI * 2
+                    );
+                    ctx.fillStyle = `rgba(255, 255, 255, ${0.7 + Math.random() * 0.3})`;
+                    ctx.fill();
+                });
+            });
+            // 绘制星星
+            gameState.stars.forEach(star => {
+                ctx.save();
+                ctx.translate(star.x, star.y);
+                ctx.rotate(star.rotation);
+                ctx.beginPath();
+                for (let i = 0; i < 5; i++) {
+                    const angle = (i * 2 * Math.PI / 5) - Math.PI / 2;
+                    const innerAngle = angle + Math.PI / 5;
+                    const outerRadius = star.size / 2;
+                    const innerRadius = star.size / 4;
+                    if (i === 0) {
+                        ctx.moveTo(
+                            Math.cos(angle) * outerRadius,
+                            Math.sin(angle) * outerRadius
+                        );
+                    } else {
+                        ctx.lineTo(
+                            Math.cos(angle) * outerRadius,
+                            Math.sin(angle) * outerRadius
+                        );
+                    }
+                    ctx.lineTo(
+                        Math.cos(innerAngle) * innerRadius,
+                        Math.sin(innerAngle) * innerRadius
+                    );
+                }
+                ctx.closePath();
+                const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, star.size / 2);
+                gradient.addColorStop(0, 'gold');
+                gradient.addColorStop(1, 'yellow');
+                ctx.fillStyle = gradient;
+                ctx.shadowColor = 'yellow';
+                ctx.shadowBlur = 10;
+                ctx.fill();
+                ctx.restore();
+            });
+            // 绘制障碍物
+            gameState.obstacles.forEach(obstacle => {
+                ctx.save();
+                ctx.translate(obstacle.x, obstacle.y);
+                if (obstacle.type === 'rectangle') {
+                    ctx.fillStyle = '#555';
+                    ctx.fillRect(
+                        -obstacle.width / 2,
+                        -obstacle.height / 2,
+                        obstacle.width,
+                        obstacle.height
+                    );
+                    // 添加一些细节
+                    ctx.fillStyle = '#444';
+                    ctx.fillRect(
+                        -obstacle.width / 2 + 5,
+                        -obstacle.height / 2 + 5,
+                        obstacle.width - 10,
+                        obstacle.height - 10
+                    );
+                } else {
+                    ctx.beginPath();
+                    ctx.arc(0, 0, obstacle.width / 2, 0, Math.PI * 2);
+                    ctx.fillStyle = '#555';
+                    ctx.fill();
+                    // 添加一些细节
+                    ctx.beginPath();
+                    ctx.arc(0, 0, obstacle.width / 2 - 5, 0, Math.PI * 2);
+                    ctx.fillStyle = '#444';
+                    ctx.fill();
+                }
+                ctx.restore();
+            });
+            // 绘制飞机
+            ctx.save();
+            ctx.translate(gameState.plane.x, gameState.plane.y);
+            ctx.rotate(gameState.plane.rotation * Math.PI / 180);
+            // 飞机主体
+            ctx.beginPath();
+            ctx.moveTo(30, 0);
+            ctx.lineTo(-20, -15);
+            ctx.lineTo(-25, 0);
+            ctx.lineTo(-20, 15);
+            ctx.closePath();
+            ctx.fillStyle = '#e74c3c';
+            ctx.fill();
+            // 飞机窗户
+            ctx.beginPath();
+            ctx.arc(10, 0, 5, 0, Math.PI * 2);
+            ctx.fillStyle = '#3498db';
+            ctx.fill();
+            // 飞机机翼
+            ctx.beginPath();
+            ctx.moveTo(5, 0);
+            ctx.lineTo(-5, -20);
+            ctx.lineTo(-15, -20);
+            ctx.lineTo(-5, 0);
+            ctx.closePath();
+            ctx.fillStyle = '#c0392b';
+            ctx.fill();
+            ctx.beginPath();
+            ctx.moveTo(5, 0);
+            ctx.lineTo(-5, 20);
+            ctx.lineTo(-15, 20);
+            ctx.lineTo(-5, 0);
+            ctx.closePath();
+            ctx.fillStyle = '#c0392b';
+            ctx.fill();
+            // 飞机尾翼
+            ctx.beginPath();
+            ctx.moveTo(-20, 0);
+            ctx.lineTo(-25, -10);
+            ctx.lineTo(-30, -10);
+            ctx.lineTo(-25, 0);
+            ctx.closePath();
+            ctx.fillStyle = '#a5281b';
+            ctx.fill();
+            ctx.beginPath();
+            ctx.moveTo(-20, 0);
+            ctx.lineTo(-25, 10);
+            ctx.lineTo(-30, 10);
+            ctx.lineTo(-25, 0);
+            ctx.closePath();
+            ctx.fillStyle = '#a5281b';
+            ctx.fill();
+            ctx.restore();
+            // 绘制爆炸效果
+            gameState.explosions.forEach(explosion => {
+                ctx.save();
+                ctx.translate(explosion.x, explosion.y);
+                const gradient = ctx.createRadialGradient(
+                    0, 0, 0,
+                    0, 0, explosion.size
+                );
+                gradient.addColorStop(0, `rgba(255, 100, 0, ${explosion.alpha})`);
+                gradient.addColorStop(0.5, `rgba(255, 200, 0, ${explosion.alpha * 0.6})`);
+                gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
+                ctx.beginPath();
+                ctx.arc(0, 0, explosion.size, 0, Math.PI * 2);
+                ctx.fillStyle = gradient;
+                ctx.fill();
+                ctx.restore();
+            });
+            // 绘制速度线
+            if (gameState.speed > 120) {
+                for (let i = 0; i < 10; i++) {
+                    const x = Math.random() * canvas.width;
+                    const y = Math.random() * canvas.height;
+                    const length = Math.random() * 20 + 10;
+                    const angle = Math.atan2(
+                        gameState.plane.y - y,
+                        gameState.plane.x - x
+                    );
+                    ctx.save();
+                    ctx.translate(x, y);
+                    ctx.rotate(angle);
+                    ctx.beginPath();
+                    ctx.moveTo(0, 0);
+                    ctx.lineTo(length, 0);
+                    ctx.strokeStyle = `rgba(255, 255, 255, ${Math.random() * 0.5 + 0.3})`;
+                    ctx.lineWidth = 1;
+                    ctx.stroke();
+                    ctx.restore();
+                }
+            }
+        }
+        // 事件监听
+        window.addEventListener('resize', resizeCanvas);
+        // 键盘控制
+        document.addEventListener('keydown', (e) => {
+            if (gameState.keys.hasOwnProperty(e.key)) {
+                gameState.keys[e.key] = true;
+                e.preventDefault();
+            }
+        });
+        document.addEventListener('keyup', (e) => {
+            if (gameState.keys.hasOwnProperty(e.key)) {
+                gameState.keys[e.key] = false;
+                e.preventDefault();
+            }
+        });
+        // 触摸控制��钮事件
+        leftBtn.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            gameState.keys.ArrowLeft = true;
+        });
+        leftBtn.addEventListener('touchend', (e) => {
+            e.preventDefault();
+            gameState.keys.ArrowLeft = false;
+        });
+        rightBtn.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            gameState.keys.ArrowRight = true;
+        });
+        rightBtn.addEventListener('touchend', (e) => {
+            e.preventDefault();
+            gameState.keys.ArrowRight = false;
+        });
+        upBtn.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            gameState.keys.ArrowUp = true;
+        });
+        upBtn.addEventListener('touchend', (e) => {
+            e.preventDefault();
+            gameState.keys.ArrowUp = false;
+        });
+        downBtn.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            gameState.keys.ArrowDown = true;
+        });
+        downBtn.addEventListener('touchend', (e) => {
+            e.preventDefault();
+            gameState.keys.ArrowDown = false;
+        });
+        // 鼠标控制按钮事件（用于桌面浏览器测试）
+        leftBtn.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            gameState.keys.ArrowLeft = true;
+        });
+        leftBtn.addEventListener('mouseup', (e) => {
+            e.preventDefault();
+            gameState.keys.ArrowLeft = false;
+        });
+        leftBtn.addEventListener('mouseleave', (e) => {
+            e.preventDefault();
+            gameState.keys.ArrowLeft = false;
+        });
+        rightBtn.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            gameState.keys.ArrowRight = true;
+        });
+        rightBtn.addEventListener('mouseup', (e) => {
+            e.preventDefault();
+            gameState.keys.ArrowRight = false;
+        });
+        rightBtn.addEventListener('mouseleave', (e) => {
+            e.preventDefault();
+            gameState.keys.ArrowRight = false;
+        });
+        upBtn.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            gameState.keys.ArrowUp = true;
+        });
+        upBtn.addEventListener('mouseup', (e) => {
+            e.preventDefault();
+            gameState.keys.ArrowUp = false;
+        });
+        upBtn.addEventListener('mouseleave', (e) => {
+            e.preventDefault();
+            gameState.keys.ArrowUp = false;
+        });
+        downBtn.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            gameState.keys.ArrowDown = true;
+        });
+        downBtn.addEventListener('mouseup', (e) => {
+            e.preventDefault();
+            gameState.keys.ArrowDown = false;
+        });
+        downBtn.addEventListener('mouseleave', (e) => {
+            e.preventDefault();
+            gameState.keys.ArrowDown = false;
+        });
+        // 按钮事件
+        startButton.addEventListener('click', initGame);
+        restartButton.addEventListener('click', initGame);
+        // 初始调整画布大小
+        resizeCanvas();
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=zdwalter/plane-fighter-1" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</html>