我將為您創建一個王者榮耀英雄墳墓游戲的提詞器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）)
 算法原理)
)
