three实现三维坦克山地大战gemini3生成代码
代码语言:html
所属分类:三维
代码描述:three实现三维坦克山地大战gemini3生成代码,穿模问题严重,地下也能入。
代码标签: three 三维 坦克 山地 大战 gemini 生成 代码
下面为部分代码预览,完整代码请点击下载或在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>山地坦克大战 3D</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
font-family: 'Arial', sans-serif;
background: #000;
}
#gameContainer {
position: relative;
width: 100vw;
height: 100vh;
}
#gameCanvas {
display: block;
}
/* HUD界面 */
#hud {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 20px;
pointer-events: none;
z-index: 100;
}
.hud-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.player-stats {
background: linear-gradient(135deg, rgba(0,50,0,0.9), rgba(0,30,0,0.8));
border: 2px solid #0f0;
border-radius: 10px;
padding: 15px 25px;
color: #0f0;
text-shadow: 0 0 10px #0f0;
box-shadow: 0 0 20px rgba(0,255,0,0.3), inset 0 0 20px rgba(0,255,0,0.1);
}
.stat-row {
display: flex;
align-items: center;
margin: 8px 0;
font-size: 14px;
}
.stat-label {
width: 60px;
font-weight: bold;
}
.stat-bar {
width: 150px;
height: 20px;
background: rgba(0,0,0,0.5);
border: 1px solid #0f0;
border-radius: 10px;
overflow: hidden;
margin-left: 10px;
}
.stat-fill {
height: 100%;
border-radius: 10px;
transition: width 0.3s;
}
.health-fill {
background: linear-gradient(90deg, #f00, #ff0, #0f0);
}
.ammo-fill {
background: linear-gradient(90deg, #ff0, #f80);
}
.stat-value {
margin-left: 10px;
min-width: 60px;
font-weight: bold;
}
.game-stats {
background: linear-gradient(135deg, rgba(50,0,0,0.9), rgba(30,0,0,0.8));
border: 2px solid #f00;
border-radius: 10px;
padding: 15px 25px;
color: #f00;
text-shadow: 0 0 10px #f00;
box-shadow: 0 0 20px rgba(255,0,0,0.3);
}
.score-display {
font-size: 28px;
font-weight: bold;
text-align: center;
}
.wave-display {
font-size: 16px;
text-align: center;
margin-top: 5px;
}
.enemy-count {
font-size: 14px;
text-align: center;
margin-top: 5px;
color: #ff6;
}
/* 小地图 */
#minimap {
position: absolute;
bottom: 20px;
right: 20px;
width: 180px;
height: 180px;
background: rgba(0,20,0,0.8);
border: 2px solid #0f0;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 0 20px rgba(0,255,0,0.4);
}
#minimapCanvas {
width: 100%;
height: 100%;
}
/* 准星 */
#crosshair {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 100;
}
.crosshair-line {
position: absolute;
background: rgba(0,255,0,0.8);
box-shadow: 0 0 5px #0f0;
}
.crosshair-h {
width: 20px;
height: 2px;
top: 50%;
transform: translateY(-50%);
}
.crosshair-v {
width: 2px;
height: 20px;
left: 50%;
transform: translateX(-50%);
}
.crosshair-left { left: -30px; }
.crosshair-right { right: -30px; }
.crosshair-top { top: -30px; }
.crosshair-bottom { bottom: -30px; }
.crosshair-center {
position: absolute;
width: 6px;
height: 6px;
background: #f00;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 10px #f00;
}
/* 控制提示 */
#controls {
position: absolute;
bottom: 20px;
left: 20px;
background: rgba(0,0,0,0.8);
border: 1px solid #0f0;
border-radius: 10px;
padding: 15px;
color: #0f0;
font-size: 12px;
max-width: 200px;
}
.control-item {
margin: 5px 0;
display: flex;
align-items: center;
}
.key {
background: #333;
border: 1px solid #0f0;
padding: 2px 8px;
border-radius: 3px;
margin-right: 10px;
font-weight: bold;
min-width: 50px;
text-align: center;
}
/* 消息提示 */
#messageCenter {
position: absolute;
top: 30%;
left: 50%;
transform: translateX(-50%);
text-align: center;
pointer-events: none;
z-index: 200;
}
.game-message {
font-size: 48px;
font-weight: bold;
color: #ff0;
text-shadow: 0 0 20px #f80, 0 0 40px #f00;
animation: pulse 0.5s ease-in-out infinite alternate;
margin-bottom: 20px;
}
@keyframes pulse {
from { transform: scale(1); }
to { transform: scale(1.05); }
}
.kill-message {
font-size: 24px;
color: #0f0;
text-shadow: 0 0 10px #0f0;
animation: fadeUp 1s forwards;
}
@keyframes fadeUp {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-30px); }
}
/* 伤害指示器 */
.damage-indicator {
position: absolute;
width: 100%;
height: 100%;
top: 0;
.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0