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>外卖狂飙 · Rush Delivery 3D</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700;900&family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#2a1810; --paper:#fff4dc; --sun:#ffc23f; --tomato:#ff5a3c;
  --leaf:#2ea86e; --panel:rgba(32,20,13,.86); --line:#3d281a;
}
*{margin:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{font-family:'Noto Sans SC',sans-serif;background:#ffb45e;user-select:none;-webkit-user-select:none;touch-action:none}
.display{font-family:'ZCOOL KuaiLe','Noto Sans SC',cursive}
canvas#c{position:fixed;inset:0;display:block}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(60,20,0,.30))}
#flash{position:fixed;inset:0;pointer-events:none;z-index:6;background:#fff;opacity:0}
kbd{display:inline-block;min-width:26px;padding:2px 7px;background:#fff;color:var(--ink);
  border:2px solid var(--ink);border-radius:6px;box-shadow:0 3px 0 var(--ink);
  font-weight:900;font-size:12px;text-align:center;margin:0 2px}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none;opacity:0;transition:opacity .4s}
body[data-state="play"] #hud,body[data-state="pause"] #hud{opacity:1}
#topbar{position:absolute;top:12px;left:12px;right:12px;display:flex;align-items:flex-start;gap:14px}
.panel{background:var(--panel);border:3px solid var(--line);border-radius:10px;
  box-shadow:0 5px 0 rgba(0,0,0,.35);color:var(--paper)}
#statPanel{padding:10px 16px;min-width:150px;transform:rotate(-.8deg)}
#statPanel .row{display:flex;align-items:baseline;gap:8px;line-height:1.5}
#statPanel .lab{font-size:12px;opacity:.75}
#money{font-family:'ZCOOL KuaiLe';font-size:30px;color:var(--sun);text-shadow:2px 2px 0 #000}
#orders{font-weight:900;font-size:18px}
#weather{font-size:20px}
#weatherName{font-weight:900;font-size:14px}
#combo{font-family:'ZCOOL KuaiLe';color:var(--tomato);font-size:20px;opacity:0;transform:scale(.6);transition:.25s}
#combo.on{opacity:1;transform:scale(1);animation:comboPop .3s}
@keyframes comboPop{50%{transform:scale(1.4) rotate(-4deg)}}
#mapPanel{padding:6px;transform:rotate(.8deg)}
#minimap{display:block;border-radius:6px}

/* 订单小票 */
#ticket{margin-left:auto;margin-right:auto;position:relative;width:min(330px,46vw);
  background:var(--paper);color:var(--ink);padding:12px 16px 20px;border-radius:10px 10px 0 0;
  box-shadow:0 8px 0 rgba(0,0,0,.30);transform:rotate(.6deg)}
#ticket::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:10px;
  background:radial-gradient(circle at 7px -3px,transparent 8px,var(--paper) 8.5px);
  background-size:14px 10px;background-repeat:repeat-x}
#ticket .top{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;opacity:.85}
#stage{padding:2px 10px;border-radius:20px;color:#fff;font-weight:900;font-size:12px}
#stage.s0{background:#e58a1f}#stage.s1{background:var(--leaf)}
#dish{font-family:'ZCOOL KuaiLe';font-size:26px;margin:4px 0 2px;letter-spacing:1px}
#cust{font-size:13px;opacity:.8}
#ticket .meta{display:flex;justify-content:space-between;font-size:13px;margin-top:6px;font-weight:700}
#dist{color:#b3541e}
#timeRow{display:flex;align-items:center;gap:10px;margin-top:8px}
#timeNum{font-family:'ZCOOL KuaiLe';font-size:34px;min-width:64px;text-align:right}
#timeNum.danger{color:var(--tomato);animation:pulse .5s infinite}
@keyframes pulse{50%{transform:scale(1.15)}}
#timeTrack{flex:1;height:12px;background:#e5d5b3;border-radius:8px;overflow:hidden;border:2px solid var(--ink)}
#timeFill{height:100%;width:100%;background:linear-gradient(90deg,var(--leaf),#8fd65a);transition:width .2s linear}
#timeFill.warn{background:linear-gradient(90deg,#e58a1f,var(--sun))}
#timeFill.danger{background:linear-gradient(90deg,#c9331f,var(--tomato))}
#stamp{position:absolute;right:8px;top:34px;width:58px;height:58px;border:3px solid var(--tomato);
  border-radius:50%;display:grid;place-items:center;color:var(--tomato);
  font-family:'ZCOOL KuaiLe';font-size:19px;transform:rotate(14deg);opacity:.75;pointer-events:none}

/* 底部 */
#speedo{position:absolute;left:18px;bottom:16px;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.5)}
#speedNum{font-family:'ZCOOL KuaiLe';font-size:52px;line-height:1;color:var(--sun)}
#speedo small{font-size:13px;font-weight:900;letter-spacing:2px}
#boostWrap{position:absolute;right:18px;bottom:18px;width:180px;color:var(--paper);
  font-size:12px;font-weight:900;text-shadow:0 2px 0 rgba(0,0,0,.5)}
#boostTrack{height:14px;background:rgba(0,0,0,.45);border:2px solid var(--sun);border-radius:8px;overflow:hidden;margin-top:4px}
#boostFill{height:100%;width:100%;background:linear-gradient(90deg,#ff9d2e,var(--sun))}
#muteBtn{position:absolute;right:14px;top:230px;pointer-events:auto;width:44px;height:44px;
  border-radius:12px;border:3px solid var(--line);background:var(--panel);font-size:20px;cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,.35)}
#muteBtn:active{transform:translateY(3px);box-shadow:none}

/* toast */
#toasts{position:absolute;top:210px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--panel);color:var(--paper);border:3px solid var(--sun);border-radius:12px;
  padding:8px 20px;font-weight:900;font-size:16px;box-shadow:0 5px 0 rgba(0,0,0,.35);
  opacity:0;transform:translateY(-14px) scale(.8);transition:.25s;white-space:nowrap}
.toast.show{opacity:1;transform:none}
.toast.gold{border-color:var(--tomato);color:var(--sun);font-family:'ZCOOL KuaiLe';font-size:20px}

/* ---------- 遮罩界面 ---------- */
.screen{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(46,18,4,.20),rgba(46,18,4,.62))}.........完整代码请登录后点击上方下载按钮下载查看