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