Mini Casino Com Salvamento e Caça Niki
Mini Casino Com Salvamento e Caça Niki
DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mini Cassino - Jogos de Azar</title>
<style>
/* Estilos gerais */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
background-color: #121212;
color: #fff;
padding: 20px;
}
/* Estilos do container */
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #1e1e1e;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
/* Estilos do cabeçalho */
header {
text-align: center;
margin-bottom: 30px;
border-bottom: 2px solid #4CAF50;
padding-bottom: 10px;
}
h1 {
color: #4CAF50;
font-size: 2.5rem;
margin-bottom: 5px;
}
/* Estilos do saldo */
.balance-container {
background-color: #333;
padding: 15px;
border-radius: 5px;
text-align: center;
margin-bottom: 20px;
}
.balance {
font-size: 1.5rem;
font-weight: bold;
color: #FFD700;
}
.add-credits {
background-color: #4CAF50;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
font-weight: bold;
transition: background-color 0.3s;
}
.add-credits:hover {
background-color: #3e8e41;
}
.tab {
padding: 10px 20px;
cursor: pointer;
background-color: #333;
border: none;
color: #fff;
flex: 1;
transition: background-color 0.3s;
font-weight: bold;
text-align: center;
}
.tab:first-child {
border-top-left-radius: 5px;
}
.tab:last-child {
border-top-right-radius: 5px;
}
.tab.active {
background-color: #4CAF50;
}
.tab:hover:not(.active) {
background-color: #444;
}
.game-section.active {
display: block;
}
.game-title {
font-size: 1.5rem;
margin-bottom: 15px;
color: #4CAF50;
text-align: center;
}
/* Estilos da aposta */
.bet-container {
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.bet-label {
margin-right: 10px;
}
.bet-input {
width: 80px;
padding: 8px;
border-radius: 4px;
border: 1px solid #555;
background-color: #333;
color: #fff;
font-size: 16px;
}
.option-btn {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #444;
color: white;
cursor: pointer;
transition: transform 0.1s, background-color 0.3s;
font-weight: bold;
min-width: 100px;
}
.option-btn:hover {
background-color: #555;
transform: scale(1.05);
}
.option-btn.selected {
background-color: #4CAF50;
transform: scale(1.05);
}
.color-option:hover {
transform: scale(1.05);
}
.color-option.selected {
border: 3px solid white;
transform: scale(1.05);
}
.red {
background-color: #e74c3c;
}
.blue {
background-color: #3498db;
}
.green {
background-color: #2ecc71;
}
.play-btn:hover {
background-color: #FFC107;
}
.play-btn:disabled {
background-color: #666;
cursor: not-allowed;
}
/* Estilos do resultado */
.result-container {
text-align: center;
margin-top: 20px;
padding: 15px;
border-radius: 5px;
background-color: #333;
min-height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.result-text {
font-size: 18px;
margin-bottom: 10px;
}
.win {
color: #2ecc71;
font-weight: bold;
}
.lose {
color: #e74c3c;
font-weight: bold;
}
.result-icon {
font-size: 3rem;
margin-bottom: 10px;
}
.color-result {
width: 60px;
height: 60px;
border-radius: 50%;
margin: 10px 0;
}
/* Estilos do histórico */
.history {
margin-top: 20px;
}
.history-title {
font-size: 1.2rem;
margin-bottom: 10px;
color: #ccc;
}
.history-list {
list-style: none;
max-height: 150px;
overflow-y: auto;
padding: 10px;
background-color: #1e1e1e;
border-radius: 5px;
}
.history-item {
padding: 8px;
border-bottom: 1px solid #333;
display: flex;
justify-content: space-between;
}
.history-game {
font-weight: bold;
color: #ccc;
}
.history-result.win {
color: #2ecc71;
}
.history-result.lose {
color: #e74c3c;
}
/* Estilos de animação */
.shake {
animation: shake 0.5s;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Estilos de notificação */
.notification {
position: fixed;
top: 20px;
right: 20px;
padding: 15px;
border-radius: 5px;
background-color: #4CAF50;
color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transition: transform 0.3s, opacity 0.3s;
transform: translateX(200%);
opacity: 0;
z-index: 1000;
}
.notification.show {
transform: translateX(0);
opacity: 1;
}
@keyframes flip {
0% { transform: rotateY(0); }
100% { transform: rotateY(1080deg); }
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
/* Responsividade */
@media (max-width: 600px) {
.container {
padding: 10px;
}
.options-container {
flex-direction: column;
align-items: center;
}
.option-btn, .color-option {
margin-bottom: 10px;
}
.tabs {
flex-direction: column;
}
.tab {
border-radius: 0;
}
.tab:first-child {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tab:last-child {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
}
.reel {
font-size: 2rem;
padding: 10px;
background-color: #444;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1> Mini Cassino</h1>
<p>Jogue e ganhe créditos!</p>
</header>
<div class="balance-container">
<p>Seu Saldo:</p>
<p class="balance">R$ <span id="balance">100</span></p>
<button class="add-credits" id="addCredits">+ Adicionar
Créditos</button>
</div>
<div class="tabs">
<button class="tab active" data-game="coinflip">Cara ou Coroa
🪙</button>
<button class="tab" data-game="luckyNumber">Número da Sorte </button>
<button class="tab" data-game="colorMatch">Acerte a Cor </button>
<button class="tab" data-game="slots">Caça-níqueis 🎰</button>
</div>
<div class="history">
<h3 class="history-title">Histórico de Jogadas</h3>
<ul class="history-list" id="historyList">
</ul>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Funções de persistência de dados
function loadUserData() {
const storedData = localStorage.getItem("casinoUserData");
if (storedData) {
return JSON.parse(storedData);
}
return {
balance: 100,
history: []
};
}
function saveUserData(data) {
localStorage.setItem("casinoUserData", JSON.stringify(data));
}
// Estado do jogo
const gameState = {
balance: userData.balance,
currentGame: 'coinflip',
selectedOptions: {
coinflip: null,
luckyNumber: null,
colorMatch: null,
slots: null
},
history: userData.history
};
// Elementos DOM
const balanceElement = document.getElementById('balance');
const addCreditsButton = document.getElementById('addCredits');
const tabs = document.querySelectorAll('.tab');
const gameSections = document.querySelectorAll('.game-section');
const optionButtons = document.querySelectorAll('.option-btn');
const colorOptions = document.querySelectorAll('.color-option');
const coinflipPlay = document.getElementById('coinflipPlay');
const luckyNumberPlay = document.getElementById('luckyNumberPlay');
const colorMatchPlay = document.getElementById('colorMatchPlay');
const slotsPlay = document.getElementById('slotsPlay');
const coinflipResult = document.getElementById('coinflipResult');
const luckyNumberResult = document.getElementById('luckyNumberResult');
const colorMatchResult = document.getElementById('colorMatchResult');
const slotsResult = document.getElementById('slotsResult');
const historyList = document.getElementById('historyList');
const notification = document.getElementById('notification');
setTimeout(() => {
notification.classList.remove('show');
}, 3000);
}
const item = {
game: gameNames[game],
result: result === 'win' ? 'Ganhou' : 'Perdeu',
amount: amountWon,
time: new Date().toLocaleTimeString()
};
gameState.history.unshift(item);
updateHistoryDisplay();
saveUserData({ ...gameState }); // Salva os dados
}
// Função para atualizar a exibição do histórico
function updateHistoryDisplay() {
historyList.innerHTML = '';
gameState.history.forEach(item => {
const li = document.createElement('li');
li.classList.add('history-item');
li.appendChild(gameSpan);
li.appendChild(resultSpan);
historyList.appendChild(li);
});
}
return amount;
}
if (!checkBalance(betAmount) || !checkOptionSelected('coinflip')) {
return;
}
// Deduz a aposta
gameState.balance -= betAmount;
updateBalance();
// Animação
coinflipResult.innerHTML = '<div class="coin">🪙</div><p
class="result-text">Lançando a moeda...</p>';
setTimeout(() => {
// Gera resultado
const options = ['cara', 'coroa'];
const result = options[Math.floor(Math.random() *
options.length)];
const playerWon = result ===
gameState.selectedOptions.coinflip;
// Calcula ganhos
const winAmount = betAmount * 2;
if (playerWon) {
gameState.balance += winAmount;
updateBalance();
coinflipResult.innerHTML = `
<div class="coin">🪙</div>
<p class="result-text">Saiu <strong>$
{result.toUpperCase()}</strong>!</p>
<p class="result-text win">Você ganhou R$ ${winAmount}!
</p>
`;
showNotification(`Parabéns! Você ganhou R$ ${winAmount}!`);
addToHistory('coinflip', 'win', winAmount);
} else {
coinflipResult.innerHTML = `
<div class="coin">🪙</div>
<p class="result-text">Saiu <strong>$
{result.toUpperCase()}</strong>!</p>
<p class="result-text lose">Você perdeu R$ $
{betAmount}.</p>
`;
showNotification(`Você perdeu R$ ${betAmount}.`);
addToHistory('coinflip', 'lose', betAmount);
}
// Reativa o botão
this.disabled = false;
}, 1000);
});
if (!checkBalance(betAmount) || !
checkOptionSelected('luckyNumber')) {
return;
}
// Deduz a aposta
gameState.balance -= betAmount;
updateBalance();
// Animação
luckyNumberResult.innerHTML = '<div class="dice"></div><p
class="result-text">Sorteando o número...</p>';
setTimeout(() => {
// Gera resultado
const result = Math.floor(Math.random() * 5) + 1;
const playerChoice =
parseInt(gameState.selectedOptions.luckyNumber);
const playerWon = result === playerChoice;
// Calcula ganhos
const winAmount = betAmount * 5;
if (playerWon) {
gameState.balance += winAmount;
updateBalance();
luckyNumberResult.innerHTML = `
<div class="dice"></div>
<p class="result-text">Número sorteado: <strong>$
{result}</strong>!</p>
<p class="result-text win">Você ganhou R$ ${winAmount}!
</p>
`;
showNotification(`Parabéns! Você ganhou R$ ${winAmount}!`);
addToHistory('luckyNumber', 'win', winAmount);
} else {
luckyNumberResult.innerHTML = `
<div class="dice"></div>
<p class="result-text">Número sorteado: <strong>$
{result}</strong>!</p>
<p class="result-text lose">Você perdeu R$ $
{betAmount}.</p>
`;
showNotification(`Você perdeu R$ ${betAmount}.`);
addToHistory('luckyNumber', 'lose', betAmount);
}
// Reativa o botão
this.disabled = false;
}, 1000);
});
if (!checkBalance(betAmount) || !checkOptionSelected('colorMatch'))
{
return;
}
// Deduz a aposta
gameState.balance -= betAmount;
updateBalance();
// Animação
colorMatchResult.innerHTML = '<p class="result-text">Sorteando a
cor...</p>';
setTimeout(() => {
// Gera resultado
const options = ['vermelho', 'azul', 'verde'];
const result = options[Math.floor(Math.random() *
options.length)];
const playerWon = result ===
gameState.selectedOptions.colorMatch;
// Calcula ganhos
const winAmount = betAmount * 3;
if (playerWon) {
gameState.balance += winAmount;
updateBalance();
colorMatchResult.innerHTML = `
<p class="result-text">Cor sorteada:</p>
`;
colorMatchResult.appendChild(colorDiv);
const winText = document.createElement('p');
winText.classList.add('result-text', 'win');
winText.innerHTML = `Você ganhou R$ ${winAmount}!`;
colorMatchResult.appendChild(winText);
// Reativa o botão
this.disabled = false;
}, 1000);
});
// Jogo de Caça-níqueis
slotsPlay.addEventListener('click', function() {
const betAmount = getBetAmount('slots');
if (!checkBalance(betAmount)) {
return;
}
// Deduz a aposta
gameState.balance -= betAmount;
updateBalance();
// Animação
slotsResult.innerHTML = '<p class="result-text">Rodando os
rolos...</p>';
setTimeout(() => {
// Gera resultado
const options = ['🍒', '🍋', '🍊', '⭐', '🔔', '💎'];
const reel1 = options[Math.floor(Math.random() *
options.length)];
const reel2 = options[Math.floor(Math.random() *
options.length)];
const reel3 = options[Math.floor(Math.random() *
options.length)];
// Calcula ganhos
let winAmount = 0;
if (reel1 === reel2 && reel2 === reel3) {
winAmount = betAmount * 10;
} else if (reel1 === reel2 || reel2 === reel3 || reel1 ===
reel3) {
winAmount = betAmount * 3;
}
if (winAmount > 0) {
gameState.balance += winAmount;
updateBalance();
slotsResult.innerHTML = `
<div class="slots-reels">
<span class="reel">${reel1}</span>
<span class="reel">${reel2}</span>
<span class="reel">${reel3}</span>
</div>
<p class="result-text win">Você ganhou R$ ${winAmount}!
</p>
`;
showNotification(`Parabéns! Você ganhou R$ ${winAmount}!`);
addToHistory('slots', 'win', winAmount);
} else {
slotsResult.innerHTML = `
<div class="slots-reels">
<span class="reel">${reel1}</span>
<span class="reel">${reel2}</span>
<span class="reel">${reel3}</span>
</div>
<p class="result-text lose">Você perdeu R$ $
{betAmount}.</p>
`;
showNotification(`Você perdeu R$ ${betAmount}.`);
addToHistory('slots', 'lose', betAmount);
}
// Reativa o botão
this.disabled = false;
}, 1000);
});