three实现三维海岛保卫战抢滩登陆塔防类游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：three实现三维海岛保卫战抢滩登陆塔防类游戏代码

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

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>海岛保卫战</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { overflow:hidden; background:#1a6b8a; font-family:'Arial',sans-serif; }
canvas { display:block; }

#ui { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:10; }

#top-bar {
  position:fixed; top:12px; left:50%; transform:translateX(-50%);
  display:flex; gap:12px; align-items:center;
}
.top-badge {
  background:linear-gradient(135deg,#c0392b,#e74c3c);
  color:white; padding:8px 18px; border-radius:25px;
  font-size:16px; font-weight:bold; border:2px solid #ff6b6b;
  box-shadow:0 3px 10px rgba(0,0,0,0.4);
}
.gold-badge {
  background:linear-gradient(135deg,#f39c12,#f1c40f);
  color:#333;
}

#shop-panel {
  position:fixed; bottom:15px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px; pointer-events:all;
}
.shop-btn {
  background:rgba(0,0,0,0.8); border:2px solid #4CAF50;
  color:white; padding:10px 16px; border-radius:10px;
  cursor:pointer; text-align:center; font-size:13px;
  transition:all 0.2s; min-width:90px;
}
.shop-btn:hover { background:#4CAF50; transform:translateY(-2px); }
.shop-btn .cost { color:#FFD700; font-weight:bold; font-size:12px; }
.shop-btn .icon { font-size:22px; display:block; }

#wave-panel {
  position:fixed; top:70px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,0.7); color:white; padding:8px 20px;
  border-radius:20px; font-size:14px; text-align:center;
  border:1px solid #4CAF50;
}

#msg {
  position:fixed; top:38%; left:50%; transform:translate(-50%,-50%);
  color:#FFD700; font-size:32px; font-weight:bold;
  text-shadow:2px 2px 8px #000; display:none; text-align:center;
  pointer-events:none;
}

#hp-panel {
  position:fixed; top:12px; left:15px;
  background:rgba(0,0,0,0.7); border:2px solid #e74c3c;
  padding:8px 14px; border-radius:10px; color:white; font-size:14px;
}
#island-hp-bar { width:140px; height:12px; background:#333; border-radius:6px; margin-top:5px; overflow:hidden; }
#island-hp-fill { height:100%; background:linear-gradient(90deg,#e74c3c,#c0392b); border-radius:6px; transition:width 0.3s; }

#info {
  position:fixed; top:12px; right:15px;
  background:rgba(0,0,0,0.7); border:2px solid #3498db;
  padding:8px 14px; border-radius:10px; color:#ccc; font-size:13px; line-height:1.8;
}

#place-hint {
  position:fixed; bottom:110px; left:50%; transform:translateX(-50%);
  background:rgba(0,200,100,0.85); color:white; padding:8px 20px;
  border-radius:20px; font-size:14px; display:none; pointer-events:none;
}

#gameover {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.85); display:none; justify-content:center;
  align-items:center; flex-direction:column; z-index:100;
}
#gameover h1 { font-size:52px; margin-bottom:20px; }
#gameover p { font-size:22px; color:#FFD700; margin-bottom:30px; }
.go-btn {
  padding:12px 40px; font-size:18px; border:none; border-radius:10px;
  cursor:pointer; font-weight:bold; margin:5px;
  pointer-events:all;
}
.go-btn.green { background:#4CAF50; color:white; }
.go-btn.green:hover { background:#388E3C; }

#selected-info {
  position:fixed; left:15px; bottom:15px;
  background:rgba(0,0,0,0.75); border:2px solid #FF9800;
  color:white; padding:10px 15px; border-radius:10px;
  font-size:13px; display:none; min-width:160px;
}
</style>
</head>
<body>

<div id="top-bar">
  <div class="top-badge">🌊 波次 <span id="wave-num">1</span></div>
  <div class="top-badge gold-badge">💰 <span id="gold">300</span></div>
  <div class="top-badge">💀 击杀 <span id="kills">0</span></div>
</div>

<div id="wave-panel">下一波: <span id="wave-timer">15</span>s | 存活敌人: <span id="enemy-count&.........完整代码请登录后点击上方下载按钮下载查看