原生js模拟经典超级玛丽游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：原生js模拟经典超级玛丽游戏代码

下面为部分代码预览，完整代码请点击下载或在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>
<style>
  :root{
    --ui:#0f172a; --ui2:#1e293b; --accent:#16a34a; --text:#e5e7eb;
  }
  html,body{height:100%;margin:0;background:linear-gradient(#8ec5ff,#d7f1ff 60%,#b8e1ff);}
  body{display:flex;align-items:center;justify-content:center;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans SC",Arial,sans-serif;color:#111;}
  .wrap{position:relative; width:min(960px, 100vw); }
  canvas{display:block; width:100%; height:auto; border:2px solid rgba(0,0,0,.12); background:transparent; border-radius:8px; box-shadow:0 8px 32px rgba(0,0,0,.18)}
  .hud{
    position:absolute; left:8px; top:8px; display:flex; gap:12px; padding:6px 10px; 
    background:rgba(15,23,42,.7); color:var(--text); border-radius:8px; font-size:14px; backdrop-filter: blur(6px);
  }
  .hud .pill{padding:2px 8px; background:rgba(255,255,255,.08); border-radius:999px;}
  .title{
    position:absolute; left:50%; transform:translateX(-50%); top:8px;
    background:rgba(255,255,255,.7); color:#0f172a; padding:4px 10px; border-radius:8px; font-weight:700; font-size:14px; letter-spacing:.02em;
  }
  .help{
    position:absolute; right:8px; top:8px; background:rgba(15,23,42,.75); color:#e5e7eb;
    padding:6px 10px; border-radius:8px; font-size:12px; line-height:1.25; max-width:min(50%, 360px);
  }
  .overlay{
    position:absolute; inset:0; display:none; align-items:center; justify-content:center; flex-direction:column;
    background:rgba(0,0,0,.35); color:#fff; text-align:center;
  }
  .overlay.show{display:flex;}
  .overlay h1{margin:0 0 8px 0; font-size:36px; text-shadow:0 2px 10px rgba(0,0,0,.7);}
  .overlay p{margin:6px 0 0 0; opacity:.9}
  .btn{
    margin-top:12px; padding:8px 14px; border-radius:10px; background:#16a34a; color:#fff; border:none; cursor:pointer; font-weight:700;
    box-shadow:0 4px 16px rgba(22,163,74,.4);
  }
  /* 移动端按键 */
  .touch{
    position:absolute; inset:0; pointer-events:none;
  }
  .pad-left{
    position:absolute; left:8px; bottom:8px; width:38%; max-width:320px; height:38%; max-height:220px; pointer-events:none;
  }
  .pad-right{
    position:absolute; right:8px; bottom:8px; width:38%; max-width:320px; height:38%; max-height:220px; pointer-events:none;
    display:flex; align-items:flex-end; justify-content:flex-end; gap:10px;
  }
  .btn-round{
    pointer-events:auto;
    width:70px; height:70px; border-radius:50%; background:rgba(30,41,59,.6); border:2px solid rgba(255,255,255,.25);
    color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; user-select:none; touch-action:none;
  }
  .btn-round:active{ transform:scale(.96); background:rgba(30,41,59,.8); }
  .dpad{
    pointer-events:auto; width:160px; height:160px; position:absolute; left:0; bottom:0; touch-action:none;
  }
  .dpad .dir{position:absolute; width:64px; height:64px; border-radius:12px; background:rgba(30,41,59,.6); border:2px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900;}
  .dpad .dir:active{transform:scale(.96); background:rgba(30,41,59,.8);}
  .dpad .left{left:0; top:48px;}
  .dpad .right{right:0; top:48px;}
  /* 小屏：隐藏帮助 */
  @media (max-width: 680px){
    .help{display:none;}
  }
</style>
</head>
<body>
  <div class="wrap">
    <canvas id="game" width="960" height="576"></canvas>
    <div class="title">超级玛丽风格（Canvas 单文件版）</div>
    <div class="hud" id="hud">
      <div class="pill" id="hudScore">分数 000000</div>
      <div class="pill" id="hudCoins">金币 x0</div>
      <div class="pill" id="hudTime">时间 300</div>
    </div>
    <div class="help">
      键位：A/← 左，D/→ 右，J/Z/空格 跳，Shift 奔跑，加速 | P 暂停 | R 重开<br>
      提示：顶问号块→金币；踩敌人加分；到旗杆通关。支持移动端屏幕按键。
    </div>

    <div class="overlay" id="overlay">
      <h1 id="overlayTitle">暂停</h1>
      <p id="overlayDesc">按 P 继续</p>
      <button class="btn" id="overlayBtn">继续游戏</button>
    </div>

    <div class="touch">
      <div class="pad-left">
        <div class="dpad">
          <div class="dir left" id="btnLeft">←</div>
          <div class="dir right" id="btnRight">→</div>
        </div>
      </div>
      <div class="pad-right">
        <div class="btn-round" id="btnRun">RUN</div>
        <div class="btn-round" id="btnJump">JUMP</div>
      </div>
    </div>
  </div>

<script>
(() => {
  // 基础
  const canvas = document.getElementById('game');
  const c.........完整代码请登录后点击上方下载按钮下载查看