three实现三维马路狂奔游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：three实现三维马路狂奔游戏代码

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


```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>🏃 都市跑酷 - Subway Runner</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{overflow:hidden;background:#000;font-family:'Segoe UI',system-ui,sans-serif;touch-action:none;user-select:none}
canvas{display:block}

.overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;z-index:10}

#hud{position:absolute;top:0;left:0;width:100%;padding:15px 20px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;z-index:5}
.hud-left,.hud-right{display:flex;flex-direction:column;gap:8px}
.hud-right{align-items:flex-end}
.hud-item{background:rgba(0,0,0,0.55);backdrop-filter:blur(8px);padding:6px 16px;border-radius:12px;color:#fff;font-size:14px;display:flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,0.1)}
.hud-val{font-weight:800;font-size:20px;min-width:45px;text-align:right}
.hud-val.score{color:#ffd740}
.hud-val.coins{color:#ffab40}
.hud-val.dist{color:#40c4ff}
.hud-val.multi{color:#ff4081}

#multiplierBar{width:120px;height:6px;background:rgba(255,255,255,0.15);border-radius:3px;overflow:hidden;margin-top:4px}
#multiplierFill{height:100%;width:0%;background:linear-gradient(90deg,#ff4081,#f50057);border-radius:3px;transition:width 0.2s}

#pauseBtn{position:absolute;top:15px;right:20px;z-index:20;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.2);color:#fff;width:40px;height:40px;border-radius:50%;font-size:18px;cursor:pointer;pointer-events:all;display:none;backdrop-filter:blur(8px)}

#startScreen{background:linear-gradient(180deg,rgba(25,32,72,0.97),rgba(13,17,40,0.98));pointer-events:all;z-index:100}
#startScreen h1{font-size:clamp(36px,8vw,72px);color:#fff;text-shadow:0 0 40px rgba(64,196,255,0.6),0 0 80px rgba(255,64,129,0.3);margin-bottom:5px;letter-spacing:-1px}
#startScreen .sub{color:rgba(255,255,255,0.5);font-size:16px;margin-bottom:35px;letter-spacing:2px}
.btn{background:linear-gradient(135deg,#448aff,#2962ff);color:#fff;border:none;padding:16px 52px;font-size:19px;font-weight:700;border-radius:30px;cursor:pointer;transition:all 0.3s;letter-spacing:1px;box-shadow:0 4px 25px rgba(41,98,255,0.5);pointer-events:all}
.btn:hover{transform:scale(1.05);box-shadow:0 6px 35px rgba(41,98,255,0.7)}
.btn:active{transform:scale(0.97)}
.btn-restart{background:linear-gradient(135deg,#ff4081,#f50057);box-shadow:0 4px 25px rgba(245,0,87,0.5)}
.controls-info{margin-top:28px;color:rgba(255,255,255,0.4);font-size:13px;text-align:center;line-height:2.2}
.controls-info kbd{background:rgba(255,255,255,0.1);padding:3px 10px;border-radius:5px;border:1px solid rgba(255,255,255,0.15);font-family:inherit;margin:0 2px}
.char-preview{font-size:80px;margin-bottom:10px;filter:drop-shadow(0 0 20px rgba(64,196,255,0.5))}

#gameOverScreen{display:none;background:linear-gradient(180deg,rgba(30,10,20,0.95),rgba(15,5,15,0.98));pointer-events:all;z-index:100}
#gameOverScreen h1{font-size:42px;color:#ff4081;text-shadow:0 0 30px rgba(255,64,129,0.5);margin-bottom:5px}
.go-sub{color:rgba(255,255,255,0.5);margin-bottom:20px;font-size:15px}
.final-score{font-size:64px;font-weight:900;color:#ffd740;text-shadow:0 0 30px rgba(255,215,64,0.5);margin:5px 0}
.final-detail{color:rgba(255,255,255,0.5);font-size:14px;margin:3px 0}
.stats-row{display:flex;gap:30px;margin:20px 0 30px}
.stat-box{text-align:center}
.stat-val{font-size:28px;font-weight:800;color:#40c4ff}
.stat-label{font-size:11px;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:1px}
.new-best{color:#ffd740;font-size:13px;margin-top:5px;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}

#comboPopup{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:36px;font-weight:900;text-shadow:0 0 20px rgba(255,215,64,0.8);opacity:0;transition:all 0.4s;z-index:8;pointer-events:none;white-space:nowrap}

#powerupIndicator{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);display:none;z-index:8;pointer-events:none}
.powerup-active{background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);padding:8px 20px;border-radius:20px;color:#fff;font-size:14px;font-weight:600;border:1px solid rgba(255,255,255,0.2);display:flex;align-items:center;gap:8px}
.pu-bar{width:80px;height:4px;background:rgba(255,255,255,0.2);border-radius:2px;overflow:hidden}
.pu-fill{height:100%;background:#69f0ae;border-radius:2px;transition:width 0.1s}

#touchControls{position:absolute;bottom:20px;left:0;width:100%;display:none;justify-content:center;gap:15px;z-index:15;pointer-events:none}
.touch-btn{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,0.12);border:2px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:24px;color:rgba(255,255,255,0.7);pointer-events:all;backdrop-filter:blur(4px)}
.touch-btn:active{background:rgba(255,255,255,0.25);transform:scale(0.9)}

#mobileSwipeHint{position:absolute;bottom:50px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.3);font-size:12px;z-index:15;pointer-events:none;display:none}
</style>
</head>
<body>

<div id="hud" style="display:none">
  <div class="hud-left">
    <div class="hud-item">⭐<div class="hud-val score" id="scoreVal">0</div></div>
    <div class="hud-item">🪙<div class="hud-val coins" id="coinVal">0</div></div>
  </div>
  <div class="hud-right">
    <div class="hud-item">📏<div class="hud-val dist" id="distVal">0</di.........完整代码请登录后点击上方下载按钮下载查看