一个和王者荣耀对冲的游戏模式

2501_91812617

于 2025-09-13 02:35:59 发布

阅读量334

点赞数 3

CC 4.0 BY-SA版权

文章标签：个人开发

本文链接：https://blog.csdn.net/2501_91812691/article/details/151633382

用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;
}

body {
font-family: 'Microsoft YaHei', sans-serif;
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
color: #e0e0e0;
min-height: 100vh;
overflow-x: hidden;
}

/* 背景装饰 */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 50%, rgba(255, 0, 0, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(138, 43, 226, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 20%, rgba(0, 255, 255, 0.05) 0%, transparent 50%);
z-index: -1;
animation: float 20s ease-in-out infinite;
}

@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}

/* 标题区域 */
.header {
text-align: center;
padding: 60px 20px;
background: rgba(0, 0, 0, 0.7);
border-bottom: 3px solid #8b0000;
position: relative;
}

.header h1 {
font-size: 3.5em;
color: #ff6b6b;
text-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
margin-bottom: 10px;
letter-spacing: 5px;
}

.header p {
font-size: 1.2em;
color: #999;
font-style: italic;
}

/* 墓碑容器 */
.graveyard {
max-width: 1200px;
margin: 50px auto;
padding: 0 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
}

/* 墓碑卡片 */
.tombstone {
background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
border-radius: 10px;
padding: 30px;
position: relative;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.8),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
cursor: pointer;
border: 1px solid #333;
}

