프로그래밍(Web)/Javascript(TS,Node)
[바미] 심심해서 만들어 본 슬롯머신
Bami
2024. 6. 7. 09:13
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>슬롯 머신</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
.slot-machine {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.slot {
font-size: 100px; /* 폰트 크기 증가 */
border: 1px solid #ccc;
padding: 20px; /* 패딩 증가 */
margin: 0 10px; /* 마진 증가 */
width: 160px; /* 너비 증가 */
height: 160px; /* 높이 증가 */
display: flex;
align-items: center;
justify-content: center;
}
.spinning {
animation: spin 0.1s infinite;
}
@keyframes spin {
0% { transform: rotateX(0); }
100% { transform: rotateX(360deg); }
}
.button {
padding: 10px 20px;
font-size: 20px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
margin-top: 20px;
}
.button:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
font-size: 24px;
}
#resetButton {
display: none; /* 초기에는 보이지 않음 */
}
.rainbow {
font-size: 50px;
font-weight: bold;
color: #ff0000; /* 초기 색상 설정 */
animation: rainbow-font-animation 1s infinite;
}
@keyframes rainbow-font-animation {
0% { color: red; }
14% { color: orange; }
28% { color: yellow; }
42% { color: green; }
57% { color: blue; }
71% { color: indigo; }
85% { color: violet; }
100% { color: red; }
}
</style>
</head>
<body>
<h1 class="rainbow">슬롯 머신</h1>
<div class="slot-machine">
<div class="slot" id="slot1">7</div>
<div class="slot" id="slot2">7</div>
<div class="slot" id="slot3">7</div>
</div>
<button class="button" id="spinButton" onclick="spin()">스핀</button>
<button class="button" id="resetButton" onclick="resetMoney()">돈 채우기</button>
<div class="result" id="result"></div>
<script>
const slotValues = ['🍒', '🍋', '🍊', '🍉', '⭐', '7'];
let money = 100000; // 초기 자금 10만원
const spinCost = 5000; // 한 판당 5천원
const jackpotPrizes = {
'🍒': 1000000, // 예시: 100만원
'🍋': 2000000, // 예시: 200만원
'🍊': 3000000, // 예시: 300만원
'🍉': 4000000, // 예시: 400만원
'⭐': 50000000, // 예시: 5천만원
'7': 500000000 // 5억
};
function getRandomSlotValue() {
return slotValues[Math.floor(Math.random() * slotValues.length)];
}
function spin() {
const slot1 = document.getElementById('slot1');
const slot2 = document.getElementById('slot2');
const slot3 = document.getElementById('slot3');
const result = document.getElementById('result');
const spinButton = document.getElementById('spinButton');
const resetButton = document.getElementById('resetButton');
if (money < spinCost) {
result.textContent = '돈이 부족합니다. 돈을 채워주세요.';
spinButton.style.display = 'none';
resetButton.style.display = 'inline';
return;
}
money -= spinCost;
slot1.classList.add('spinning');
slot2.classList.add('spinning');
slot3.classList.add('spinning');
result.textContent = '';
setTimeout(() => {
slot1.classList.remove('spinning');
slot2.classList.remove('spinning');
slot3.classList.remove('spinning');
slot1.textContent = getRandomSlotValue();
slot2.textContent = getRandomSlotValue();
slot3.textContent = getRandomSlotValue();
if (slot1.textContent === slot2.textContent && slot2.textContent === slot3.textContent) {
const jackpot = jackpotPrizes[slot1.textContent];
money += jackpot;
result.textContent = `축하합니다! 잭팟입니다! 상금: ${jackpot.toLocaleString()}원`;
} else {
result.textContent = `다시 시도해보세요! 남은 돈: ${money.toLocaleString()}원`;
}
if (money < spinCost) {
result.textContent += ' 돈이 부족합니다. 돈을 채워주세요.';
spinButton.style.display = 'none';
resetButton.style.display = 'inline';
}
}, 2000); // 2초 동안 애니메이션
}
function resetMoney() {
money = 100000; // 돈을 다시 10만원으로 채움
const result = document.getElementById('result');
const spinButton = document.getElementById('spinButton');
const resetButton = document.getElementById('resetButton');
result.textContent = `돈이 다시 채워졌습니다. 남은 돈: ${money.toLocaleString()}원`;
spinButton.style.display = 'inline';
resetButton.style.display = 'none';
}
</script>
</body>
</html>728x90
반응형