代码语言：html

所属分类：其他

代码由glm-5.3-flash ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：三维低洼路面卡丁车比赛游戏

代码标签： 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>越野卡丁车拉力赛 · Off-Road Kart Rally 3D</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#0b0f13;font-family:"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}
#game{position:fixed;inset:0}
#game canvas{display:block}
/* ---------------- HUD ---------------- */
#hud{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .6s;z-index:3}
#hud.on{opacity:1}
.panel{position:absolute;background:rgba(10,14,19,.55);border:1px solid rgba(255,255,255,.14);border-radius:14px;backdrop-filter:blur(6px);color:#f2f6f9}
#posCard{top:16px;left:16px;padding:10px 16px;display:flex;align-items:baseline;gap:10px}
#posBig{font-size:44px;font-weight:800;line-height:1;color:#ffb43a;min-width:30px;text-align:center}
#posSide{display:flex;flex-direction:column;gap:2px}
#posSub{font-size:12px;color:#cfd8de}
#lapLbl{font-size:15px;font-weight:700}
#timeCard{top:16px;left:50%;transform:translateX(-50%);padding:8px 22px;text-align:center;min-width:200px}
#timeCur{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:1px}
#timeRow{display:flex;justify-content:space-between;gap:14px;font-size:11.5px;color:#b9c4cc;font-variant-numeric:tabular-nums}
#timeRow b{color:#e8eef2}
#mini{left:16px;bottom:16px;padding:8px}
#miniCv{display:block;border-radius:8px}
#speedCard{right:16px;bottom:16px;padding:8px 12px 6px;text-align:center}
#spdCv{display:block}
#spdNum{font-size:16px;font-weight:800;color:#ffb43a;margin-top:-2px}
#spdNum small{font-size:10px;color:#aab6bf;font-weight:600}
#hintBar{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);font-size:12px;color:rgba(240,245,248,.85);background:rgba(10,14,19,.4);padding:5px 14px;border-radius:20px;pointer-events:none;opacity:0;transition:opacity .6s;white-space:nowrap;z-index:3}
#hintBar.on{opacity:1}
#msg{position:fixed;top:24%;left:50%;transform:translate(-50%,-50%) scale(.9);font-size:46px;font-weight:900;color:#fff;text-shadow:0 3px 16px rgba(0,0,0,.55),0 0 2px #000;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;letter-spacing:3px;z-index:4}
#msg.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#msg.small{font-size:28px}
#warn{position:fixed;top:36%;left:50%;transform:translateX(-50%);font-size:24px;font-weight:800;color:#ff5a4e;background:rgba(60,8,4,.55);border:1px solid rgba(255,90,78,.5);padding:8px 22px;border-radius:12px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:4}
#warn.on{opacity:1}
/* ---------------- 覆盖层 ---------------- */
#overlay{position:fixed;inset:0;z-index:10}
#overlay.hidden{display:none}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.scr.hidden{display:none}
#scrLoad{background:radial-gradient(ellipse at 50% 40%,#182430,#0b0f13)}
.spin{width:44px;height:44px;border-radius:50%;border:4px solid rgba(255,180,58,.2);border-top-color:#ffb43a;animation:sp 1s linear infinite;margin-bottom:18px}
@keyframes sp{to{transform:rotate(360deg)}}
.loadtxt{color:#9fb0bc;font-size:15px;letter-spacing:1px;max-width:80%}
#scrStart{background:linear-gradient(180deg,rgba(8,12,16,.68),rgba(8,12,16,.9))}
.title-zh{font-size:54px;font-weight:900;color:#fff;letter-spacing:8px;text-shadow:0 4px 24px rgba(0,0,0,.6)}
.title-en{font-size:14px;color:#ffb43a;letter-spacing:9px;margin:12px 0 28px;font-weight:700}
.ctrl-grid{display:grid;grid-template-columns:auto auto;gap:9px 20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:16px 28px;border-radius:14px;color:#dbe4ea;font-size:14px;margin-bottom:30px;text-align:left}
.ctrl-grid span:nth-child(odd){color:#9fb0bc;font-size:13px;align-self:center}
.key{display:inline-block;background:#242c34;border:1px solid #3a444e;border-bottom-width:3px;border-radius:6px;padding:2px 9px;font-size:12px;font-weight:700;color:#fff;margin-right:3px;font-style:normal}
.big-btn{pointer-events:auto;cursor:pointer;font-size:20px;font-weight:800;color:#161006;background:linear-gradient(180deg,#ffc75e,#ff9d1e);border:none;border-radius:14px;padding:14px 56px;letter-spacing:6px;box-shadow:0 6px 24px rgba(255,157,30,.35);transition:transform .15s}
.big-btn:hover{transform:translateY(-2px) scale(1.03)}
.tip{margin-top:18px;color:#8fa0ac;font-size:12.5px;letter-spacing:1px}
#scrCount{background:transparent;pointer-events:none}
#countNum{font-size:150px;font-weight:900;color:#ffb43a;text-shadow:0 6px 40px rgba(0,0,0,.5)}
#countNum.pop{animation:pop .95s ease-out}
@keyframes pop{0%{transform:scale(1.7);opacity:0}18%{transform:scale(1);opacity:1}82%{opacity:1}100%{opacity:.1}}
#scrEnd{background:linear-gradient(180deg,rgba(8,12,16,.78),rgba(8,12,16,.92))}
#endTitle{font-size:40px;font-weight:900;color:#ffb43a;letter-spacing:3px;margin-bottom:6px}
#endSub{color:#cfd8de;margin-bottom:22px;font-size:15px}
#resList{display:flex;flex-direction:column;gap:6px;margin-bottom:26px;min-width:340px}
.resRow{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:9px 18px;font-size:16px;color:#eef3f6}
.resRow.me{background:rgba(255,180,58,.16);border-color:rgba(255,180,58,.55)}
.resRow .rp{font-weight:900;color:#ffb43a;width:30px;font-size:18px}
.resRow .rn{flex:1;text-align:left;font-weight:700}
.resRow .rt{font-variant-numeric:tabular-nums;color:#b9c4cc;font-size:14px}
.btnRow{display:flex;gap:16px;align-items:center}
.ghost-btn{pointer-events:auto;cursor:pointer;font-size:15px;font-weight:700;color:#e8eef2;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);border-radius:12px;padding:12px 30px;letter-spacing:2px}
.ghost-btn:hover{background:rgba(255,255,255,.16)}
/* ---------------- 触控 ---------------- */
#touch{position:fixed;inset:0;pointer-events:none;z-index:5;display:none}
#touch.on{display:block}
.tbtn{position:fixed;pointer-events:auto;width:76px;height:76px;border-radius:50%;background:rgba(20,26,32,.5);border:2px solid rgba(255,255,255,.3);color:#fff;fon.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论