three模仿cs反恐精英第一人称三维场景射击游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：three模仿cs反恐精英第一人称三维场景射击游戏代码

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

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CS反恐精英 - Three.js FPS</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{overflow:hidden;background:#000;font-family:'Courier New',monospace;}
canvas{display:block;}

#blocker{
    position:absolute;width:100%;height:100%;
    background:rgba(0,0,0,0.85);
    display:flex;justify-content:center;align-items:center;
    flex-direction:column;z-index:100;
}
#blocker h1{color:#ff6600;font-size:48px;margin-bottom:10px;text-shadow:0 0 20px #ff6600;}
#blocker h2{color:#ccc;font-size:18px;margin-bottom:30px;}
#blocker .start-btn{
    padding:15px 60px;font-size:22px;
    background:linear-gradient(180deg,#ff6600,#cc4400);
    color:#fff;border:2px solid #ff8800;border-radius:5px;
    cursor:pointer;font-family:'Courier New',monospace;
    text-transform:uppercase;letter-spacing:3px;
}
#blocker .start-btn:hover{background:linear-gradient(180deg,#ff8800,#ff6600);}
#blocker .controls{color:#888;font-size:13px;margin-top:25px;text-align:center;line-height:2;}

/* HUD */
#hud{position:absolute;bottom:0;left:0;width:100%;z-index:50;pointer-events:none;}
#health-bar{
    position:absolute;bottom:20px;left:20px;
    background:rgba(0,0,0,0.7);border:1px solid #444;
    padding:8px 15px;border-radius:3px;
}
#health-bar .label{color:#888;font-size:11px;}
#health-bar .bar{width:200px;height:6px;background:#333;margin-top:4px;border-radius:3px;}
#health-bar .bar-fill{height:100%;background:#4f4;border-radius:3px;transition:width 0.3s;}
#health-bar .hp-text{color:#4f4;font-size:28px;font-weight:bold;}

#ammo-display{
    position:absolute;bottom:20px;right:20px;
    background:rgba(0,0,0,0.7);border:1px solid #444;
    padding:8px 15px;border-radius:3px;text-align:right;
}
#ammo-display .ammo-current{color:#ff6600;font-size:36px;font-weight:bold;}
#ammo-display .ammo-reserve{color:#888;font-size:18px;}
#ammo-display .weapon-name{color:#666;font-size:11px;text-transform:uppercase;}

#score-display{
    position:absolute;top:20px;right:20px;
    background:rgba(0,0,0,0.7);border:1px solid #444;
    padding:8px 15px;border-radius:3px;
}
#score-display .kills{color:#ff4444;font-size:14px;}
#score-display .score{color:#ffcc00;font-size:20px;font-weight:bold;}

#crosshair{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);z-index:51;pointer-events:none;
}
#crosshair div{position:absolute;background:rgba(0,255,0,0.8);}
#crosshair .h{width:20px;height:2px;}
#crosshair .v{width:2px;height:20px;}
#crosshair .top{left:50%;top:-14px;transform:translateX(-50%);}
#crosshair .bottom{left:50%;bottom:-14px;transform:translateX(-50%);}
#crosshair .left-c{top:50%;left:-14px;transform:translateY(-50%);}
#crosshair .right-c{top:50%;right:-14px;transform:translateY(-50%);}

#hitmarker{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);z-index:52;
    pointer-events:none;opacity:0;
    transition:opacity 0.1s;
}

#damage-overlay{
    position:absolute;top:0;left:0;width:100%;height:100%;
    z-index:40;pointer-events:none;opacity:0;
    background:radial-gradient(ellipse at center,transparent 50%,rgba(255,0,0,0.4) 100%);
    transition:opacity 0.3s;
}

#kill-feed{
    position:absolute;top:60px;right:20px;z-index:50;pointer-events:none;
}
.kill-msg{
    color:#fff;font-size:13px;padding:4px 10px;
    background:rgba(0,0,0,0.6);margin-bottom:3px;
    border-radius:2px;animation:fadeOut 3s forwards;
}
@keyframes fadeOut{0%{opacity:1;}70%{opacity:1;}100%{opacity:0;}}

#minimap{
    position:absolute;top:20px;left:20px;
    width:160px;height:160px;
    background:rgba(0,0,0,0.7);border:1px solid #444;
    border-radius:3px;z-index:50;pointer-events:none;
}
#minimap canvas{width:100%;height:100%;}

#reload-msg{
    position:absolute;top:40%;left:50%;transform:translateX(-50%);
    color:#ffcc00;font-size:16px;z-index:51;pointer-events:none;
    display:none;
}

#round-info{
    position:absolute;top:10px;left:50%;transform:translateX(-50%);
    z-index:50;pointer-events:none;text-align:center;
}
#round-info .timer{color:#fff;font-size:28px;font-weight:bold;}
#round-info .round{color:#888;font-size:12px;}

#game-over{
    position:absolute;width:100%;height:100%;
    background:rgba(0,0,0,0.85);z-index:200;
    display:none;justify-content:center;align-items:center;
    flex-direction:column;
}
#game-over h1{color:#ff4444;font-size:48px;margin-bottom:20px;}
#game-over .stats{color:#ccc;font-size:18px;margin-bottom:30px;text-align:center;line-height:2;}
#game-over .restart-btn{
    padding:12px 40px;font-size:18px;
    background:#ff6600;color:#fff;border:none;border-radius:5px;
    cursor:pointer;font-family:'Courier New',monospace;
}

#wave-announce{
    position:absolute;top:30%;left:50%;transform:translateX(-50%);
    z-index:55;pointer-events:none;display:none;
    text-align:center;
}
#wave-announce h2{color:#ff6600;font-size:36px;text-shadow:0 0 20px #ff6600;}
#wave-announce p{color:#ccc;font-size:16px;margin-top:5px;}
</style>
</head>
<body>

<div id="blocker">
    <h1>⚔ COUNTER STRIKE ⚔</h1>
    <h2>反恐精英 - 特别行动</h2>
    <button class="start-btn" onclick="startGame()">开始游戏</button>
    <div class="controls">
        WASD - 移动 | 鼠标 - 瞄准 | 左键 - 射击 | R - 换弹<br>
        SHIFT - 冲刺 | 空格 - 跳跃 | 1/2 - 切换武器
    </div>
</div>

<div id="hud">
    <div id="health-bar">
        <span class="hp-text" id="hp-num">100</span>
        <span class="label"> HP</span>
        <div class="bar"><div class="bar-fill" id="hp-fill" style="width:100%"></div></div>
    </div>
    <div id="ammo-display">
        <div class="weapon-name" id="w.........完整代码请登录后点击上方下载按钮下载查看