Skip to content

Commit 9b8848c

Browse files
mildestinosmildestinos
authored
Primeiro arquivo
0 parents  commit 9b8848c

File tree

1 file changed

+317
-0
lines changed

1 file changed

+317
-0
lines changed

‎index.html

+317
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,317 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Simulação de Poker Texas Hold'em</title>
7+
<style>
8+
body {
9+
display: flex;
10+
flex-direction: column;
11+
align-items: center;
12+
font-family: Arial, sans-serif;
13+
background-color: #2b7a3d;
14+
margin: 0;
15+
padding: 10px;
16+
color: #fff;
17+
min-height: 100vh;
18+
}
19+
.main-container {
20+
display: flex;
21+
gap: 10px;
22+
flex-direction: column;
23+
align-items: center;
24+
width: 100%;
25+
max-width: 800px;
26+
border: 2px solid #ccc;
27+
border-radius: 15px;
28+
padding: 20px;
29+
background-color: #1c5a2e;
30+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
31+
}
32+
.cards-container {
33+
display: flex;
34+
gap: 5px;
35+
margin-top: 10px;
36+
flex-wrap: wrap;
37+
justify-content: center;
38+
}
39+
.card {
40+
width: 55px;
41+
height: 80px;
42+
border: 2px solid #333;
43+
border-radius: 10px;
44+
display: flex;
45+
justify-content: center;
46+
align-items: center;
47+
font-size: 20px;
48+
font-weight: bold;
49+
background-color: #fff;
50+
color: black;
51+
transition: transform 0.3s ease, box-shadow 0.3s ease;
52+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
53+
}
54+
.card.highlight {
55+
border-color: #FFD700;
56+
box-shadow: 0 0 10px 2px #FFD700;
57+
}
58+
.hearts, .diamonds {
59+
color: red;
60+
}
61+
button {
62+
padding: 10px 15px;
63+
margin-top: 10px;
64+
font-size: 16px;
65+
font-weight: bold;
66+
color: white;
67+
background-color: #006400;
68+
border: 2px solid #444;
69+
border-radius: 10px;
70+
cursor: pointer;
71+
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
72+
transition: background-color 0.3s ease;
73+
}
74+
button:hover {
75+
background-color: #008000;
76+
}
77+
button:disabled {
78+
background-color: #555;
79+
cursor: not-allowed;
80+
opacity: 0.6;
81+
}
82+
#explanation, #suggestions {
83+
margin-top: 15px;
84+
text-align: center;
85+
font-size: 16px;
86+
color: #FFD700;
87+
max-width: 300px;
88+
}
89+
.sidebar {
90+
width: 100%;
91+
text-align: center;
92+
font-size: 14px;
93+
color: #FFD700;
94+
}
95+
.sidebar h4 {
96+
font-size: 18px;
97+
font-weight: bold;
98+
color: #FFD700;
99+
margin-bottom: 10px;
100+
}
101+
.catalogo {
102+
width: 100%;
103+
max-width: 800px;
104+
margin-top: 20px;
105+
color: #FFD700;
106+
text-align: left;
107+
background-color: #1c5a2e;
108+
border-radius: 10px;
109+
padding: 20px;
110+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
111+
}
112+
.catalogo h3 {
113+
font-size: 20px;
114+
color: #FFD700;
115+
margin-bottom: 10px;
116+
}
117+
.catalogo ul {
118+
list-style: none;
119+
padding-left: 0;
120+
}
121+
.catalogo li {
122+
margin-bottom: 15px;
123+
}
124+
.catalogo li strong {
125+
color: #FFD700;
126+
font-weight: bold;
127+
}
128+
footer {
129+
margin-top: auto;
130+
padding: 10px;
131+
font-size: 14px;
132+
color: #FFD700;
133+
text-align: center;
134+
width: 100%;
135+
background-color: #1c5a2e;
136+
border-top: 1px solid #333;
137+
}
138+
@media (min-width: 600px) {
139+
.main-container {
140+
flex-direction: row;
141+
align-items: flex-start;
142+
}
143+
.sidebar {
144+
width: 200px;
145+
text-align: left;
146+
}
147+
}
148+
</style>
149+
</head>
150+
<body>
151+
152+
<div class="main-container">
153+
<!-- Sidebar com sugestões -->
154+
<div class="sidebar">
155+
<h4>Cartas Interessantes</h4>
156+
<div id="suggestions">As cartas que podem melhorar sua mão aparecerão aqui.</div>
157+
</div>
158+
159+
<!-- Conteúdo principal -->
160+
<div style="width: 100%; max-width: 600px;">
161+
<h3>Cartas Comunitárias</h3>
162+
<div id="community-cards" class="cards-container"></div>
163+
164+
<div id="controls">
165+
<button id="deal-flop">Distribuir Flop (3 cartas)</button>
166+
<button id="deal-turn" disabled>Distribuir Turn (4ª carta)</button>
167+
<button id="deal-river" disabled>Distribuir River (5ª carta)</button>
168+
<button id="reset-game">Reiniciar Jogo</button>
169+
</div>
170+
171+
<div id="explanation">Clique em "Distribuir Flop" para exibir as 3 primeiras cartas comunitárias.</div>
172+
173+
<h3>Suas Cartas</h3>
174+
<div id="player-cards" class="cards-container"></div>
175+
</div>
176+
</div>
177+
178+
<!-- Catálogo de Jogadas -->
179+
<div class="catalogo">
180+
<h3>Catálogo de Jogadas</h3>
181+
<ul>
182+
<li><strong>Par:</strong> Duas cartas com o mesmo valor. Exemplo: 5♠ 5♥</li>
183+
<li><strong>Dois Pares:</strong> Duas combinações de cartas com valores iguais. Exemplo: 8♠ 8♦ e 3♣ 3♠</li>
184+
<li><strong>Trinca:</strong> Três cartas com o mesmo valor. Exemplo: K♠ K♦ K♣</li>
185+
<li><strong>Sequência (Straight):</strong> Cinco cartas em ordem sequencial, mas de naipes diferentes. Exemplo: 4♠ 5♣ 6♥ 7♦ 8♠</li>
186+
<li><strong>Flush:</strong> Cinco cartas do mesmo naipe, mas não em sequência. Exemplo: 2♠ 6♠ 9♠ Q♠ K♠</li>
187+
<li><strong>Full House:</strong> Uma trinca e um par. Exemplo: J♠ J♣ J♦ 4♠ 4♥</li>
188+
<li><strong>Quadra:</strong> Quatro cartas com o mesmo valor. Exemplo: 9♠ 9♣ 9♦ 9♥</li>
189+
<li><strong>Straight Flush:</strong> Cinco cartas em sequência e do mesmo naipe. Exemplo: 5♣ 6♣ 7♣ 8♣ 9♣</li>
190+
<li><strong>Royal Flush:</strong> Sequência do 10 ao Ás do mesmo naipe. Exemplo: 10♥ J♥ Q♥ K♥ A♥</li>
191+
</ul>
192+
</div>
193+
194+
<footer>
195+
Autor: Eric Vieira
196+
</footer>
197+
198+
<script>
199+
const playerCardsContainer = document.getElementById('player-cards');
200+
const communityCardsContainer = document.getElementById('community-cards');
201+
const explanation = document.getElementById('explanation');
202+
const suggestions = document.getElementById('suggestions');
203+
const dealFlopButton = document.getElementById('deal-flop');
204+
const dealTurnButton = document.getElementById('deal-turn');
205+
const dealRiverButton = document.getElementById('deal-river');
206+
const resetGameButton = document.getElementById('reset-game');
207+
208+
let deck = [];
209+
let playerHand = [];
210+
211+
// Inicializa o baralho e embaralha
212+
function initializeDeck() {
213+
const suits = ['♠', '♥', '♦', '♣'];
214+
const values = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
215+
deck = [];
216+
suits.forEach(suit => {
217+
values.forEach(value => {
218+
deck.push(value + suit);
219+
});
220+
});
221+
shuffle(deck);
222+
}
223+
224+
function shuffle(array) {
225+
for (let i = array.length - 1; i > 0; i--) {
226+
const j = Math.floor(Math.random() * (i + 1));
227+
[array[i], array[j]] = [array[j], array[i]];
228+
}
229+
}
230+
231+
function resetGame() {
232+
communityCardsContainer.innerHTML = '';
233+
playerCardsContainer.innerHTML = '';
234+
explanation.innerText = 'Clique em "Distribuir Flop" para exibir as 3 primeiras cartas comunitárias.';
235+
suggestions.innerText = 'As cartas que podem melhorar sua mão aparecerão aqui.';
236+
initializeDeck();
237+
distributePlayerHand();
238+
239+
dealFlopButton.disabled = false;
240+
dealTurnButton.disabled = true;
241+
dealRiverButton.disabled = true;
242+
}
243+
244+
function distributePlayerHand() {
245+
playerHand = deck.splice(0, 2);
246+
playerHand.forEach(cardValue => {
247+
const card = document.createElement('div');
248+
card.classList.add('card');
249+
card.innerText = cardValue;
250+
playerCardsContainer.appendChild(card);
251+
});
252+
}
253+
254+
function dealCommunityCards(number) {
255+
const communityHand = deck.splice(0, number);
256+
communityHand.forEach(cardValue => {
257+
const card = document.createElement('div');
258+
card.classList.add('card');
259+
card.innerText = cardValue;
260+
communityCardsContainer.appendChild(card);
261+
});
262+
}
263+
264+
function checkBestHand() {
265+
const allCards = [...playerHand, ...[...communityCardsContainer.children].map(card => card.innerText)];
266+
const bestHand = identifyBestHand(allCards);
267+
268+
explanation.innerText = `Você tem: ${bestHand.name}.`;
269+
}
270+
271+
function identifyBestHand(cards) {
272+
const valuesOnly = cards.map(card => card.slice(0, -1));
273+
const counts = {};
274+
valuesOnly.forEach(value => counts[value] = (counts[value] || 0) + 1);
275+
276+
const pairs = Object.values(counts).filter(count => count === 2).length;
277+
const threes = Object.values(counts).filter(count => count === 3).length;
278+
const fours = Object.values(counts).filter(count => count === 4).length;
279+
280+
if (fours) return { name: 'uma Quadra' };
281+
if (threes && pairs) return { name: 'um Full House' };
282+
if (threes) return { name: 'uma Trinca' };
283+
if (pairs === 2) return { name: 'Dois Pares' };
284+
if (pairs === 1) return { name: 'um Par' };
285+
return { name: 'nenhuma combinação especial' };
286+
}
287+
288+
dealFlopButton.addEventListener('click', () => {
289+
dealCommunityCards(3);
290+
explanation.innerText = "O Flop foi distribuído. Estas são as 3 primeiras cartas comunitárias.";
291+
dealFlopButton.disabled = true;
292+
dealTurnButton.disabled = false;
293+
});
294+
295+
dealTurnButton.addEventListener('click', () => {
296+
dealCommunityCards(1);
297+
explanation.innerText = "O Turn foi distribuído. Esta é a 4ª carta comunitária.";
298+
dealTurnButton.disabled = true;
299+
dealRiverButton.disabled = false;
300+
});
301+
302+
dealRiverButton.addEventListener('click', () => {
303+
dealCommunityCards(1);
304+
explanation.innerText = "O River foi distribuído. Esta é a 5ª carta comunitária.";
305+
checkBestHand();
306+
dealRiverButton.disabled = true;
307+
});
308+
309+
resetGameButton.addEventListener('click', resetGame);
310+
311+
initializeDeck();
312+
distributePlayerHand();
313+
314+
</script>
315+
316+
</body>
317+
</html>

0 commit comments

Comments
 (0)