代码语言：html

所属分类：其他

代码由glm-5.3-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"/>
<title>三维海岛塔防 · Island Defense 3D</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#0a1626;font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,sans-serif;user-select:none;-webkit-user-select:none}
#game,#game canvas{position:fixed;inset:0;display:block}
#ui{position:fixed;inset:0;pointer-events:none;z-index:5;color:#eaf2ff}
.panel{background:linear-gradient(180deg,rgba(16,30,52,.92),rgba(10,19,34,.9));border:1px solid rgba(126,180,255,.28);border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.38);backdrop-filter:blur(6px)}
#topbar{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
#leftInfo{padding:9px 14px;font-size:14px;display:flex;align-items:center;gap:8px;pointer-events:auto}
#leftInfo b{color:#ffd76a;font-size:15px;letter-spacing:1px}
.sep{width:1px;height:14px;background:rgba(255,255,255,.25);display:inline-block}
#uiWave{color:#bfe0ff}
#rightInfo{padding:7px 10px;display:flex;align-items:center;gap:9px;pointer-events:auto}
.res{display:inline-flex;align-items:center;gap:4px;font-size:14px;min-width:56px}
.res b{font-weight:bold;font-size:15px}
#resGold b{color:#ffd76a}
#resLives b{color:#ff8a8a}
.res.pulse{animation:pulseA .35s ease}
@keyframes pulseA{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}
.btn{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;gap:4px;background:linear-gradient(180deg,#2c4365,#1b2c47);border:1px solid rgba(140,190,255,.4);color:#dfe9ff;border-radius:9px;padding:5px 10px;font-size:13px;cursor:pointer;font-family:inherit;transition:filter .12s,transform .12s}
.btn:hover{filter:brightness(1.25)}
.btn:active{transform:scale(.94)}
.btn:disabled{opacity:.45;cursor:default}
.btn.big{padding:9px 22px;font-size:15px;border-radius:11px}
#banner{position:absolute;top:16%;left:50%;transform:translateX(-50%);font-size:34px;font-weight:900;letter-spacing:4px;color:#ffe4a0;white-space:nowrap;text-shadow:0 2px 14px rgba(0,0,0,.65),0 0 30px rgba(255,190,80,.35);opacity:0;pointer-events:none}
#banner.show{animation:bannerA 2.3s ease forwards}
@keyframes bannerA{0%{opacity:0;transform:translateX(-50%) scale(.6)}12%{opacity:1;transform:translateX(-50%) scale(1.1)}22%{transform:translateX(-50%) scale(1)}78%{opacity:1}100%{opacity:0;transform:translateX(-50%) scale(1.06)}}
#toast{position:absolute;top:64px;left:50%;transform:translateX(-50%) translateY(-6px);background:rgba(10,20,36,.92);border:1px solid rgba(255,215,106,.5);color:#ffe4a0;padding:7px 16px;border-radius:20px;font-size:13px;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;white-space:nowrap;z-index:6}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#btnWave{position:absolute;top:60px;left:50%;transform:translateX(-50%);display:none;pointer-events:auto;background:linear-gradient(180deg,#d99b3e,#a56d20);border:1px solid #ffd76a;color:#fff8e8;font-weight:bold;font-size:14px;padding:8px 20px;border-radius:22px;cursor:pointer;font-family:inherit;box-shadow:0 4px 14px rgba(0,0,0,.4);animation:breathA 1.6s ease infinite;z-index:6}
@keyframes breathA{0%,100%{filter:brightness(1)}50%{filter:brightness(1.22)}}
#buildbar{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:10px;pointer-events:auto}
.card{width:88px;padding:9px 4px 8px;text-align:center;cursor:pointer;border-radius:13px;background:linear-gradient(180deg,rgba(20,36,60,.94),rgba(11,21,38,.94));border:1px solid rgba(126,180,255,.3);transition:transform .13s,border-color .13s,box-shadow .13s}
.card:hover{transform:translateY(-4px);border-color:rgba(255,215,106,.6)}
.card.sel{border-color:#ffd76a;box-shadow:0 0 16px rgba(255,215,106,.45),inset 0 0 10px rgba(255,215,106,.12)}
.card.poor{opacity:.42;filter:grayscale(.7)}
.card .ic{width:38px;height:38px;margin:0 auto 5px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:900;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);box-shadow:inset 0 -3px 6px rgba(0,0,0,.25)}
.card .nm{font-size:13px;color:#eaf2ff}
.card .cost{font-size:12px;color:#ffd76a;display:flex;align-items:center;justify-content:center;gap:3px;margin-top:2px}
#turretPanel{position:absolute;right:12px;bottom:12px;width:216px;padding:12px 14px;display:none;pointer-events:auto;z-index:6}
.tpHead{display:flex;align-items:center;gap:9px;margin-bottom:9px;font-size:15px}
.tpHead .ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;font-size:17px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.tpStats{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;margin-bottom:11px}
.tpStats div{display:flex;justify-content:space-between;font-size:12.5px;background:rgba(255,255,255,.05);border-radius:7px;padding:4px 8px}
.tpStats span{color:#9fb8d8}
.tpStats b{color:#fff}
.tpBtns{display:flex;gap:8px}
.tpBtns .btn{flex:1;justify-content:center}
.btn.up{background:linear-gradient(180deg,#3f8a4a,#2a5f33);border-color:#7ed88a}
.btn.sell{background:linear-gradient(180deg,#b0592f,#7e3c1e);border-color:#e8a06b}
#hint{position:absolute;left:12px;bottom:14px;font-size:12px;color:rgba(230,240,255,.72);text-shadow:0 1px 3px rgba(0,0,0,.8)}
#pauseBadge{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);display:none;font-size:26px;font-weight:900;letter-spacing:6px;color:#ffe4a0;text-shadow:0 2px 16px rgba(0,0,0,.7)}
#screen{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:radial-gradient(1100px 640px at 50% 24%,rgba(40,76,130,.5),rgba(4,10,22,.88));backdrop-filter:blur(3px)}
.titleBox{text-align:center;padding:26px 34px;max-width:94vw}
.titleBox h1{font-size:46px;font-weight:900;letter-spacing:10px;background:linear-gradient(180deg,#fff3cf,#ffc44d 70%,#e8912d);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 14px rgba(0,0,0,.5))}
.titleBox .sub{color:#a8c6e8;margin:8px 0 22px;font-size:14px;letter-spacing:3px}
.lvgrid{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.lvcard{width:122px;padding:14px 8px 12px;border-radius:14px;background:linear-gradient(180deg,rgba(24,44,74,.95),rgba(12,22,40,.95));border:1px solid rgba(126,180,255,.35);cursor:pointer;transition:transform .14s,border-color .14s,box-shadow .14s;position:relative}
.lvcard:hover{transform:translateY(-5px);border-color:#ffd76a;box-shadow:0 8px 22px rgba(0,0,0,.45)}
.lvcard.locked{opacity:.5;filter:grayscale(.8);cursor:not-allowed}
.lvcard.locked:hover{transform:none;border-color:rgba(126,180,255,.35);box-shadow:none}
.lvnum{font-size:26px;font-weight:900;color:#ffd76a}
.lvname{font-size:14px;margin:3px 0 2px;color:#eaf2ff}
.lvwaves{font-size:11px;color:#8fb0d8}
.lvstars{font-size:15px;color:#ffc44d;margin-top:5px;letter-spacing:2px}
.lock{position:absolute;top:6px;right:8px;font-size:11px;color:#9fb8d8}
.help{font-size:12.5px;color:#9fb8d8;line-height:1.9;max-width:660px;margin:0 auto;text-align:left}
.help b{color:#ffd76a}
.endBox{text-align:center;background:linear-gradient(180deg,rgba(16,30,52,.96),rgba(9,17,32,.96));border:1px solid rgba(126,180,255,.35);border-radius:20px;padding:34px 52px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.endTitle{font-size:40px;font-weight:900;letter-spacing:8px;margin-bottom:10px}
.endTitle.win{color:#ffd76a;text-shadow:0 0 26px rgba(255,196,77,.5)}
.endTitle.lose{color:#ff7a6b;text-shadow:0 0 26px rgba(255,90,80,.4)}
.starsBig{font-size:38px;color:#ffc44d;letter-spacing:8px;margin-bottom:14px}
.endStats{color:#a8c6e8;font-size:14px;margin-bottom:22px}
.endStats b{color:#fff}
.endBtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
#loadError{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#0a1626;color:#cfe0f5;font-size:16px;text-align:center;line-height:1.8;padding:20px}
@media (max-width:760px){
 #banner{font-size:22px}
 .card{width:70px;padding:7px 3px}
 .card .ic{width:30px;height:30px;font-size:15px}
 #hint{display:none}
 .titleBox h1{font-size:30px;letter-spacing:5px}
 .lvcard{width:100px}
 #turretPanel{width:190px}
}
</style>
</head>
<body>
<div id="game"></div>
<div id="ui">
  <div id="topbar">
    <div class="panel" id="leftInfo"><b id="uiLevelName">三维海岛塔防</b><span class="sep"></span><span id="ui.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论