Toggle button add1 and in visible score 1 DeepSeek code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Match Game</title>
<style>
body {
font-family: system-ui, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
.game-container {
margin-top: 30px;
}
.buttons {
display: flex;
justify-content: center;
gap: 20px;
margin: 30px 0;
}
button {
padding: 15px 30px;
font-size: 18px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}
#btnA {
background-color: #ff6b6b;
color: white;
}
#btnB {
background-color: #4ecdc4;
color: white;
}
button.active {
transform: scale(0.95);
box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}
button.hidden {
visibility: hidden;
position: absolute;
}
.score-display {
font-size: 24px;
margin: 20px 0;
}
.score {
font-weight: bold;
font-size: 36px;
color: #2c3e50;
}
.status {
margin: 20px 0;
min-height: 24px;
font-weight: bold;
}
.reset-btn {
background-color: #2c3e50;
color: white;
padding: 10px 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Button Match Game</h1>
<p>Press both buttons to score +1 (buttons will disappear)</p>
<div class="game-container">
<div class="score-display">
Score: <span id="score" class="score">0</span>
</div>
<div id="status" class="status"></div>
<div class="buttons">
<button id="btnA">Button A</button>
<button id="btnB">Button B</button>
</div>
<button id="reset" class="reset-btn">Reset Game</button>
</div>
<script>
const game = {
score: 0,
aPressed: false,
bPressed: false,
statusElement: document.getElementById('status'),
updateStatus() {
let status = '';
if (this.aPressed) status += 'Button A pressed | ';
if (this.bPressed) status += 'Button B pressed';
this.statusElement.textContent = status;
if (this.aPressed && this.bPressed) {
this.score++;
document.getElementById('score').textContent = this.score;
this.hideButtons();
setTimeout(() => {
this.resetButtons();
}, 500);
}
},
hideButtons() {
btnA.classList.add('hidden');
btnB.classList.add('hidden');
},
resetButtons() {
this.aPressed = false;
this.bPressed = false;
btnA.classList.remove('active', 'hidden');
btnB.classList.remove('active', 'hidden');
this.statusElement.textContent = '';
},
resetGame() {
this.score = 0;
document.getElementById('score').textContent = this.score;
this.resetButtons();
}
};
const btnA = document.getElementById('btnA');
const btnB = document.getElementById('btnB');
const resetBtn = document.getElementById('reset');
btnA.addEventListener('click', () => {
game.aPressed = !game.aPressed;
btnA.classList.toggle('active', game.aPressed);
game.updateStatus();
});
btnB.addEventListener('click', () => {
game.bPressed = !game.bPressed;
btnB.classList.toggle('active', game.bPressed);
game.updateStatus();
});
resetBtn.addEventListener('click', () => {
game.resetGame();
});
</script>
</body>
</html>
Comments
Post a Comment