Initial commit: 三国杀游戏实现
This commit is contained in:
commit
71265b4f23
183
index.html
Normal file
183
index.html
Normal file
@ -0,0 +1,183 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>三国杀 - 五人身份局</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen" id="start-screen">
|
||||
<div class="start-content">
|
||||
<h1>三国杀</h1>
|
||||
<h2>五人身份局</h2>
|
||||
<p>主公、忠臣、反贼、内奸</p>
|
||||
<button id="start-btn" class="start-btn">开始游戏</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="game-container" id="game-container" style="display: none;">
|
||||
<div class="header">
|
||||
<h1>三国杀</h1>
|
||||
<div class="game-info">
|
||||
<span id="current-phase">准备阶段</span>
|
||||
<span id="turn-count">回合: 1</span>
|
||||
<span id="attack-range">攻击距离: 1</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="game-area">
|
||||
<div class="top-row">
|
||||
<div class="player-card" id="player-2" onclick="selectTarget(2)">
|
||||
<div class="player-info">
|
||||
<div class="avatar">
|
||||
<img src="" alt="" id="avatar-2">
|
||||
</div>
|
||||
<div class="player-details">
|
||||
<h3 id="name-2"></h3>
|
||||
<div class="identity" id="identity-2"></div>
|
||||
<div class="hp">
|
||||
<span class="hp-label">体力:</span>
|
||||
<div class="hp-bar" id="hp-bar-2">
|
||||
<div class="hp-fill"></div>
|
||||
</div>
|
||||
<span class="hp-value" id="hp-value-2"></span>
|
||||
</div>
|
||||
<div class="cards-count">手牌: <span id="cards-2"></span></div>
|
||||
<div class="equipment" id="equipment-2"></div>
|
||||
<div class="skill" id="skill-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="player-hand" id="hand-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="middle-row">
|
||||
<div class="player-card" id="player-1" onclick="selectTarget(1)">
|
||||
<div class="player-info">
|
||||
<div class="avatar">
|
||||
<img src="" alt="" id="avatar-1">
|
||||
</div>
|
||||
<div class="player-details">
|
||||
<h3 id="name-1"></h3>
|
||||
<div class="identity" id="identity-1"></div>
|
||||
<div class="hp">
|
||||
<span class="hp-label">体力:</span>
|
||||
<div class="hp-bar" id="hp-bar-1">
|
||||
<div class="hp-fill"></div>
|
||||
</div>
|
||||
<span class="hp-value" id="hp-value-1"></span>
|
||||
</div>
|
||||
<div class="cards-count">手牌: <span id="cards-1"></span></div>
|
||||
<div class="equipment" id="equipment-1"></div>
|
||||
<div class="skill" id="skill-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="player-hand" id="hand-1"></div>
|
||||
</div>
|
||||
|
||||
<div class="center-area">
|
||||
<div class="deck-area">
|
||||
<div class="deck">
|
||||
<div class="card-back"></div>
|
||||
<div class="deck-count" id="deck-count">0</div>
|
||||
</div>
|
||||
<div class="discard-pile" id="discard-pile"></div>
|
||||
</div>
|
||||
<div class="game-log" id="game-log"></div>
|
||||
</div>
|
||||
|
||||
<div class="player-card" id="player-3" onclick="selectTarget(3)">
|
||||
<div class="player-info">
|
||||
<div class="avatar">
|
||||
<img src="" alt="" id="avatar-3">
|
||||
</div>
|
||||
<div class="player-details">
|
||||
<h3 id="name-3"></h3>
|
||||
<div class="identity" id="identity-3"></div>
|
||||
<div class="hp">
|
||||
<span class="hp-label">体力:</span>
|
||||
<div class="hp-bar" id="hp-bar-3">
|
||||
<div class="hp-fill"></div>
|
||||
</div>
|
||||
<span class="hp-value" id="hp-value-3"></span>
|
||||
</div>
|
||||
<div class="cards-count">手牌: <span id="cards-3"></span></div>
|
||||
<div class="equipment" id="equipment-3"></div>
|
||||
<div class="skill" id="skill-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="player-hand" id="hand-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-row">
|
||||
<div class="player-card" id="player-4" onclick="selectTarget(4)">
|
||||
<div class="player-info">
|
||||
<div class="avatar">
|
||||
<img src="" alt="" id="avatar-4">
|
||||
</div>
|
||||
<div class="player-details">
|
||||
<h3 id="name-4"></h3>
|
||||
<div class="identity" id="identity-4"></div>
|
||||
<div class="hp">
|
||||
<span class="hp-label">体力:</span>
|
||||
<div class="hp-bar" id="hp-bar-4">
|
||||
<div class="hp-fill"></div>
|
||||
</div>
|
||||
<span class="hp-value" id="hp-value-4"></span>
|
||||
</div>
|
||||
<div class="cards-count">手牌: <span id="cards-4"></span></div>
|
||||
<div class="equipment" id="equipment-4"></div>
|
||||
<div class="skill" id="skill-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="player-hand" id="hand-4"></div>
|
||||
</div>
|
||||
|
||||
<div class="player-card main-player" id="player-0">
|
||||
<div class="player-info">
|
||||
<div class="avatar">
|
||||
<img src="" alt="" id="avatar-0">
|
||||
</div>
|
||||
<div class="player-details">
|
||||
<h3 id="name-0"></h3>
|
||||
<div class="identity" id="identity-0"></div>
|
||||
<div class="hp">
|
||||
<span class="hp-label">体力:</span>
|
||||
<div class="hp-bar" id="hp-bar-0">
|
||||
<div class="hp-fill"></div>
|
||||
</div>
|
||||
<span class="hp-value" id="hp-value-0"></span>
|
||||
</div>
|
||||
<div class="cards-count">手牌: <span id="cards-0"></span></div>
|
||||
<div class="equipment" id="equipment-0"></div>
|
||||
<div class="skill" id="skill-0"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="player-hand" id="hand-0"></div>
|
||||
<div class="action-buttons">
|
||||
<button id="ready-btn" class="action-btn">准备</button>
|
||||
<button id="draw-btn" class="action-btn" disabled>摸牌</button>
|
||||
<button id="skill-btn" class="action-btn" disabled>技能</button>
|
||||
<button id="play-btn" class="action-btn" disabled>出牌</button>
|
||||
<button id="end-turn-btn" class="action-btn" disabled>结束回合</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal" id="card-modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<div class="card-detail" id="card-detail"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="game.js"></script>
|
||||
<script>
|
||||
initGame();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
879
style.css
Normal file
879
style.css
Normal file
@ -0,0 +1,879 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Microsoft YaHei', Arial, sans-serif;
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||
min-height: 100vh;
|
||||
color: #fff;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.start-content {
|
||||
text-align: center;
|
||||
padding: 60px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 20px;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 2px solid rgba(255, 215, 0, 0.3);
|
||||
box-shadow: 0 0 30px rgba(255, 215, 0, 0.2);
|
||||
}
|
||||
|
||||
.start-content h1 {
|
||||
font-size: 4em;
|
||||
color: #ffd700;
|
||||
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.start-content h2 {
|
||||
font-size: 2em;
|
||||
color: #fff;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.start-content p {
|
||||
font-size: 1.2em;
|
||||
color: #ccc;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.start-btn {
|
||||
padding: 15px 50px;
|
||||
font-size: 1.5em;
|
||||
background: linear-gradient(135deg, #ffd700, #ff8c00);
|
||||
color: #1a1a2e;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
|
||||
}
|
||||
|
||||
.start-btn:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 20px rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
|
||||
.start-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.game-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 2.5em;
|
||||
color: #ffd700;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.game-info {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.game-info span {
|
||||
background: rgba(255, 215, 0, 0.2);
|
||||
padding: 5px 15px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #ffd700;
|
||||
}
|
||||
|
||||
.game-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
min-height: 700px;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.middle-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.bottom-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
border: 2px solid transparent;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.player-card.active {
|
||||
border-color: #ffd700;
|
||||
box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
|
||||
}
|
||||
|
||||
.player-card.main-player {
|
||||
background: rgba(255, 215, 0, 0.1);
|
||||
border-color: #ffd700;
|
||||
}
|
||||
|
||||
.player-card.targetable {
|
||||
cursor: pointer;
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
.player-card.targeted {
|
||||
border-color: #ff4444;
|
||||
box-shadow: 0 0 20px rgba(255, 68, 68, 0.5);
|
||||
}
|
||||
|
||||
.player-card.out-of-range {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.player-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.avatar img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid #ffd700;
|
||||
}
|
||||
|
||||
.player-details h3 {
|
||||
color: #ffd700;
|
||||
margin-bottom: 5px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.identity {
|
||||
font-size: 0.9em;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.identity.lord {
|
||||
background: linear-gradient(135deg, #ffd700, #ffed4a);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.identity.loyalist {
|
||||
background: linear-gradient(135deg, #4CAF50, #45a049);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.identity.rebel {
|
||||
background: linear-gradient(135deg, #f44336, #da190b);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.identity.spy {
|
||||
background: linear-gradient(135deg, #9c27b0, #7b1fa2);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.identity.hidden {
|
||||
background: #666;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.hp-label {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.hp-bar {
|
||||
width: 80px;
|
||||
height: 18px;
|
||||
background: #333;
|
||||
border-radius: 9px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #666;
|
||||
}
|
||||
|
||||
.hp-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #ff4444, #ff6b6b);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.hp-value {
|
||||
font-size: 0.9em;
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
.cards-count {
|
||||
font-size: 0.9em;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.equipment {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
margin-top: 5px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.equipment-card {
|
||||
width: 40px;
|
||||
height: 55px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.6em;
|
||||
border: 1px solid;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.equipment-card:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.equipment-card.weapon {
|
||||
background: linear-gradient(135deg, #FF5722, #E64A19);
|
||||
border-color: #FF8A65;
|
||||
}
|
||||
|
||||
.equipment-card.armor {
|
||||
background: linear-gradient(135deg, #2196F3, #1976D2);
|
||||
border-color: #64b5f6;
|
||||
}
|
||||
|
||||
.equipment-card.horse {
|
||||
background: linear-gradient(135deg, #4CAF50, #45a049);
|
||||
border-color: #81C784;
|
||||
}
|
||||
|
||||
.skill {
|
||||
margin-top: 8px;
|
||||
padding: 5px 10px;
|
||||
background: linear-gradient(135deg, #9C27B0, #7B1FA2);
|
||||
border-radius: 5px;
|
||||
font-size: 0.75em;
|
||||
text-align: center;
|
||||
border: 1px solid #BA68C8;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.player-hand {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
min-height: 80px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card-back {
|
||||
width: 50px;
|
||||
height: 75px;
|
||||
background: linear-gradient(135deg, #8B4513 0%, #A0522D 100%);
|
||||
border-radius: 6px;
|
||||
border: 2px solid #ffd700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.7em;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.card-back:hover {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.center-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.deck-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
padding: 20px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.deck {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.deck .card-back {
|
||||
width: 70px;
|
||||
height: 105px;
|
||||
}
|
||||
|
||||
.deck-count {
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: #ffd700;
|
||||
color: #000;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.discard-pile {
|
||||
width: 70px;
|
||||
height: 105px;
|
||||
border: 2px dashed #666;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #666;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
.game-log {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.log-entry {
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-size: 0.85em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.log-entry:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.log-entry.highlight {
|
||||
color: #ffd700;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 60px;
|
||||
height: 85px;
|
||||
background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
|
||||
border-radius: 6px;
|
||||
border: 2px solid #333;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
color: #333;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-8px) scale(1.05);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.card.selected {
|
||||
transform: translateY(-12px);
|
||||
box-shadow: 0 0 15px #ffd700;
|
||||
border-color: #ffd700;
|
||||
}
|
||||
|
||||
.card.basic {
|
||||
border-color: #4CAF50;
|
||||
}
|
||||
|
||||
.card.scroll {
|
||||
border-color: #9c27b0;
|
||||
}
|
||||
|
||||
.card.equip {
|
||||
border-color: #2196F3;
|
||||
}
|
||||
|
||||
.card-suit {
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card-rank {
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
font-size: 0.6em;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
padding: 2px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.card-type {
|
||||
font-size: 0.5em;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
background: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 10px 25px;
|
||||
font-size: 0.95em;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.action-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#draw-btn {
|
||||
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
#draw-btn:hover:not(:disabled) {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
|
||||
}
|
||||
|
||||
#play-btn {
|
||||
background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
#play-btn:hover:not(:disabled) {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 5px 15px rgba(33, 150, 243, 0.4);
|
||||
}
|
||||
|
||||
#end-turn-btn {
|
||||
background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
#end-turn-btn:hover:not(:disabled) {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 5px 15px rgba(255, 152, 0, 0.4);
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||
margin: 10% auto;
|
||||
padding: 20px;
|
||||
border: 2px solid #ffd700;
|
||||
border-radius: 15px;
|
||||
width: 300px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.close:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-detail {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-detail .card {
|
||||
width: 120px;
|
||||
height: 170px;
|
||||
margin: 0 auto 20px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.card-detail h3 {
|
||||
color: #ffd700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-detail p {
|
||||
color: #ccc;
|
||||
line-height: 1.6;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #ffd700;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #ffed4a;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 2px;
|
||||
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.kill-effect {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 10000;
|
||||
pointer-events: none;
|
||||
animation: killAnimation 1s ease-out forwards;
|
||||
}
|
||||
|
||||
.kill-text {
|
||||
font-size: 8em;
|
||||
font-weight: bold;
|
||||
color: #ff0000;
|
||||
text-shadow:
|
||||
0 0 20px #ff0000,
|
||||
0 0 40px #ff0000,
|
||||
0 0 60px #ff0000,
|
||||
0 0 80px #ff0000;
|
||||
animation: killTextAnimation 1s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes killAnimation {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(0.5);
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1.2);
|
||||
}
|
||||
40% {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes killTextAnimation {
|
||||
0% {
|
||||
transform: rotate(-10deg) scale(0.5);
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
20% {
|
||||
transform: rotate(0deg) scale(1.2);
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
40% {
|
||||
transform: rotate(5deg) scale(1);
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg) scale(1.5);
|
||||
letter-spacing: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.damage-effect {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 3em;
|
||||
font-weight: bold;
|
||||
color: #ff0000;
|
||||
text-shadow: 0 0 10px #ff0000;
|
||||
animation: damageAnimation 0.5s ease-out forwards;
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
@keyframes damageAnimation {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -150%) scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
.heal-effect {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 3em;
|
||||
font-weight: bold;
|
||||
color: #00ff00;
|
||||
text-shadow: 0 0 10px #00ff00;
|
||||
animation: healAnimation 0.5s ease-out forwards;
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
@keyframes healAnimation {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -150%) scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
.player-card.dead {
|
||||
animation: deathAnimation 1s ease-out forwards;
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@keyframes deathAnimation {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.9);
|
||||
filter: brightness(2);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.8);
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.death-animation {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 4em;
|
||||
animation: deathIconAnimation 0.8s ease-out forwards;
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
@keyframes deathIconAnimation {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1.2) rotate(10deg);
|
||||
}
|
||||
40% {
|
||||
transform: translate(-50%, -50%) scale(1) rotate(-5deg);
|
||||
}
|
||||
60% {
|
||||
transform: translate(-50%, -50%) scale(1.1) rotate(5deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(2) rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.hp-fill {
|
||||
transition: width 0.5s ease-out, background 0.3s ease;
|
||||
}
|
||||
|
||||
.hp-fill.damaged {
|
||||
animation: hpDamageAnimation 0.5s ease-out;
|
||||
}
|
||||
|
||||
@keyframes hpDamageAnimation {
|
||||
0% {
|
||||
background: #ff0000;
|
||||
}
|
||||
100% {
|
||||
background: #4CAF50;
|
||||
}
|
||||
}
|
||||
|
||||
.card.use-animation {
|
||||
animation: cardUseAnimation 0.5s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes cardUseAnimation {
|
||||
0% {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px) scale(1.1);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.attack-animation {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 4em;
|
||||
animation: attackAnimation 0.4s ease-out forwards;
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
@keyframes attackAnimation {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(0.5) rotate(-45deg);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1.2) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(1.5) rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.shield-animation {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 4em;
|
||||
animation: shieldAnimation 0.8s ease-out forwards;
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
@keyframes shieldAnimation {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(0.5);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1.2);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.middle-row {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.center-area {
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user