three实现三维摩托车赛车游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：three实现三维摩托车赛车游戏代码，极速狂飙。

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

<!DOCTYPE html>
<html lang="zh-CN">
<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: 'Arial Black', sans-serif; user-select: none; }
        #gameCanvas { display: block; }

        /* HUD */
        .hud { position: fixed; top: 0; left: 0; right: 0; padding: 20px; display: flex; justify-content: space-between; pointer-events: none; z-index: 100; }
        .hud-left, .hud-right, .hud-center { display: flex; flex-direction: column; gap: 10px; }
        .hud-center { align-items: center; }

        .speed-display { background: rgba(0, 0, 0, 0.8); border: 3px solid #ff4400; border-radius: 10px; padding: 10px 25px; text-align: center; transform: skewX(-10deg); }
        .speed-value { font-size: 56px; color: #ff4400; text-shadow: 0 0 20px #ff4400; line-height: 1; }
        .speed-label { font-size: 14px; color: #fff; letter-spacing: 2px; }

        .stat-bar { background: rgba(0, 0, 0, 0.6); border-radius: 4px; padding: 5px; min-width: 200px; border: 1px solid #444; }
        .stat-label { font-size: 12px; color: #ccc; margin-bottom: 2px; text-transform: uppercase; }
        .stat-fill { height: 15px; border-radius: 2px; transition: width 0.1s linear; }
        .health-bar .stat-fill { background: linear-gradient(90deg, #ff0000, #ff4400); box-shadow: 0 0 10px rgba(255,0,0,0.5); }
        .nitro-bar .stat-fill { background: linear-gradient(90deg, #00aaff, #00ffff); box-shadow: 0 0 10px rgba(0,255,255,0.5); }

        .position-display { background: rgba(0, 0, 0, 0.8); border-radius: 10px; padding: 10px 20px; text-align: center; border: 2px solid #ffcc00; }
        .position-value { font-size: 42px; color: #ffcc00; text-shadow: 0 0 15px #ffcc00; }
        .lap-display { background: rgba(0, 0, 0, 0.7); border-radius: 5px; padding: 5px 15px; color: #fff; font-size: 16px; margin-top: 5px; }

        .message { position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); font-size: 64px; color: #fff; text-shadow: 0 0 30px #ff0000, 4px 4px 0px #000; opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none; z-index: 200; font-style: italic; white-space: nowrap; }
        .message.show { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }

        /* 底部控制提示 */
        .controls-hint { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.7); padding: 10px 20px; border-radius: 20px; display: flex; gap: 20px; z-index: 100; backdrop-filter: blur(5px); }
        .control-item { display: flex; align-items: center; gap: 6px; color: #fff; font-size: 12px; }
        .key { background: #333; border: 1px solid #666; border-radius: 4px; padding: 2px 6px; font-family: monospace; color: #ff9900; font-weight: bold; }

        /* 开始界面 */
        .start-screen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at center, #2a1a10 0%, #000 100%); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1000; }
        .game-title { font-size: 80px; color: #ff4400; text-shadow: 0 0 50px #ff4400, 4px 4px 0 #000; margin-bottom: 10px; animation: glitch 3s infinite; font-style: italic; }
        @keyframes glitch { 0%, 100% { transform: translate(0); } 2% { transform: translate(-2px, 2px); } 4% { transform: translate(2px, -2px); } }
        
        .bike-select { display: flex; gap: 20px; margin: 40px 0; }
        .bike-option { background: rgba(0, 0, 0, 0.5); border: 2px solid #444; border-radius: 10px; padding: 20px; cursor: pointer; transition: all 0.2s; text-align: center; width: 160px; position: relative; overflow: hidden; }
        .bike-option:hover, .bike-option.selected { border-color: #ff4400; background: rgba(255, 68, 0, 0.15); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
        .bike-option.selected::after { content: 'SELECTED'; position: absolute; top: 5px; right: 5px; font-size: 10px; color: #ff4400; background: #000; padding: 2px 5px; border-radius: 3px; }
        .bike-name { color: #fff; font-size: 18px; margin: 10px 0 5px; }
        .bike-stats.........完整代码请登录后点击上方下载按钮下载查看