.tombstone:hover {
transform: translateY(-5px);
box-shadow:
0 15px 40px rgba(255, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
border-color: #ff6b6b;
}

/* 墓碑顶部装饰 */
.tombstone::before {
content: '⚰';
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
font-size: 30px;
color: #666;
background: #1a1a1a;
padding: 0 10px;
}

/* 英雄名称 */
.hero-name {
font-size: 1.8em;
color: #ff6b6b;
margin-bottom: 10px;
text-align: center;
text-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
}

/* 死亡称号 */
.death-title {
font-size: 1em;
color: #999;
text-align: center;
margin-bottom: 20px;
font-style: italic;
}

/* 死亡故事 */
.death-story {
line-height: 1.6;
color: #ccc;
font-size: 0.95em;
text-align: justify;
position: relative;
padding-left: 20px;
}

.death-story::before {
content: '"';
position: absolute;
left: 0;
top: -10px;
font-size: 3em;
color: #ff6b6b;
opacity: 0.3;
}

/* 死亡日期 */
.death-date {
text-align: right;
margin-top: 15px;
color: #666;
font-size: 0.8em;
font-style: italic;
}

/* 蜡烛装饰 */
.candle {
position: fixed;
bottom: 20px;
right: 20px;
width: 40px;
height: 60px;
background: linear-gradient(to top, #8b4513, #daa520);
border-radius: 5px 5px 50% 50%;
box-shadow: 0 0 20px rgba(255, 193, 7, 0.5);
animation: flicker 2s ease-in-out infinite;
}

.candle::before {
content: '';
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 15px;
background: radial-gradient(circle, #ffeb3b, #ff9800);
border-radius: 50%;
box-shadow: 0 0 15px #ffeb3b;
}

@keyframes flicker {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}

/* 响应式设计 */
@media (max-width: 768px) {
.header h1 {
font-size: 2.5em;
}

.graveyard {
grid-template-columns: 1fr;
gap: 20px;
}

.tombstone {
padding: 20px;
}
}

/* 滚动条样式 */
::-webkit-scrollbar {
width: 10px;
}

::-webkit-scrollbar-track {
background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
background: #ff6b6b;
border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
background: #ff5252;
}
</style>
</head>
<body>
<header class="header">
<h1>王者坟墓</h1>
<p>这里埋葬着那些在王者峡谷中陨落的英雄们...</p>
</header>

<div class="graveyard">
<div class="tombstone">
<h3 class="hero-name">亚瑟</h3>
<p class="death-title">"圣骑之王的终焉"</p>
<div class="death-story">
曾经的不死战神，在守护王者峡谷的千万场战斗中，最终倒在了版本更新的洪流里。他的圣剑再也抵挡不住新英雄的真伤，他的圣盾再也防不住穿透的箭雨。在最后一次冲锋中，他被五位真伤英雄围攻，含恨而终。
</div>
<p class="death-date">卒于 S28 赛季</p>
</div>

<div class="tombstone">
<h3 class="hero-name">鲁班七号</h3>
<p class="death-title">"小短腿的绝望"</p>
<div class="death-story">
作为峡谷最可爱的射手，他经历了无数次的针对和刺杀。没有位移的他，在兰陵王、阿轲、娜可露露的轮番照顾下，最终精神崩溃。据说他临死前还在喊着："为什么只打我？我还有输出！"
</div>
<p class="death-date">卒于被针对的第1001次</p>
</div>

<div class="tombstone">
<h3 class="hero-name">妲己</h3>
<p class="death-title">"魅惑女王的凋零"</p>
<div class="death-story">
曾经一套秒人的法师代表，在魔女斗篷普及的时代逐渐没落。她的魅惑遇到了净化，她的爆发遇到了名刀。最终在一场团战中，她连一个敌人都没能带走，被反甲反死，成为了时代的牺牲品。
</div>
<p class="death-date">卒于魔女斗篷泛滥之时</p>
</div>

<div class="tombstone">
<h3 class="hero-name">韩信</h3>
<p class="death-title">"国士无双的陨落"</p>
<div class="death-story">
十步杀一人，千里不留行的刺客典范。但在镜、澜、曜等新英雄的冲击下，他的灵活变得笨拙，他的伤害显得苍白。最终在一场高端局中被针对致死，连位移都没放出来，含恨而终。
</div>
<p class="death-date">卒于新刺客崛起之际</p>
</div>

<div class="tombstone">
<h3 class="hero-name">后羿</h3>
<p class="death-title">"太阳射手的日蚀"</p>
<div class="death-story">
曾经站撸无敌的射手，在伽罗、蒙犽、戈娅等长手射手的压制下，连输出空间都找不到。他的大鸟被闪现躲掉，他的攻速被减速克制。最终在保护下依然被切死，死不瞑目。
</div>
<p class="death-date">卒于长手时代来临</p>
</div>

<div class="tombstone">
<h3 class="hero-name">庄周</h3>
<p class="death-title">"逍遥幻梦的梦碎"</p>
<div class="death-story">
专为解控而生的辅助，在控制技能越来越少的版本中失去了存在意义。他的解控无人问津，他的坦度不如张飞。最终在版本更迭中被遗忘，孤独地死在自家泉水里。
</div>
<p class="death-date">卒于控制技能稀缺时代</p>
</div>

<div class="tombstone">
<h3 class="hero-name">典韦</h3>
<p class="death-title">"狂战士的末路"</p>
<div class="death-story">
后期无敌的站撸王，在前期就被打爆的版本中永无翻身之日。他的被动还没叠满，高地就已经告破。最终在一次绝望的反扑中，被风筝致死，连敌人的衣角都没摸到。
</div>
<p class="death-date">卒于快节奏版本</p>
</div>

<div class="tombstone">
<h3 class="hero-name">安琪拉</h3>
<p class="death-title">"魔法小厨娘的焦糊"</p>
<div class="death-story">
草丛三姐妹之一，在视野机制完善后失去了阴人的优势。她的大招来没放完就被打断，她的火球永远打不中人。最终在一场团战中空掉所有技能，被小兵打死，成为笑柄。
</div>
<p class="death-date">卒于视野改革之后</p>
</div>
</div>

// 添加滚动视差效果
window.addEventListener('scroll', () => {
const scrolled = window.pageYOffset;
const parallax = document.querySelector('body::before');
const speed = scrolled * 0.5;

document.body.style.backgroundPosition = `center ${speed}px`;
});

// 随机显示"灵异"效果
setInterval(() => {
const tombstones = document.querySelectorAll('.tombstone');
const random = Math.floor(Math.random() * tombstones.length);
const tomb = tombstones[random];

tomb.style.textShadow = '0 0 20px rgba(255, 107, 107, 0.8)';
setTimeout(() => {
tomb.style.textShadow = 'none';
}, 1000);
}, 5000);
</script>
</body>
</html>

这个"王者坟墓"页面具有以下特点：1. 黑暗美学设计：使用深色调和红色点缀，营造阴森氛围2. 墓碑式布局：每个英雄都有自己的"墓碑"卡片3. 讽刺性内容：记录了英雄们在版本更迭中的"死亡"原因4. 交互效果：包括悬停、点击和随机"灵异"效果5. 响应式设计：适配不同屏幕尺寸6. 细节装饰：蜡烛动画、滚动视差、自定义滚动条等每个英雄的"死亡故事"都反映了他们在游戏中被版本淘汰或针对的幽默情景，既有娱乐性又带点黑色幽默