用html5写王者荣耀之王者坟墓的游戏2deepseek版

发布于：2025-09-16 ⋅ 阅读:(62) ⋅ 点赞:(0)

我将为您创建一个王者荣耀英雄坟墓游戏的提词器HTML页面。这个工具将帮助游戏主播或玩家在游戏中快速查看英雄技能、连招顺序等信息。

设计思路

· 创建英雄选择界面
· 实现提词器显示区域，可自定义文本内容
· 添加字体大小、滚动速度控制
· 设计符合王者荣耀风格的UI

下面是完整的HTML代码：
 

<!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;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #0c1340 0%, #1a1a2e 100%);
            color: #fff;
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: rgba(16, 20, 48, 0.7);
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
            border: 1px solid #4a3c9c;
        }
        
        h1 {
            color: #f8d74d;
            text-shadow: 0 0 10px rgba(248, 215, 77, 0.5);
            margin-bottom: 10px;
            font-size: 2.5rem;
        }
        
        .subtitle {
            color: #a89cc8;
            font-size: 1.2rem;
        }
        
        .main-content {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .hero-selector {
            flex: 1;
            background: rgba(16, 20, 48, 0.7);
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
            border: 1px solid #4a3c9c;
        }
        
        .hero-selector h2 {
            color: #f8d74d;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #4a3c9c;
        }
        
        .hero-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .hero-item {
            background: #1a1a2e;
            border-radius: 8px;
            padding: 10px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .hero-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(248, 215, 77, 0.3);
            border-color: #f8d74d;
        }
        
        .hero-item img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 5px;
        }
        
        .hero-item span {
            font-size: 0.8rem;
            color: #a89cc8;
        }
        
        .teleprompter {
            flex: 2;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
            border: 1px solid #4a3c9c;
            display: flex;
            flex-direction: column;
        }
        
        .teleprompter h2 {
            color: #f8d74d;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .display-area {
            flex: 1;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            overflow: hidden;
            position: relative;
            min-height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #4a3c9c;
        }
        
        #prompter-text {
            font-size: 24px;
            color: #ffffff;
            text-align: center;
            line-height: 1.6;
            transition: all 0.3s ease;
        }
        
        .controls {
            background: rgba(16, 20, 48, 0.7);
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
            border: 1px solid #4a3c9c;
        }
        
        .controls h2 {
            color: #f8d74d;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #4a3c9c;
        }
        
        .control-group {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 15px;
        }
        
        .control-item {
            flex: 1;
            min-width: 200px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            color: #a89cc8;
        }
        
        input[type="range"],
        input[type="color"],
        textarea {
            width: 100%;
            padding: 8px;
            border-radius: 5px;
            background: #1a1a2e;
            border: 1px solid #4a3c9c;
            color: white;
        }
        
        textarea {
            min-height: 100px;
            resize: vertical;
        }
        
        .buttons {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }
        
        button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        
        #start-btn {
            background: #4caf50;
            color: white;
        }
        
        #start-btn:hover {
            background: #3d8b40;
        }
        
        #pause-btn {
            background: #ff9800;
            color: white;
        }
        
        #pause-btn:hover {
            background: #e68900;
        }
        
        #reset-btn {
            background: #f44336;
            color: white;
        }
        
        #reset-btn:hover {
            background: #d32f2f;
        }
        
        #save-btn {
            background: #2196f3;
            color: white;
        }
        
        #save-btn:hover {
            background: #0b7dda;
        }
        
        .footer {
            text-align: center;
            margin-top: 30px;
            color: #a89cc8;
            font-size: 0.9rem;
        }
        
        @media (max-width: 768px) {
            .main-content {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>王者荣耀英雄坟墓 - 游戏提词器</h1>
            <p class="subtitle">为游戏主播和玩家提供的专业提词工具</p>
        </header>
        
        <div class="main-content">
            <div class="hero-selector">
                <h2>英雄选择</h2>
                <div class="hero-grid">
                    <div class="hero-item" data-hero="李白">
                        <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/131/131.jpg" alt="李白">
                        <span>李白</span>
                    </div>
                    <div class="hero-item" data-hero="貂蝉">
                        <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/141/141.jpg" alt="貂蝉">
                        <span>貂蝉</span>
                    </div>
                    <div class="hero-item" data-hero="韩信">
                        <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/150/150.jpg" alt="韩信">
                        <span>韩信</span>
                    </div>
                    <div class="hero-item" data-hero="孙悟空">
                        <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/110/110.jpg" alt="孙悟空">
                        <span>孙悟空</span>
                    </div>
                    <div class="hero-item" data-hero="鲁班七号">
                        <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/112/112.jpg" alt="鲁班七号">
                        <span>鲁班七号</span>
                    </div>
                    <div class="hero-item" data-hero="妲己">
                        <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/109/109.jpg" alt="妲己">
                        <span>妲己</span>
                    </div>
                </div>
                
                <h2>自定义文本</h2>
                <textarea id="custom-text" placeholder="在这里输入自定义的提词内容...">李白连招顺序：
1. 一技能突进
2. 平A消耗
3. 二技能减速
4. 大招收割
5. 一技能返回</textarea>
            </div>
            
            <div class="teleprompter">
                <h2>提词器显示</h2>
                <div class="display-area">
                    <div id="prompter-text">提词器内容将在这里显示</div>
                </div>
                
                <div class="control-group">
                    <div class="control-item">
                        <label for="font-size">字体大小</label>
                        <input type="range" id="font-size" min="16" max="48" value="24">
                    </div>
                    <div class="control-item">
                        <label for="scroll-speed">滚动速度</label>
                        <input type="range" id="scroll-speed" min="1" max="10" value="5">
                    </div>
                    <div class="control-item">
                        <label for="text-color">文字颜色</label>
                        <input type="color" id="text-color" value="#ffffff">
                    </div>
                </div>
                
                <div class="buttons">
                    <button id="start-btn">开始滚动</button>
                    <button id="pause-btn">暂停</button>
                    <button id="reset-btn">重置</button>
                    <button id="save-btn">保存配置</button>
                </div>
            </div>
        </div>
        
        <div class="controls">
            <h2>高级设置</h2>
            <div class="control-group">
                <div class="control-item">
                    <label for="bg-color">背景颜色</label>
                    <input type="color" id="bg-color" value="#000000">
                </div>
                <div class="control-item">
                    <label for="bg-opacity">背景透明度</label>
                    <input type="range" id="bg-opacity" min="0.1" max="1" step="0.1" value="0.8">
                </div>
            </div>
        </div>
        
        <div class="footer">
            <p>© 2023 王者荣耀英雄坟墓游戏提词器 | 本工具仅供学习交流使用</p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 元素引用
            const prompterText = document.getElementById('prompter-text');
            const customText = document.getElementById('custom-text');
            const fontSize = document.getElementById('font-size');
            const scrollSpeed = document.getElementById('scroll-speed');
            const textColor = document.getElementById('text-color');
            const bgColor = document.getElementById('bg-color');
            const bgOpacity = document.getElementById('bg-opacity');
            const startBtn = document.getElementById('start-btn');
            const pauseBtn = document.getElementById('pause-btn');
            const resetBtn = document.getElementById('reset-btn');
            const saveBtn = document.getElementById('save-btn');
            const heroItems = document.querySelectorAll('.hero-item');
            const displayArea = document.querySelector('.display-area');
            
            // 英雄数据
            const heroData = {
                '李白': '李白连招顺序：\n1. 一技能突进\n2. 平A消耗\n3. 二技能减速\n4. 大招收割\n5. 一技能返回',
                '貂蝉': '貂蝉连招顺序：\n1. 二技能接近\n2. 一技能消耗\n3. 开启大招\n4. 二一技能连招',
                '韩信': '韩信连招顺序：\n1. 二技能接近\n2. 一技能挑飞\n3. 平A输出\n4. 大招霸体',
                '孙悟空': '孙悟空连招顺序：\n1. 二技能位移\n2. 平A强化\n3. 一技能格挡\n4. 大招控制',
                '鲁班七号': '鲁班七号技巧：\n1. 被动扫射\n2. 一技能手雷\n3. 二技能推人\n4. 大招AOE',
                '妲己': '妲己连招顺序：\n1. 二技能控制\n2. 三技能大招\n3. 一技能收割'
            };
            
            // 初始化
            let isScrolling = false;
            let scrollInterval;
            let currentSpeed = 5;
            
            // 英雄选择事件
            heroItems.forEach(item => {
                item.addEventListener('click', function() {
                    const hero = this.getAttribute('data-hero');
                    customText.value = heroData[hero] || '该英雄数据暂未收录';
                    updatePrompterText();
                });
            });
            
            // 更新提词器文本
            function updatePrompterText() {
                prompterText.textContent = customText.value;
            }
            
            // 字体大小变化
            fontSize.addEventListener('input', function() {
                prompterText.style.fontSize = this.value + 'px';
            });
            
            // 文字颜色变化
            textColor.addEventListener('input', function() {
                prompterText.style.color = this.value;
            });
            
            // 背景颜色变化
            bgColor.addEventListener('input', function() {
                displayArea.style.backgroundColor = this.value;
            });
            
            // 背景透明度变化
            bgOpacity.addEventListener('input', function() {
                const bgColorValue = bgColor.value;
                const rgba = hexToRgba(bgColorValue, this.value);
                displayArea.style.backgroundColor = rgba;
            });
            
            // 开始滚动
            startBtn.addEventListener('click', function() {
                if (isScrolling) return;
                
                isScrolling = true;
                currentSpeed = scrollSpeed.value;
                
                let position = 0;
                const contentHeight = prompterText.scrollHeight;
                const containerHeight = displayArea.offsetHeight;
                
                scrollInterval = setInterval(() => {
                    position += 1;
                    if (position > contentHeight - containerHeight) {
                        position = 0; // 循环滚动
                    }
                    displayArea.scrollTop = position;
                }, 100 - (currentSpeed * 9)); // 速度映射
            });
            
            // 暂停滚动
            pauseBtn.addEventListener('click', function() {
                if (!isScrolling) return;
                
                clearInterval(scrollInterval);
                isScrolling = false;
            });
            
            // 重置
            resetBtn.addEventListener('click', function() {
                clearInterval(scrollInterval);
                isScrolling = false;
                displayArea.scrollTop = 0;
                prompterText.textContent = customText.value;
            });
            
            // 保存配置（本地存储）
            saveBtn.addEventListener('click', function() {
                const config = {
                    text: customText.value,
                    fontSize: fontSize.value,
                    textColor: textColor.value,
                    bgColor: bgColor.value,
                    bgOpacity: bgOpacity.value
                };
                
                localStorage.setItem('prompterConfig', JSON.stringify(config));
                alert('配置已保存！');
            });
            
            // 加载保存的配置
            function loadConfig() {
                const savedConfig = localStorage.getItem('prompterConfig');
                if (savedConfig) {
                    const config = JSON.parse(savedConfig);
                    customText.value = config.text;
                    fontSize.value = config.fontSize;
                    textColor.value = config.textColor;
                    bgColor.value = config.bgColor;
                    bgOpacity.value = config.bgOpacity;
                    
                    // 应用配置
                    prompterText.textContent = config.text;
                    prompterText.style.fontSize = config.fontSize + 'px';
                    prompterText.style.color = config.textColor;
                    
                    const rgba = hexToRgba(config.bgColor, config.bgOpacity);
                    displayArea.style.backgroundColor = rgba;
                }
            }
            
            // 工具函数：十六进制颜色转RGBA
            function hexToRgba(hex, opacity) {
                const r = parseInt(hex.slice(1, 3), 16);
                const g = parseInt(hex.slice(3, 5), 16);
                const b = parseInt(hex.slice(5, 7), 16);
                
                return `rgba(${r}, ${g}, ${b}, ${opacity})`;
            }
            
            // 初始化加载配置
            loadConfig();
        });
    </script>
</body>
</html>

功能说明

这个提词器具有以下功能：

1. 英雄选择：点击英雄头像可以自动载入该英雄的连招技巧
2. 自定义文本：可以手动输入任何想要的提词内容
3. 显示控制：
   · 调整字体大小
   · 调整文字颜色
   · 控制滚动速度
   · 调整背景颜色和透明度
4. 操作控制：
   · 开始滚动文本
   · 暂停滚动
   · 重置到起始位置
   · 保存当前配置到本地存储

使用方法

1. 选择英雄或输入自定义文本
2. 调整显示设置以满足您的需求
3. 点击"开始滚动"按钮启动提词器
4. 使用"暂停"按钮暂停滚动，"重置"按钮回到起始位置
5. 点击"保存配置"将当前设置保存到浏览器本地存储

这个提词器采用了王者荣耀游戏的主题色彩和风格，适合游戏主播在直播时使用。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布