mediapipe实现手势玩弄数字卡通宠物效果代码-html代码-BFW代码库

mediapipe实现手势玩弄数字卡通宠物效果代码

代码语言：html

所属分类：其他

代码描述：mediapipe实现手势玩弄数字卡通宠物效果代码，可以摸她，陪她玩。

下面为部分代码预览，完整代码请点击下载或在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>🐕 虚拟宠物狗互动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            overflow: hidden;
        }

        .container {
            position: relative;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #videoCanvas {
            position: absolute;
            transform: scaleX(-1);
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }

        #gameCanvas {
            position: absolute;
            transform: scaleX(-1);
            border-radius: 20px;
            pointer-events: none;
        }

        video {
            display: none;
        }

        .ui-panel {
            position: fixed;
            top: 20px;
            left: 20px;
            background: rgba(255,255,255,0.95);
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            z-index: 100;
            max-width: 280px;
        }

        .ui-panel h2 {
            font-size: 1.3em;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .status-bar {
            margin-bottom: 15px;
        }

        .status-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .status-label {
            width: 60px;
            font-size: 0.85em;
            color: #666;
        }

        .status-fill {
            flex: 1;
            height: 12px;
            background: #e0e0e0;
            border-radius: 6px;
            overflow: hidden;
        }

        .status-value {
            height: 100%;
            border-radius: 6px;
            transition: width 0.3s ease;
        }

        .happiness .status-value {
            background: linear-gradient(90deg, #ff6b6b, #feca57);
        }

        .hunger .status-value {
            background: linear-gradient(90deg, #48dbfb, #0abde3);
        }

        .energy .status-value {
            background: linear-gradient(90deg, #1dd1a1, #10ac84);
        }

        .action-buttons {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-top: 15px;
        }

        .action-btn {
            padding: 12px 8px;
            border: none;
            border-radius: 12px;
            font-size: 0.9em;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
        }

        .action-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .action-btn.feed {
            background: linear-gradient(135deg, #ffecd2, #fcb69f);
        }

        .action-btn.ball {
            background: linear-gradient(135deg, #a8edea, #fed6e3);
        }

        .action-btn.treat {
            background: linear-gradient(135deg, #d299c2, #fef9d7);
        }

        .action-btn.sleep {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
        }

        .action-btn span.icon {
            font-size: 1.5em;
        }

        .pet-mood {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(255,255,255,0.95);
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            z-index: 100;
            text-align: center;
        }

        .pet-mood .mood-icon {
            font-size: 3em;
            margin-bottom: 10px;
        }

      .........完整代码请登录后点击上方下载按钮下载查看