代码语言：html

所属分类：其他

代码由minimax-m3.1-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, viewport-fit=cover" />
<title>蜘蛛侠 · 城市穿梭</title>
<style>
  * { margin:0; padding:0; box-sizing:border-box; }
  html,body { width:100%; height:100%; overflow:hidden; background:#05070d;
    font-family:"HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
    color:#fff; -webkit-user-select:none; user-select:none; touch-action:none; }
  canvas { display:block; }
  #game { position:fixed; inset:0; }

  /* ---------------- HUD ---------------- */
  #hud { position:fixed; inset:0; pointer-events:none; z-index:10; }
  .panel { background:linear-gradient(180deg,rgba(8,12,22,.72),rgba(8,12,22,.42));
    border:1px solid rgba(120,190,255,.18); border-radius:14px;
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }

  #topbar { position:absolute; top:14px; left:14px; right:14px; display:flex; gap:12px;
    align-items:flex-start; justify-content:space-between; }

  #stats { padding:10px 16px; display:flex; gap:22px; align-items:center; }
  .stat { display:flex; flex-direction:column; line-height:1.05; }
  .stat .k { font-size:10px; letter-spacing:.18em; color:#7f93b3; text-transform:uppercase; }
  .stat .v { font-size:22px; font-weight:800; font-variant-numeric:tabular-nums;
    text-shadow:0 0 14px rgba(90,180,255,.45); }
  #scoreV { color:#ffd66b; text-shadow:0 0 16px rgba(255,190,60,.6); }

  #hpwrap { padding:10px 14px; min-width:190px; }
  #hpwrap .k { font-size:10px; letter-spacing:.18em; color:#7f93b3; margin-bottom:6px; display:flex; justify-content:space-between;}
  #hpbar { height:9px; border-radius:6px; background:rgba(255,255,255,.09); overflow:hidden; }
  #hpfill { height:100%; width:100%; border-radius:6px;
    background:linear-gradient(90deg,#ff4d5e,#ff9b3d 55%,#ffd15c); transition:width .18s ease; }

  #timewrap { padding:10px 16px; text-align:center; }
  #timeV { font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; }
  #timewrap.low #timeV { color:#ff6b7a; text-shadow:0 0 18px rgba(255,70,90,.7); animation:pulse .7s infinite; }
  @keyframes pulse { 50% { transform:scale(1.12); } }

  #minimap { position:absolute; right:14px; bottom:14px; width:172px; height:172px;
    border-radius:50%; overflow:hidden; border:2px solid rgba(120,190,255,.25);
    box-shadow:0 0 30px rgba(0,0,0,.6), inset 0 0 40px rgba(0,0,0,.55); background:#04070e; }
  #mmc { width:100%; height:100%; }

  #speedo { position:absolute; left:14px; bottom:18px; width:120px; height:120px; }
  #speedo svg { width:100%; height:100%; transform:rotate(135deg); }
  #spdTxt { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  #spdTxt b { font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; }
  #spdTxt i { font-style:normal; font-size:9px; letter-spacing:.2em; color:#7f93b3; }

  #combo { position:absolute; left:50%; top:26%; transform:translateX(-50%);
    font-size:42px; font-weight:900; opacity:0; letter-spacing:2px;
    text-shadow:0 0 30px rgba(255,190,60,.8); }

  #toast { position:absolute; left:50%; top:60%; transform:translateX(-50%);
    font-size:20px; font-weight:700; opacity:0; text-shadow:0 2px 20px rgba(0,0,0,.8); }

  /* ---------------- overlays ---------------- */
  .screen { position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(ellipse at 50% 40%,rgba(12,26,58,.72),rgba(3,5,10,.94)); }
  .screen.hide { display:none; }
  .card { width:min(560px,92vw); max-height:94vh; overflow-y:auto; padding:34px 38px; text-align:center;
    background:linear-gradient(180deg,rgba(12,18,34,.9),rgba(8,11,20,.86));
    border:1px solid rgba(130,190,255,.2); border-radius:24px;
    box-shadow:0 30px 90px rgba(0,0,0,.6); }
  h1 { font-size:40px; font-weight:900; letter-spacing:1px; line-height:1.1;
    background:linear-gradient(180deg,#ff5f6d,#e01030 55%,#7b1226);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 4px 20px rgba(224,16,48,.45)); }
  h1 small { display:block; font-size:12px; letter-spacing:.42em; color:#6f86a8;
    background:none; -webkit-text-fill-color:#6f86a8; margin-top:8px; font-weight:600; }
  .desc { color:#9fb3d1; font-size:13.5px; line-height:1.85; margin:18px 0 6px; }
  .keys { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px;
    margin:20px 0 24px; text-align:left; }
  .keys div { display:flex; align-items:center; gap:9px; font-size:12.5px; color:#b7c8e2; min-width:0;
    background:rgba(255,255,255,.04); padding:8px 10px; border-radius:10px; }
  .keys div span { line-height:1.35; flex:1; min-width:0; }
  .keys div:first-child { grid-column:1 / -1; }
  kbd { white-space:nowrap; flex:none; min-width:26px; text-align:center; padding:3px 7px; font-size:11px; font-weight:700;
    background:#1d2740; border:1px solid #33405e; border-bottom-width:2px; border-radius:6px; color:#dbe6f7; }
  button { font:inherit; font-weight:800; cursor:pointer; border:0; color:#fff;
    padding:15px 44px; font-size:17px; border-radius:999px; letter-spacing:2px;
    background:linear-gradient(180deg,#ff4b5c,#c81029); color:#fff;
    box-shadow:0 12px 30px rgba(200,16,41,.42); transition:.16s transform, .16s filter; }
  button:hover { transform:translateY(-2px); filter:brightness(1.1); }
  button:active { transform:translateY(1px); }
  .tips { margin-top:16px; font-size:11.5px; color:#6d80a0; }
  #finalStats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:22px 0 24px; }
  #finalStats div { padding:14px 6px; border-radius:14px; background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.06); }
  #finalStats b { display:block; font-size:26px; font-weight:900; font-variant-numeric:tabular-nums; }
  #finalStats span { font-size:10px; letter-spacing:.18em; color:#7f93b3; }

  /* touch controls */
  #touch { position:fixed; inset:0; z-index:20; display:none; }
  #touch.on { display:block; }
  .tzone { position:absolute; bottom:0; height:56%; pointer-events:auto; }
  .thud { position:absolute; width:104px; height:104px; border-radius:50%;
    border:2px solid rgba(255,255,255,.22); background:rgba(255,255,255,.07); }
  #tmove { left:22px; bottom:22px; }
  #tknob { position:absolute; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.35);
    left:calc(50% - 23px); top:calc(50% - 23px); }
  #tweb { right:26px; bottom:30px; width:92px; height:92px; border-radius:50%;
    background:rgba(220,30,60,.32); border:2px solid rgba(255,120,140,.5);
    display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; letter-spacing:1px; }
  #tjump { right:130px; bottom:38px; width:76px; height:76px; border-radius:50%;
    background:rgba(40,120,220,.28); border:2px solid rgba(120,190,255,.45);
    display.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论