永远点不到的按钮 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,👆"), 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; }

你能点到这个按钮吗？

放弃 (懦夫的选择)

<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>