canvas模拟数字生物生态繁殖过程动画代码-html代码-BFW代码库

canvas模拟数字生物生态繁殖过程动画代码

代码语言：html

所属分类：动画

代码描述：canvas模拟数字生物生态繁殖过程动画代码，弱肉强食，适者生存法则。

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

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        :root { --accent: #10b981; --bg: #050505; --panel: rgba(10, 15, 18, 0.95); --danger: #ef4444; }
        body, html { margin: 0; overflow: hidden; background: var(--bg); color: #ddd; font-family: 'Segoe UI', monospace; }
        canvas { display: block; touch-action: none; cursor: crosshair; }
        
        #ui-layer {
            position: absolute; top: 0; right: 0; bottom: 0; width: 340px;
            pointer-events: none;
            display: flex; flex-direction: column; justify-content: flex-start;
            padding: 10px;
            z-index: 10;
        }

        #controls {
            pointer-events: auto;
            background: var(--panel);
            backdrop-filter: blur(12px);
            border: 1px solid #222;
            border-radius: 8px;
            padding: 15px;
            max-height: 95vh;
            overflow-y: auto;
            box-shadow: 0 10px 40px rgba(0,0,0,0.8);
            transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        }
        
        #controls.collapsed { transform: translateX(360px); }

        h1 { margin: 0 0 10px 0; font-size: 14px; color: var(--accent); letter-spacing: 2px; text-transform: uppercase; border-bottom: 1px solid #333; padding-bottom: 5px; }
        h2 { margin: 15px 0 5px 0; font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
        
        /* Stats Panel */
        .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: rgba(0,0,0,0.3); padding: 8px; border-radius: 4px; margin-bottom: 15px; }
        .stat-item { font-size: 10px; color: #aaa; }
        .stat-val { font-size: 12px; color: #fff; font-weight: bold; font-family: monospace; display: block; }

        /* Species Selector */
        .species-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
        .species-btn {
            background: #111; border: 1px solid #333; color: #888; padding: 8px;
            font-size: 11px; border-radius: 4px; cursor: pointer; transition: all 0.2s;
            text-align: left; display: flex; align-items: center; justify-content: space-between;
        }
        .species-btn:hover { background: #222; }
        .species-btn.active { border-color: var(--accent); color: #fff; background: rgba(16, 185, 129, 0.1); }
        .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; box-shadow: 0 0 5px currentColor; }
        
        .row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 11px; color: #aaa; }
        input[type=range] { width: 120px; accent-color: var(--accent); h.........完整代码请登录后点击上方下载按钮下载查看