<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator Game</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.calculator {
width: 300px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
overflow: hidden;
background: #fff;
}
.display {
background-color: #222;
color: #fff;
font-size: 2rem;
text-align: right;
padding: 20px;
box-sizing: border-box;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.button {
border: 1px solid #ddd;
padding: 20px;
font-size: 1.5rem;
cursor: pointer;
transition: background 0.3s;
}
.button:hover {
background-color: #f7f7f7;
}
.explode {
animation: explode 0.5s forwards;
}
@keyframes explode {
0% { transform: scale(1); }
100% { transform: scale(0); }
}
</style>
</head>
<body>
<div class="calculator">
<div class="display" id="display">0</div>
<div class="buttons">
<div class="button">7</div>
<div class="button">8</div>
<div class="button">9</div>
<div class="button">/</div>
<div class="button">4</div>
<div class="button">5</div>
<div class="button">6</div>
<div class="button">*</div>
<div class="button">1</div>
<div class="button">2</div>
<div class="button">3</div>
<div class="button">-</div>
<div class="button">0</div>
<div class="button">C</div>
<div class="button">=</div>
<div class="button">+</div>
</div>
</div>
<!-- Placeholder for explosion sound -->
<audio id="explosionSound" src="explosion.mp3"></audio>
<script>
const display = document.getElementById('display');
const explosionSound = document.getElementById('explosionSound');
let expression = '';
document.querySelectorAll('.button').forEach(button => {
button.addEventListener('click', () => {
const value = button.textContent;
if (value === 'C') {
expression = '';
display.textContent = '0';
} else if (value === '=') {
try {
if (expression.includes('/0')) {
explodeScreen();
} else {
expression = eval(expression).toString();
display.textContent = expression;
}
} catch {
display.textContent = 'Error';
expression = '';
}
} else {
expression += value;
display.textContent = expression;
}
});
});
function explodeScreen() {
explosionSound.play();
display.textContent = 'Boom!';
document.querySelector('.calculator').classList.add('explode');
setTimeout(() => {
expression = '';
display.textContent = '0';
document.querySelector('.calculator').classList.remove('explode');
}, 500);
}
</script>
</body>
</html><script async data-explicit-opt-in="true" data-cookie-opt-in="true" src="https://vercel.live/_next-live/feedback/feedback.js"></script>