-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
215 lines (175 loc) · 6.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mastrical Card Game</title>
<style>
/* Add some basic styling for the cards */
.card-container {
display: inline-block;
margin: 10px;
}
.card {
width: 150px;
border: 2px solid #000;
text-align: center;
cursor: pointer;
transition: border-color 0.3s;
}
.card img {
max-width: 100%;
max-height: 100%;
}
.card.selected {
border-color: #00f; /* Border color for selected cards */
}
/* Add some styling for the attack buttons */
.attack-button {
width: 100px;
height: 50px;
background-color: #00f;
color: #fff;
border: none;
border-radius: 5px;
margin: 10px;
cursor: pointer;
}
/* Add styling for the health bars */
.health-bar {
height: 10px;
background-color: #0f0;
margin-top: 5px;
}
</style>
</head>
<body>
<div id="game-container">
<!-- Cards will be dynamically added here -->
</div>
<div id="attack-buttons">
<button class="attack-button" id="attack-left">Attack Left</button>
<button class="attack-button" id="attack-right">Attack Right</button>
</div>
© Recorrupt
<a href="/Mastrical/info.html"> About </a>
</body>
<script>
// JavaScript for the card game
const cards = [
{ name: "Your mom", image: "yourmom.png", attack: 10, health: 100 },
{ name: "Your dad", image: "yourdad.png", attack: 8, health: 120 },
];
function shuffleCards() {
cards.sort(() => Math.random() - 0.5);
}
function drawCard(card) {
alert(`Drawn card: ${card.name}`);
}
function toggleCardSelection(cardElement) {
cardElement.classList.toggle("selected");
}
function initializeGame() {
shuffleCards();
renderCards();
}
function renderCards() {
const gameContainer = document.getElementById("game-container");
// Clear previous cards
gameContainer.innerHTML = "";
// Create and append card elements
cards.forEach((card, index) => {
const cardContainer = document.createElement("div");
cardContainer.className = "card-container";
const cardElement = document.createElement("div");
cardElement.className = "card";
cardElement.addEventListener("click", () => {
toggleCardSelection(cardElement);
drawCard(card);
});
const imageElement = document.createElement("img");
imageElement.src = card.image;
imageElement.alt = card.name;
const healthBar = document.createElement("div");
healthBar.className = "health-bar";
healthBar.style.width = "100%";
healthBar.dataset.initialHealth = card.health;
cardElement.appendChild(imageElement);
cardElement.appendChild(healthBar);
cardContainer.appendChild(cardElement);
gameContainer.appendChild(cardContainer);
});
}
function updateHealthBar(cardElement, percentage) {
const healthBar = cardElement.querySelector(".health-bar");
healthBar.style.width = `${percentage}%`;
}
function attackLeft() {
const selectedCards = document.querySelectorAll(".card.selected");
if (selectedCards.length < 2) {
alert("Please select two cards to attack.");
return;
}
const leftCardContainer = selectedCards[0].closest(".card-container");
const rightCardContainer = selectedCards[1].closest(".card-container");
const leftCard = cards.find(card => cardContainerContains(card, leftCardContainer));
const rightCard = cards.find(card => cardContainerContains(card, rightCardContainer));
// Calculate the damage dealt
const damage = leftCard.attack - rightCard.attack;
// Update the right card's health
rightCard.health -= damage;
// Check if the right card is still alive
if (rightCard.health <= 0) {
alert(`${rightCard.name} has been defeated!`);
// Remove the right card's container from the game
rightCardContainer.remove();
} else {
// Update the health bar
const percentage = (rightCard.health / rightCardContainer.querySelector(".health-bar").dataset.initialHealth) * 100;
updateHealthBar(rightCardContainer, percentage);
}
// Deselect the cards
toggleCardSelection(selectedCards[0]);
toggleCardSelection(selectedCards[1]);
}
function attackRight() {
const selectedCards = document.querySelectorAll(".card.selected");
if (selectedCards.length < 2) {
alert("Please select two cards to attack.");
return;
}
const leftCardContainer = selectedCards[0].closest(".card-container");
const rightCardContainer = selectedCards[1].closest(".card-container");
const leftCard = cards.find(card => cardContainerContains(card, leftCardContainer));
const rightCard = cards.find(card => cardContainerContains(card, rightCardContainer));
// Calculate the damage dealt
const damage = rightCard.attack - leftCard.attack;
// Update the left card's health
leftCard.health -= damage;
// Check if the left card is still alive
if (leftCard.health <= 0) {
alert(`${leftCard.name} has been defeated!`);
// Remove the left card's container from the game
leftCardContainer.remove();
} else {
// Update the health bar
const percentage = (leftCard.health / leftCardContainer.querySelector(".health-bar").dataset.initialHealth) * 100;
updateHealthBar(leftCardContainer, percentage);
}
// Deselect the cards
toggleCardSelection(selectedCards[0]);
toggleCardSelection(selectedCards[1]);
}
// Add event listeners to the attack buttons
const attackLeftButton = document.getElementById("attack-left");
attackLeftButton.addEventListener("click", attackLeft);
const attackRightButton = document.getElementById("attack-right");
attackRightButton.addEventListener("click", attackRight);
// Initialize the game
initializeGame();
// Utility function to check if a card is contained within a card container
function cardContainerContains(card, container) {
return container.contains(container.querySelector(`[alt="${card.name}"]`));
}
</script>
</html>