一个会躲开你的鼠标的按钮HTML代码

m0_73449167

已于 2024-04-20 01:02:28 修改

阅读量808

点赞数 25

文章标签： html 计算机外设前端

于 2024-04-20 00:56:12 首次发布

本文链接：https://blog.csdn.net/m0_73449167/article/details/137982163

版权

实现

<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抓住那个按钮！</title>
<style>
    #button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 50px;
        background-color: rgb(18, 110, 231);
        color: white;
        border: none;
        cursor: pointer;
        transition: transform 0.5s;
        border-radius: 20px;
    }
</style>
</head>
<body>

<button id="button" onmouseover="mouseOver()" onclick="cilcked()" title="你不要过来啊！！！">你来点我呀:P</button>

<script>
    let isHovered = false;
    let ismove = true;
    moveSpeed = 50; // 一秒钟内移动的速度，单位：像素/秒

    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
    async function cilcked(){
        ismove = false;
        button.disabled = true;
        button.style.width = '200'; 
        button.style.width = '100'; 
        button.style.backgroundColor = 'rgb(10, 102, 223)'; // 修改按钮颜色
        await sleep(200);
        button.style.backgroundColor = 'rgb(18, 110, 231)'; 
        button.innerText = "你点到我了！厉害（⊙ｏ⊙）";
        await sleep(2000);
        button.innerText = "我们继续吧！ヾ(≧▽≦*)o";
        await sleep(2000);
        button.innerText = "我会加快速度的！";
        
        await sleep(3000); // 静止按钮的时间，单位：毫秒
        button.innerText = "走着！加油(ง •̀_•́)ง";
        moveSpeed += 200;
        button.style.width = '100'; 
        button.style.width = '50'; 
        button.disabled = false;
        ismove = true; // 恢复按钮移动
    }

    async function fa(){
        button.title = '不要作弊';
        ismove = false;
        button.disabled = true;
        button.style.backgroundColor = 'gray'; 
        await sleep(2000);
        button.style.backgroundColor = 'rgb(18, 110, 231)'; 
        button.disabled = false;
        button.title = '你不要过来啊！！！';
        ismove = true;
    }


    function mouseOver() {
        isHovered = true;
    }

    document.addEventListener("DOMContentLoaded", function() {
        const button = document.getElementById('button');
        const buttonRect = button.getBoundingClientRect();
        const buttonWidth = buttonRect.width;
        const buttonHeight = buttonRect.height;
        const minDistance = 300; // 鼠标与按钮的最小距离
        
        const contactDuration = 60000; // 鼠标接触时间阈值，单位：毫秒
        let lastContactTime = null;

        document.addEventListener('mousemove', function(event) {
            if (ismove){
                const mouseX = event.clientX;
                const mouseY = event.clientY;

                const buttonX = buttonRect.left + buttonWidth / 2;
                const buttonY = buttonRect.top + buttonHeight / 2;

                const deltaX = mouseX - buttonX;
                const deltaY = mouseY - buttonY;

                const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

                if (distance < minDistance) {
                    const angle = Math.atan2(deltaY, deltaX);
                    let newX, newY;

                    if (isHovered) {
                        button.innerText = '抓不到抓不到~'
                        // 如果鼠标悬停在按钮上，则加速向鼠标的反方向移动
                        //const distanceToMove = moveSpeed / 4; // 一秒钟内移动的距离
                        const distanceToMove = moveSpeed / 2;
                        newX = buttonX - distanceToMove * Math.cos(angle);
                        newY = buttonY - distanceToMove * Math.sin(angle);
                    } else {
                        newX = buttonX + moveSpeed * Math.cos(angle);
                        newY = buttonY + moveSpeed * Math.sin(angle);
                    }

                    button.style.transform = `translate(-50%, -50%) translate(${newX - buttonX}px, ${newY - buttonY}px)`;
                    
                    // 记录鼠标接触时间
                    lastContactTime = Date.now();
                } else {
                    button.style.transform = `translate(-50%, -50%)`;
                    
                    // 检查是否超过接触时间阈值
                    if (lastContactTime !== null && (Date.now() - lastContactTime) >= contactDuration) {
                        button.innerText = "喂!你还在吗?(•ω•)";
                        //zhonger();
                    } else {
                        button.innerText = "你来点我呀:P";
                    }
                }
            }
            
        });
        
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Tab' || event.key === 'Enter') {
                event.preventDefault();
                alert('禁止作弊');
                button.innerText = "不要作弊";
                fa();
                
            }
            //alert('moveSpeed = ' + moveSpeed + '\n'+ 'CanMove = ' + ismove + '\n'+'button.text = ' + button.innerText); // 开发者调试
        });
    });
</script>

</body>
</html>

不需要登陆的复制:跳转到剪切板https://www.luogu.com/paste/to3dwezy