js+css塔防游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js+css塔防游戏代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>钢铁防线 - 塔防战略</title>
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Noto+Sans+SC:wght@400;600;700;900&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">


<style>
:root{--bg:#1a1f16;--fg:#e8e0cc;--muted:#8b8570;--accent:#c4a35a;--army:#4a5d23;--army-d:#2d3a14;--card:#232a1c;--border:#3a4230;--danger:#c44a2f;--info:#4a8fb5}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:'Noto Sans SC',sans-serif;min-height:100vh;overflow-x:hidden}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--army-d)}
::-webkit-scrollbar-thumb{background:var(--army);border-radius:3px}

.screen{display:none;width:100%;min-height:100vh}
.screen.active{display:flex}

/* 菜单画面 */
#menu-screen{flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 30% 40%,#2d3a14 0%,#1a1f16 70%)}
.menu-bg-pattern{position:absolute;inset:0;opacity:.06;
  background-image:repeating-linear-gradient(0deg,transparent,transparent 40px,var(--army) 40px,var(--army) 41px),
  repeating-linear-gradient(90deg,transparent,transparent 40px,var(--army) 40px,var(--army) 41px)}
.menu-title{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:clamp(3rem,8vw,5.5rem);
  letter-spacing:.12em;color:var(--accent);text-shadow:0 0 40px rgba(196,163,90,.3),0 4px 0 #2d3a14}
.menu-subtitle{font-size:1.1rem;color:var(--muted);letter-spacing:.3em;text-transform:uppercase}
.btn-start{background:linear-gradient(135deg,var(--army),var(--army-d));color:var(--accent);
  border:2px solid var(--accent);padding:.9rem 3rem;font-size:1.15rem;font-weight:700;
  letter-spacing:.15em;cursor:pointer;transition:all .25s;font-family:'Rajdhani',sans-serif}
.btn-start:hover{background:linear-gradient(135deg,#5a6d2a,#3d4a1a);transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(74,93,35,.5)}

/* 游戏画面 */
#game-screen{flex-direction:column;align-items:center;padding:8px}
.top-bar{width:100%;max-width:1020px;display:flex;align-items:center;gap:16px;padding:6px 14px;
  background:var(--card);border:1px solid var(--border);border-radius:6px;margin-bottom:6px;flex-wrap:wrap}
.stat-item{display:flex;align-items:center;gap:6px;font-family:'Rajdhani',sans-serif;font-weight:600;font-size:1rem}
.stat-item i{font-size:.85rem}
.stat-val{color:var(--accent);font-weight:700;min-width:30px}

.game-wrap{display:flex;gap:8px;max-width:1020px;width:100%}
.canvas-wrap{position:relative;border:2px solid var(--border);border-radius:6px;overflow:hidden;flex-shrink:0;
  box-shadow:inset 0 0 30px rgba(0,0,0,.4)}
#gc{display:block;cursor:crosshair}

.side-panel{width:260px;flex-shrink:0;display:flex;flex-direction:column;gap:6px}
.panel-card{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:10px}
.panel-title{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1.05rem;color:var(--accent);
  border-bottom:1px solid var(--border);padding-bottom:6px;margin-bottom:8px;letter-spacing:.08em}
.tower-btn{display:flex;align-items:center;gap:10px;padding:8px;border:2px solid transparent;
  border-radius:6px;cursor:pointer;transition:all .2s;background:rgba(74,93,35,.1)}
.tower-btn:hover{background:rgba(74,93,35,.25);border-color:var(--army)}
.tower-btn.selected{border-color:var(--accent);background:rgba(196,163,90,.12);
  box-shadow:0 0 12px rgba(196,163,90,.15)}
.tower-btn.disabled{opacity:.4;cursor:not-allowed}
.tower-icon{width:40px;height:40px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.tower-meta{flex:1}
.tower-name{font-weight:700;font-size:.9rem}
.tower-cost{font-size:.8rem;color:var(--accent)}
.tower-desc{font-size:.72rem;color:var(--muted);margin-top:2px}

.info-row{display:flex;justify-content:space-between;font-size:.82rem;padding:3px 0;border-bottom:1px solid rgba(58,66,48,.4)}
.info-label{color:var(--muted)}
.info-val{font-weight:700;color:var(--fg)}

.btn-sm{padding:6px 14px;border:1px solid var(--border);background:var(--army-d);color:var(--fg);
  border-radius:4px;cursor:pointer;font-size:.82rem;font-weight:600;transition:all .2s;font-family:'Noto Sans SC',sans-serif}
.btn-sm:hover{background:var(--army);border-color:var(--accent)}
.btn-sm.danger{border-color:var(--danger);color:var(--danger)}
.btn-sm.danger:hover{background:rgba(196,74,47,.2)}
.btn-sm.accent{border-color:var(--accent);color:var(--accent)}
.btn-sm.accent:hover{background:rgba(196,163,90,.15)}
.btn-sm:disabled{opacity:.35;cursor:not-allowed}

.bottom-bar{width:100%;max-width:1020px;display:flex;align-items:center;gap:8px;padding:6px 14px;
  background:var(--card);border:1px solid var(--border);border-radius:6px;margin-top:6px;flex-wrap:wrap}

.wave-progress{height:4px;background:var(--army-d);border-radius:2px;overflow:hidden;flex:1;min-width:100px}
.wave-progress-bar{height:100%;background:var(--accent);border-radius:2px;transition:width .3s}

/* 结算 */
#result-screen{flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 50%,#2d3a14 0%,#1a1f16 70%)}
.result-title{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:3rem;letter-spacing:.1em}
.r.........完整代码请登录后点击上方下载按钮下载查看