canvas实现经典植物大战僵尸游戏代码-html代码-BFW代码库

canvas实现经典植物大战僵尸游戏代码

代码语言：html

所属分类：游戏

代码描述：canvas实现经典植物大战僵尸游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>PVZ 经典简化复刻（单文件）</title>
  <style>
    :root{
      --bg:#2f6a2f;
      --panel:#183a18;
      --panel2:#0f2a0f;
      --tile1:#3d8a3d;
      --tile2:#357c35;
      --gridBorder: rgba(0,0,0,.25);
      --txt: #eaffea;
      --muted: rgba(234,255,234,.75);
      --danger:#ff5252;
      --ok:#5cff5c;
      --sun:#ffd54a;
      --pea:#7dff6a;
      --zombie:#8bd6ff;
    }
    *{ box-sizing:border-box; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC","Microsoft YaHei", Arial;
      background: radial-gradient(1200px 700px at 40% 0%, #4aa44a 0%, var(--bg) 55%, #214f21 100%);
      color:var(--txt);
      user-select:none;
    }
    .wrap{
      max-width: 1100px;
      margin: 0 auto;
      padding: 18px 16px 22px;
    }
    .topbar{
      display:flex;
      gap:12px;
      align-items:stretch;
      flex-wrap:wrap;
    }
    .hud{
      flex: 1 1 520px;
      background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.12));
      border:1px solid rgba(255,255,255,.08);
      border-radius:14px;
      padding:12px 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      min-height:72px;
    }
    .hud .left{
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .title{
      font-weight: 800;
      letter-spacing:.5px;
      font-size: 16px;
      opacity:.95;
    }
    .stats{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      align-items:center;
      color:var(--muted);
      font-size:13px;
    }
    .chip{
      padding:4px 8px;
      border-radius:999px;
      background: rgba(0,0,0,.18);
      border:1px solid rgba(255,255,255,.08);
      display:inline-flex;
      gap:7px;
      align-items:center;
    }
    .sunIcon{
      width:14px;height:14px;border-radius:999px;
      background: radial-gradient(circle at 30% 30%, #fff2b0 0%, var(--sun) 55%, #d49d00 100%);
      box-shadow: 0 0 0 2px rgba(0,0,0,.15) inset, 0 0 10px rgba(255,213,74,.35);
    }
    .btns{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:flex-end;
    }
    button{
      cursor:pointer;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.22);
      color:var(--txt);
      border-radius: 10px;
      padding: 9px 12px;
      font-weight: 650;
      font-size: 13px;
      transition: transform .08s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
    }
    button:hover{ background: rgba(0,0,0,.28); }
    button:active{ transform: translateY(1px); }
    button[disabled]{ opacity:.45; cursor:not-allowed; }

    .cards{
      flex: 1 1 520px;
      background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.10));
      border:1px solid rgba(255,255,255,.08);
      border-radius:14px;
      padding:12px 12px;
      min-height:72px;
      display:flex;
      gap:10px;
      align-items:center;
      overflow:auto;
    }
    .card{
      min-width: 120px;
      height: 48px;
      border-radius: 12px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.18);
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:8px 10px;
      gap:10px;
      position:relative;
      transition: transform .08s ease, background .15s ease, border-color .15s ease;
      cursor:pointer;
    }
    .card:hover{ background: rgba(0,0,0,.25); }
    .card:active{ transform: translateY(1px); }
    .card.selected{
      outline: 2px solid rgba(92,255,92,.9);
      box-shadow: 0.........完整代码请登录后点击上方下载按钮下载查看