<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>永远点不到的按钮</title>
<style>
body {
font-family: 'Comic Sans MS', cursive, sans-serif;
text-align: center;
background-color: #ffe6e6;
user-select: none;
}
#game-container {
position: relative;
width: 100%;
height: 80vh;
overflow: hidden;
}
#runaway-btn {
position: absolute;
padding: 15px 30px;
font-size: 24px;
background: linear-gradient(45deg, #ff0000, #ff9900);
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
transition: transform 0.1s;
z-index: 10;
}
#runaway-btn:hover {
transform: scale(1.05);
}
#stats {
margin-top: 20px;
font-size: 18px;
color: #333;
}
#give-up-btn {
margin-top: 20px;
padding: 10px 20px;
font-size: 18px;
background-color: #ccc;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
}
#give-up-btn:hover {
background-color: #aaa;
}
#message {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255,255,255,0.9);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
z-index: 100;
display: none;
max-width: 80%;
}
.cursor-hover {
cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><text x='0' y='28' font-size='28'>👆</text></svg>"), auto;
}
#quit-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
z-index: 200;
justify-content: center;
align-items: center;
}
#quit-content {
background-color: white;
padding: 30px;
border-radius: 10px;
text-align: center;
max-width: 500px;
}
#quit-options {
margin-top: 20px;
}
.quit-btn {
padding: 10px 20px;
margin: 0 10px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
#really-quit {
background-color: #ff6b6b;
color: white;
}
#keep-playing {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h1>你能点到这个按钮吗？</h1>
<div id="game-container">
<button id="runaway-btn">你点我撒，你点我撒！！！</button>
</div>
<div id="stats">尝试次数: 0 | 耗时: 0秒 | 最近距离: ∞px</div>
<button id="give-up-btn">放弃 (懦夫的选择)</button>
<div id="message"></div>
<div id="quit-modal">
<div id="quit-content">
<h2>真的要放弃吗？</h2>
<p id="quit-message">你已经尝试了 <span id="attempt-count">0</span> 次，坚持了 <span id="time-spent">0</span> 秒...</p>
<p>最近一次只差 <span id="closest-distance">∞</span> 像素就成功了！</p>
<div id="quit-options">
<button id="really-quit" class="quit-btn">是的，我认输</button>
<button id="keep-playing" class="quit-btn">不，我要继续</button>
</div>
</div>
</div>
<audio id="hover-sound" src="https://www.soundjay.com/buttons/sounds/button-10.mp3" preload="auto"></audio>
<audio id="miss-sound" src="https://www.soundjay.com/buttons/sounds/button-09.mp3" preload="auto"></audio>
<audio id="taunt-sound" src="https://www.soundjay.com/buttons/sounds/button-21.mp3" preload="auto"></audio>
<audio id="sad-sound" src="https://www.soundjay.com/buttons/sounds/button-02.mp3" preload="auto"></audio>
<script>
const btn = document.getElementById('runaway-btn');
const gameContainer = document.getElementById('game-container');
const stats = document.getElementById('stats');
const giveUpBtn = document.getElementById('give-up-btn');
const message = document.getElementById('message');
const hoverSound = document.getElementById('hover-sound');
const missSound = document.getElementById('miss-sound');
const tauntSound = document.getElementById('taunt-sound');
const sadSound = document.getElementById('sad-sound');
const quitModal = document.getElementById('quit-modal');
const quitMessage = document.getElementById('quit-message');
const attemptCountSpan = document.getElementById('attempt-count');
const timeSpentSpan = document.getElementById('time-spent');
const closestDistanceSpan = document.getElementById('closest-distance');
const reallyQuitBtn = document.getElementById('really-quit');
const keepPlayingBtn = document.getElementById('keep-playing');
let attempts = 0;
let startTime = Date.now();
let closestAttempt = Infinity;
let isButtonMoving = false;
let lastTauntTime = 0;
// 更新统计数据
function updateStats() {
const elapsedTime = Math.floor((Date.now() - startTime) / 1000);
stats.textContent = `尝试次数: ${attempts} | 耗时: ${elapsedTime}秒 | 最近距离: ${closestAttempt}px`;
// 每10次嘲讽一次
if (attempts > 0 && attempts % 10 === 0 && Date.now() - lastTauntTime > 3000) {
showMessage("差一点点就成功了！继续加油！");
lastTauntTime = Date.now();
}
// 5分钟后终极嘲讽
if (elapsedTime >= 300 && attempts > 50) {
showMessage(`恭喜你获得"坚持不懈笨蛋奖"！<br><br>
你本可以用这时间做点有意义的事，<br>
比如看一集电视剧或煮碗泡面。`, true);
}
}
// 显示消息
function showMessage(msg, isBig = false) {
message.innerHTML = msg;
message.style.display = 'block';
message.style.fontSize = isBig ? '24px' : '18px';
message.style.width = isBig ? '400px' : '300px';
if (isBig) {
tauntSound.play();
}
setTimeout(() => {
message.style.display = 'none';
}, isBig ? 8000 : 2000);
}
// 移动按钮到随机位置
function moveButton() {
if (isButtonMoving) return;
isButtonMoving = true;
const containerRect = gameContainer.getBoundingClientRect();
const btnRect = btn.getBoundingClientRect();
const maxX = containerRect.width - btnRect.width;
const maxY = containerRect.height - btnRect.height;
const randomX = Math.floor(Math.random() * maxX);
const randomY = Math.floor(Math.floor(Math.random() * maxY));
btn.style.left = randomX + 'px';
btn.style.top = randomY + 'px';
// 偶尔欺骗玩家
if (Math.random() < 0.1) {
setTimeout(() => {
btn.textContent = "这次真的不跑了";
btn.style.background = "linear-gradient(45deg, #00ff00, #009900)";
}, 100);
setTimeout(() => {
btn.textContent = "你点我撒，你点我撒！！！";
btn.style.background = "linear-gradient(45deg, #ff0000, #ff9900)";
}, 1000);
}
isButtonMoving = false;
}
// 鼠标接近按钮时
btn.addEventListener('mouseover', (e) => {
hoverSound.currentTime = 0;
hoverSound.play();
// 计算鼠标与按钮的距离
const btnRect = btn.getBoundingClientRect();
const btnCenterX = btnRect.left + btnRect.width / 2;
const btnCenterY = btnRect.top + btnRect.height / 2;
const distance = Math.sqrt(
Math.pow(e.clientX - btnCenterX, 2) +
Math.pow(e.clientY - btnCenterY, 2)
);
// 记录最近距离
if (distance < closestAttempt) {
closestAttempt = Math.floor(distance);
}
// 根据距离决定何时逃跑
if (distance < 100000) {
moveButton();
missSound.currentTime = 0;
missSound.play();
attempts++;
updateStats();
}
});
// 点击放弃按钮
giveUpBtn.addEventListener('click', () => {
const elapsedTime = Math.floor((Date.now() - startTime) / 1000);
attemptCountSpan.textContent = attempts;
timeSpentSpan.textContent = elapsedTime;
closestDistanceSpan.textContent = closestAttempt;
quitModal.style.display = 'flex';
});
// 真的放弃
reallyQuitBtn.addEventListener('click', () => {
sadSound.play();
showMessage("承认失败是成长的第一步...但你还是个懦夫！", true);
quitModal.style.display = 'none';
// 禁用按钮
giveUpBtn.disabled = true;
giveUpBtn.textContent = "已经放弃过了";
giveUpBtn.style.backgroundColor = "#999";
// 让按钮停止逃跑
btn.style.transition = "all 0.5s";
btn.style.left = "50%";
btn.style.top = "50%";
btn.style.transform = "translate(-50%, -50%)";
btn.textContent = "现在可以点我了...才怪！";
setTimeout(() => {
moveButton();
btn.style.transition = "transform 0.1s";
}, 3000);
});
// 继续玩
keepPlayingBtn.addEventListener('click', () => {
showMessage("明智的选择！懦夫才放弃！");
quitModal.style.display = 'none';
});
// 初始设置
btn.addEventListener('click', () => {
// 这个事件永远不会触发，因为按钮会在点击前逃跑
});
// 初始位置
moveButton();
// 每30秒自动移动一次，防止玩家围堵
setInterval(moveButton, 30000);
// 鼠标接近按钮区域时改变光标
gameContainer.addEventListener('mouseover', () => {
document.body.classList.add('cursor-hover');
});
gameContainer.addEventListener('mouseout', () => {
document.body.classList.remove('cursor-hover');
});
</script>
</body>
</html>
.html
0 条评论
目前还没有评论...