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

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

设计思路

· 创建英雄选择界面

· 实现提词器显示区域，可自定义文本内容

· 添加字体大小、滚动速度控制

· 设计符合王者荣耀风格的UI

下面是完整的HTML代码：

<!DOCTYPE html>

<head>

<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>

<h1>王者荣耀英雄坟墓 - 游戏提词器</h1>

<p class="subtitle">为游戏主播和玩家提供的专业提词工具</p>

</header>

</div>

</div>

</div>

</div>

</div>

</div>

<h2>自定义文本</h2>

<textarea id="custom-text" placeholder="在这里输入自定义的提词内容...">李白连招顺序：

一技能突进
平A消耗
二技能减速
大招收割
一技能返回</textarea>

</div>

<h2>提词器显示</h2>

<div id="prompter-text">提词器内容将在这里显示</div>

</div>

</div>

</div>

</div>

</div>

</div>

<label for="bg-opacity">背景透明度</label>

</div>

</div>

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>

功能说明

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

英雄选择：点击英雄头像可以自动载入该英雄的连招技巧
自定义文本：可以手动输入任何想要的提词内容
显示控制：

· 调整字体大小

· 调整文字颜色

· 控制滚动速度

· 调整背景颜色和透明度

操作控制：

· 开始滚动文本

· 暂停滚动

· 重置到起始位置

· 保存当前配置到本地存储

使用方法

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

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