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,maximum-scale=1,user-scalable=no"/>
<title>重载狂飙 · 高速公路卡车模拟</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Russo+One&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#0b0e13;font-family:'Noto Sans SC',sans-serif;color:#eef0f3;
 -webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none}
#scene{position:fixed;inset:0;display:block}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:2;
 background:radial-gradient(ellipse at 50% 42%,transparent 52%,rgba(4,7,12,.52) 100%)}
.off{opacity:0!important;visibility:hidden!important;pointer-events:none!important;
 transition:opacity .45s,visibility 0s .45s}
/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5;transition:opacity .45s}
.panel{position:absolute;background:rgba(13,15,20,.9);border:1px solid #2a2f38;padding:10px 16px 12px;
 clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
#statPanel{top:14px;left:14px;border-left:4px solid #ffc21a;min-width:176px}
.pTitle{font-size:11px;letter-spacing:3px;color:#8b93a0;margin-bottom:6px}
.statRow{display:flex;justify-content:space-between;gap:18px;font-size:12px;color:#9aa3ad;line-height:1.9}
.statRow b{font-family:'Russo One';font-size:17px;color:#f2f3f5;font-weight:400}
#scoreRow b{color:#ffc21a;font-size:21px}
#hpPanel{top:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;border-left:4px solid #3ddc84}
#hpPanel .pTitle{margin:0}
#hpBar{width:min(240px,32vw);height:12px;background:#101318;border:1px solid #2a2f38;overflow:hidden}
#hpFill{display:block;height:100%;width:100%;background:linear-gradient(90deg,#2fbf71,#3ddc84);transition:width .25s}
#hpPanel.warn #hpFill{background:linear-gradient(90deg,#d98a2a,#ffc21a)}
#hpPanel.crit #hpFill{background:linear-gradient(90deg,#c23325,#ff5d4d);animation:pulse .5s infinite alternate}
#hpTxt{font-family:'Russo One';font-size:12px;color:#9aa3ad;font-style:normal}
@keyframes pulse{from{opacity:.5}to{opacity:1}}
#muteBtn{position:absolute;top:14px;right:14px;width:42px;height:42px;background:rgba(13,15,20,.9);
 border:1px solid #2a2f38;color:#ffc21a;font-size:18px;cursor:pointer;pointer-events:auto}
#muteBtn:hover{border-color:#ffc21a}
#gaugeWrap{position:absolute;right:14px;bottom:12px;width:clamp(160px,23vw,224px);aspect-ratio:1}
#gauge{width:100%;height:100%;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}
#speedNum{position:absolute;left:0;right:0;top:46%;text-align:center;font-family:'Russo One';
 font-size:clamp(30px,4.6vw,44px);color:#f4f6f8;text-shadow:0 2px 8px #000}
#speedUnit{position:absolute;left:0;right:0;top:calc(46% + clamp(32px,4.8vw,46px));text-align:center;
 font-size:10px;letter-spacing:3px;color:#8b93a0}
#gearBox{position:absolute;left:50%;transform:translateX(-50%);bottom:7%;background:#15181e;
 border:1px solid #2a2f38;border-bottom:3px solid #ffc21a;padding:2px 12px;
 font-family:'Russo One';color:#ffc21a;font-size:18px}
#gearBox span{font-size:10px;color:#8b93a0;margin-left:3px;font-family:'Noto Sans SC'}
#gearBox.flash{animation:gflash .35s}
@keyframes gflash{0%{background:#ffc21a;color:#111}100%{}}
#rpmBar{position:absolute;left:18%;right:18%;bottom:2%;height:4px;background:#101318}
#rpmBar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#ffc21a,#ff5d4d)}
#hints{position:absolute;left:14px;bottom:12px;font-size:11px;color:#79828d;letter-spacing:1px;line-height:2}
#hints kbd,.mGrid kbd{background:#15181e;border:1px solid #2a2f38;border-bottom-width:2px;padding:1px 6px;
 border-radius:3px;font-family:'Russo One';font-size:10px;color:#c7cdd5;margin:0 2px}
#camLabel{position:absolute;right:16px;bottom:calc(clamp(160px,23vw,224px) + 26px);
 font-size:11px;color:#8b93a0;letter-spacing:2px;text-align:right}
#popups{position:absolute;left:50%;top:26%;width:0}
.pop{position:absolute;left:0;transform:translateX(-50%);white-space:nowrap;
 font-family:'ZCOOL QingKe HuangYou';font-size:26px;color:#ffc21a;
 text-shadow:0 2px 6px rgba(0,0,0,.8),0 0 18px rgba(255,194,26,.35);animation:floatUp 1.25s ease-out forwards}
.pop.bad{color:#ff5d4d;text-shadow:0 2px 6px rgba(0,0,0,.8),0 0 18px rgba(255,60,40,.4)}
.pop.info{color:#e8ecf1;font-size:20px}
@keyframes floatUp{0%{opacity:0;margin-top:16px}18%{opacity:1}100%{opacity:0;margin-top:-64px}}
#bigMsg{position:absolute;left:0;right:0;top:24%;text-align:center;font-family:'ZCOOL QingKe HuangYou';
 font-size:clamp(56px,11vw,110px);color:#ffc21a;letter-spacing:8px;
 text-shadow:4px 4px 0 #7a5200,0 8px 30px rgba(0,0,0,.7);opacity:0}
#bigMsg.show{animation:bigPop 1s ease forwards}
@keyframes bigPop{0%{opacity:0;transform:scale(2.1)}22%{opacity:1;transform:scale(1)}
 70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.92)}}
#hurt{position:absolute;inset:0;opacity:0;box-shadow:inset 0 0 140px 40px rgba(255,42,20,.75);
 transition:opacity .18s;pointer-events:none}
/* ---------- 屏幕 ---------- */
.screen{position:fixed;inset:0;z-index:10;transition:opacity .45s}
#startScreen{background:linear-gradient(180deg,rgba(6,9,14,0) 34%,rgba(6,9,14,.55) 62%,rgba(6,9,14,.92) 100%);
 display:flex;align-items:flex-end;pointer-events:auto}
#startBox{padding:0 0 42px clamp(18px,5vw,64px);max-width:660px}
.kicker{display:inline-block;font-size:11px;letter-spacing:4px;color:#0e1013;background:#ffc21a;
 padding:4px 12px;font-weight:700;transform:skewX(-8deg);margin-bottom:14px}
#startBox h1{font-family:'ZCOOL QingKe HuangYou';font-weight:400;font-size:clamp(58px,11vw,116px);
 line-height:1;color:#f4f6f8;letter-spacing:4px;transform:skewX(-4deg);
 text-shadow:4px 4px 0 rgba(200,52,42,.85),0 10px 40px rgba(0,0,0,.6)}
#startBox h1 span{color:#ffc21a}
.stripe{height:8px;width:min(420px,70vw);margin:16px 0 14px;
 background:repeating-linear-gradient(-55deg,#ffc21a 0 14px,#15171b 14px 28px)}
#startBox .sub{font-size:14px;color:#b8c0ca;line-height:1.9;max-width:520px}
#manifest{margin:18px 0 22px;background:rgba(13,15,20,.85);border:1px solid #2a2f38;border-top:3px solid #ffc21a;
 max-width:480px;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.mHead{padding:8px 16px;font-family:'ZCOOL QingKe HuangYou';font-size:17px;letter-spacing:6px;
.........完整代码请登录后点击上方下载按钮下载查看