我将为您创建一个王者荣耀英雄坟墓游戏的提词器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. 点击"保存配置"将当前设置保存到浏览器本地存储
这个提词器采用了王者荣耀游戏的主题色彩和风格，适合游戏主播在直播时使用。
:常见组件和容器低代码开发示例（ArkTS）)
 算法原理)
)
