Door Closer - 项羽关门者
by SonicOwl39244 lines7.7 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Door Closer Experiment Game</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f0f2f5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
padding: 20px;
}
.game-container {
background: white;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
padding: 30px;
text-align: center;
max-width: 600px;
width: 100%;
}
h1 {
color: #2c3e50;
margin-bottom: 10px;
}
.stats {
display: flex;
justify-content: space-around;
margin: 20px 0;
font-size: 18px;
color: #34495e;
}
.door-container {
display: flex;
justify-content: center;
gap: 30px;
margin: 30px 0;
}
.door {
width: 120px;
height: 180px;
background-color: #3498db;
border-radius: 8px 8px 0 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
font-weight: bold;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.door:hover {
background-color: #2980b9;
}
.door.shrinking {
background-color: #e67e22;
}
.door.vanished {
background-color: #bdc3c7;
cursor: default;
pointer-events: none;
opacity: 0.5;
}
.door::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
background-color: #f39c12;
border-radius: 50%;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.button {
background-color: #27ae60;
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
margin: 10px;
transition: background 0.3s;
}
.button:hover {
background-color: #219653;
}
.instructions {
color: #7f8c8d;
font-size: 14px;
line-height: 1.6;
margin-top: 20px;
}
.game-over {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
color: white;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 10;
}
.game-over h2 {
font-size: 32px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="game-container">
<h1>🚪 Door Closer Experiment</h1>
<p class="instructions">Click the doors to earn cash. Unclicked doors will shrink and vanish. Use your 100 clicks wisely!</p>
<div class="stats">
<div>💰 Cash: <span id="cash">0</span></div>
<div>🖱️ Clicks left: <span id="clicks">100</span></div>
</div>
<div class="door-container">
<div class="door" id="door1">Door 1</div>
<div class="door" id="door2">Door 2</div>
<div class="door" id="door3">Door 3</div>
</div>
<button class="button" onclick="restartGame()">🔄 Restart Game</button>
</div>
<div class="game-over" id="gameOver">
<h2>Game Over!</h2>
<p>Your final cash: <span id="finalCash">0</span></p>
<p id="message"></p>
<button class="button" onclick="restartGame()">Play Again</button>
</div>
<script>
let cash = 0;
let clicksLeft = 100;
let doors = [];
let doorValues = [10, 20, 5];
let shrinkTimers = [];
let gameActive = true;
function initGame() {
cash = 0;
clicksLeft = 100;
gameActive = true;
doorValues = [Math.floor(Math.random() * 10) + 5, Math.floor(Math.random() * 20) + 15, Math.floor(Math.random() * 8) + 3];
document.getElementById('cash').textContent = cash;
document.getElementById('clicks').textContent = clicksLeft;
document.getElementById('gameOver').style.display = 'none';
doors = document.querySelectorAll('.door');
doors.forEach((door, index) => {
door.style.width = '120px';
door.style.height = '180px';
door.classList.remove('shrinking', 'vanished');
door.textContent = `Door ${index + 1}`;
door.onclick = () => clickDoor(index);
resetShrinkTimer(index);
});
}
function clickDoor(index) {
if (!gameActive || clicksLeft <= 0) return;
clicksLeft--;
const door = doors[index];
if (!door.dataset.firstClick) {
door.dataset.firstClick = true;
updateStats();
resetShrinkTimer(index);
return;
}
const earned = Math.floor(Math.random() * doorValues[index]) + 1;
cash += earned;
door.textContent = `+${earned}`;
setTimeout(() => door.textContent = `Door ${index + 1}`, 300);
updateStats();
resetShrinkTimer(index);
if (clicksLeft <= 0) endGame();
}
function resetShrinkTimer(index) {
if (shrinkTimers[index]) clearTimeout(shrinkTimers[index]);
shrinkTimers[index] = setTimeout(() => shrinkDoor(index), 3000);
}
function shrinkDoor(index) {
if (!gameActive) return;
const door = doors[index];
door.classList.add('shrinking');
door.style.transition = 'all 2s ease';
door.style.width = '60px';
door.style.height = '90px';
setTimeout(() => {
door.classList.add('vanished');
door.textContent = 'Vanished';
}, 2000);
}
function updateStats() {
document.getElementById('cash').textContent = cash;
document.getElementById('clicks').textContent = clicksLeft;
}
function endGame() {
gameActive = false;
document.getElementById('finalCash').textContent = cash;
const bestDoor = doorValues.indexOf(Math.max(...doorValues));
const message = document.getElementById('message');
if (cash > 800) {
message.textContent = "You're a master of closing doors! You know when to let go.";
} else if (cash > 500) {
message.textContent = "Not bad! But you still wasted some clicks on vanishing doors.";
} else {
message.textContent = "You couldn't resist keeping all doors open... A common trap!";
}
document.getElementById('gameOver').style.display = 'flex';
}
function restartGame() {
shrinkTimers.forEach(timer => clearTimeout(timer));
shrinkTimers = [];
initGame();
}
window.onload = initGame;
</script>
</body>
</html>
Game Source: Door Closer - 项羽关门者
Creator: SonicOwl39
Libraries: none
Complexity: complex (244 lines, 7.7 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: door-closer-sonicowl39" to link back to the original. Then publish at arcadelab.ai/publish.