three模拟三维民航飞机机场跑道起飞降落游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：three模拟三维民航飞机机场跑道起飞降落游戏代码，按键功能：W/S油门增加/减少；↑/↓拉杆抬头/推杆低头；←/→左滚转/右滚转；A/D左偏航/右偏航；F襟翼开关（增加升力和阻力）；G起落架收放；B刹车（地面减速）；V切换视角（4种）；R重置游戏

代码标签： three 模拟三维民航飞机机场跑道起飞降落游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D 飞机起降模拟器</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; background: #000; font-family: 'Microsoft YaHei', sans-serif; }
canvas { display: block; }

#hud {
    position: fixed; top: 0; left: 0; right: 0;
    pointer-events: none; z-index: 10;
}

#instruments {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 15px; z-index: 10; pointer-events: none;
}

.gauge {
    background: rgba(0,0,0,0.8); border: 2px solid #0f0;
    border-radius: 10px; padding: 10px 15px; color: #0f0;
    text-align: center; min-width: 100px;
    font-family: 'Courier New', monospace;
}

.gauge .label { font-size: 10px; color: #0a0; margin-bottom: 3px; }
.gauge .value { font-size: 22px; font-weight: bold; }
.gauge .unit { font-size: 10px; color: #0a0; }

#status-bar {
    position: fixed; top: 15px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.7); border: 1px solid #0f0;
    border-radius: 8px; padding: 8px 25px; color: #0f0;
    font-size: 16px; z-index: 10; pointer-events: none;
    text-align: center;
}

#warning {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: red; font-size: 48px; font-weight: bold; z-index: 20;
    pointer-events: none; display: none;
    text-shadow: 0 0 20px red, 0 0 40px red;
    animation: blink 0.5s infinite;
}

@keyframes blink { 50% { opacity: 0.3; } }

#controls-help {
    position: fixed; top: 60px; right: 20px;
    background: rgba(0,0,0,0.8); border: 1px solid #555;
    border-radius: 8px; padding: 12px 15px; color: #ccc;
    font-size: 12px; z-index: 10; pointer-events: none;
    line-height: 1.8;
}

#controls-help kbd {
    background: #333; border: 1px solid #666;
    border-radius: 3px; padding: 1px 6px; color: #fff;
    font-size: 11px;
}

#crash-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,0,0,0.3); z-index: 30;
    display: none; justify-content: center; align-items: center;
    flex-direction: column;
}

#crash-overlay h1 { color: #fff; font-size: 64px; text-shadow: 0 0 30px red; margin-bottom: 20px; }
#crash-overlay button {
    padding: 15px 40px; font-size: 20px; cursor: pointer;
    background: #c00; color: #fff; border: none; border-radius: 8px;
    pointer-events: all;
}
#crash-overlay button:hover { background: #f00; }

#success-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,100,0,0.3); z-index: 30;
    display: none; justify-content: center; align-items: center;
    flex-direction: column;
}
#success-overlay h1 { color: #fff; font-size: 48px; text-shadow: 0 0 30px green; margin-bottom: 20px; }
#success-overlay button {
    padding: 15px 40px; font-size: 20px; cursor: pointer;
    background: #080; color: #fff; border: none; border-radius: 8px;
    pointer-events: all;
}

#throttle-bar {
    position: fixed; left: 20px; bottom: 100px;
    width: 30px; height: 200px; background: rgba(0,0,0,0.8);
    border: 2px solid #0f0; border-radius: 5px; z-index: 10;
    pointer-events: none;
}
#throttle-fill {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, #0f0, #ff0, #f00);
    border-radius: 0 0 3px 3px; transition: height 0.1s;
}
#throttle-label {
    position: fixed; left: 15px; bottom: 75px;
    color: #0f0; font-size: 11px; z-index: 10; pointer-events: none;
    font-family: 'Courier New', monospace;
}

#minimap {
    position: fixed; bottom: 20px; right: 20px;
    width: 150px; height: 150px;
    border: 2px solid #0f0; border-radius: 50%;
    background: rgba(0,50,0,0.8); z-index: 10; pointer-events: none;
    overflow: hidden;
}

#loading {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: #111; z-index: 100; display: flex;
    justify-content: center; align-items: center;
    flex-direction: column; color: #0f0;
}
#loading h2 { margin-bottom: 20px; }
.loader { width: 60px; height: 60px; border: 4px solid #333;
    border-top-color: #0f0; border-radius: 50%;
    animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
</style>
</head>
<body>

<div id="loading">
    <div class="loader"></div>
    <h2>正在加载飞机模拟器...</h2>
</div>

<div id="status-bar">🛫 状态：停在跑道上 | 按 <kbd>W</kbd> 加速推力</div>

<div id="warning">⚠ 拉起！拉起！</div>

<div id="controls-help">
    <strong style="color:#0f0">操作指南</strong><br>
    <kbd>W</kbd> / <kbd>S</kbd> 油门增/减<br>
    <kbd>↑</kbd> / <kbd>↓</kbd> 俯仰操控<br>
    <kbd>←</kbd> / <kbd>→</kbd> 左/右滚转<br>
    <kbd>A</kbd> / <kbd>D</kbd> 方向舵偏航<br>
    <kbd>F</kbd> 襟翼 开/关<br>
    <kbd>B</kbd> 刹车<br>
    <kbd>G</kbd> .........完整代码请登录后点击上方下载按钮下载查看