Random Click Challenge

<!DOCTYPE html>
<html>
<head>
    
            
    
    <title>Random Button</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            height: 100vh;
            position: relative;
        }

        #btn {
            position: absolute;
            left: 100px;
            top: 100px;
            padding: 10px 20px;
            cursor: pointer;
            style="padding:12px 24px;font-size:18px;cursor:pointer;
            backround:000
            position:000;
            inset:1;
            color:black;
            display:flex;
            justify-content:center;
            align-items:center;
            flex-direction:column;
            font-family:cursive;
        }
    </style>
</head>
<body>

<button id="Instructions" onclick="Instruct();">?</button>

<button id="Leaderboard" onclick="OpenLeaderboard();">Leaderboard</button>

<button id="btn" onclick="moveButton(); changeMessage();">Click Me!</button>

<script>
const messages = [
    "Click Me!",
    "Catch me!",
    "Too slow!",
    "Missed!",
    "Try again!",
    "Almost!",
    "Nope!",
    "You can't catch me!",
    "Keep going!",
    "One more time!",
    "Seriously?",
    "I'm over here!",
    "Not fast enough!",
    "Maybe next click!",
    "You almost had me!",
    "Wrong spot!",
    "Try harder!",
    "No luck!",
    "Oops!",
    "Keep chasing!",
    "I'm slippery!",
    "Still trying?",
    "Nice try!",
    "Denied!",
    "404 Button Not Found",
    "Mission Failed",
    "Almost there!",
    "So close!",
    "Nope. :)",
    "Try again.",
    "I moved!",
    "Zoom!",
    "Boing!",
    "Teleport!",
    "Where am I?",
    "Find me!",
    "Peekaboo!",
    "Can't stop me!",
    "You clicked air!",
    "Miss!",
    "Click faster!",
    "Use your reflexes!",
    "You got this!",
    "Never give up!",
    "Oopsie!",
    "Hehe!",
    "LOL",
    "Bruh",
    "L",
    "Skill issue",
    "Git gud",
    "You blinked!",
    "I'm over here now!",
    "Still looking?",
    "Wrong move!",
    "Guess again!",
    "No cheating!",
    "Try a shortcut!",
    "Nope!",
    "Think faster!",
    "Run!",
    "Catch me if you can!",
    "I'm escaping!",
    "No chance!",
    "Not today!",
    "Almost caught!",
    "You missed!",
    "Baited!",
    "Fooled you!",
    "Psych!",
    "Surprise!",
    "You found... nothing!",
    "Invisible mode!",
    "Sneaky!",
    "Good luck!",
    "Maybe this time!",
    "You sure?",
    "Wrong again!",
    "Keep clicking!",
    "Persistence!",
    "Patience!",
    "Don't rage!",
    "Rage quit?",
    "Still here!",
    "Loading...",
    "Error 418",
    "System rebooting...",
    "Hello there!",
    "General Kenobi!",
    "Beep boop!",
    "01000010",
    "Button.exe",
    "Achievement Unlocked",
    "Level Up!",
    "+1 Click",
    "+100 XP",
    "Combo!",
    "Critical Miss!",
    "Critical Click!",
    "New High Score!",
    "Winner?",
    "Loser? Nah.",
    "You can do it!",
    "Almost impossible!",
    "99% Luck",
    "1% Skill",
    "Don't stop!",
    "Keep moving!",
    "Speedrun!",
    "World Record?",
    "Button escaped!",
    "You'll never catch me!",
    "Maybe tomorrow!",
    "The cake is a lie.",
    "Press CTRL+SHIFT+Q+Q",
    "Among us.",
    "Sus.",
    "ඞ",
    "Yeet!",
    "Bonk!",
    "Boop!",
    "No u",
    "Uno reverse!",
    "Try clicking me!",
    "Catch this!",
    "Not fast enough!",
    "Almost had it!",
    "You're getting warmer!",
    "Cold.",
    "Hot!",
    "Very hot!",
    "Burning!",
    "Frozen!",
    "Speed +10",
    "Agility +5",
    "Dexterity +3",
    "Max level reached!",
    "Button has left the chat.",
    "Connection lost.",
    "Reconnecting...",
    "Updating...",
    "Downloading fun...",
    "Done!",
    "Nothing happened.",
    "You expected something?",
    "¯\\_(ツ)_/¯",
    "(╯°□°）╯︵ ┻━┻",
    "ಠ_ಠ",
    ":)",
    ":D",
    ">:)",
    "👀",
    "😂",
    "💀",
    "✨",
    "🎉",
    "🏃",
    "🚀",
    "🌟",
    "🔥",
    "🎯",
    "Good game!",
    "Again!",
    "Encore!",
    "Button says hi!",
    "You found me!,Wait... no you didn't.",
    "Too bad!",
    "Maybe later!",
    "Click count +1",
    "Click count +100",
    "One more!",
    "Last one!",
    "Definitely the last one!",
    "Okay maybe one more...",
    "You have too much free time.",
    "Why are you still clicking?",
    "This is fun, isn't it?",
    "I'm proud of you.",
    "Keep going!",
    "Don't give up!",
    "Almost impossible challenge!",
    "You win... eventually.",
    "Congratulations?",
    "The button approves.",
    "Access Granted.",
    "Access Denied.",
    "Permission Required.",
    "Secret message!",
    "You found an easter egg!",
    "This isn't the easter egg.",
    "Or is it?",
    "The answer is 42.",
    "Blue pill.",
    "Red pill.",
    "Wake up.",
    "Simulation running.",
    "Reality.exe",
    "Matrix detected.",
    "Buttonception.",
    "Infinite clicks!",
    "Click until infinity.",
    "End of list?"
];
let remaining = [...messages];
let startTime = null;

function changeMessage() {
    const btn = document.getElementById("btn");

    // Start the timer on the first click
    if (startTime === null) {
        startTime = Date.now();
    }

    // Finished?
    if (remaining.length === 0) {
        finishGame();
        return;
    }

    const index = Math.floor(Math.random() * remaining.length);
    btn.textContent = remaining[index];
    remaining.splice(index, 1);

    // If that was the last message
    if (remaining.length === 0) {
        finishGame();
    }
}

function moveButton() {
    const btn = document.getElementById("btn");

    const maxX = window.innerWidth - btn.offsetWidth;
    const maxY = window.innerHeight - btn.offsetHeight;

    btn.style.left = Math.random() * maxX + "px";
    btn.style.top = Math.random() * maxY + "px";
}

function finishGame() {
    const seconds = ((Date.now() - startTime) / 1000).toFixed(2);

    let message;

    if (seconds <= 1) {
        message = "Wha- How- How is that possible?! Your banned."; 
    } else if (seconds <= 15) {
        message = "Holy- That was fast, Are you cheating???";
    } else if (seconds <= 20) {
        message = "Fast enough";
    } else if (seconds <= 50) {
        message = "Slow and steady wins the race";
    } else {
        message = "UR SLOW";
    }

    document.body.innerHTML = `
        <div style="
            position:fixed;
            inset:0;
            background:#111;
            color:white;
            display:flex;
            justify-content:center;
            align-items:center;
            flex-direction:column;
            font-family:Arial;
            text-align:center;
        ">
            <h1>${message}</h1>
            <h2>Your Time: ${seconds} seconds</h2>
            <button onclick="location.reload()"
                style="padding:12px 24px;font-size:18px;cursor:pointer;">
                Play Again
            </button>
        </div>
    `;
}
function Instruct() {
    const seconds = ((Date.now() - startTime) / 1000).toFixed(2);

    let message;
        message = "HOW TO PLAY";
        
    document.body.innerHTML = `
        <div style="
            position:fixed;
            inset:0;
            background:#111;
            color:white;
            display:flex;
            justify-content:center;
            align-items:center;
            flex-direction:column;
            font-family:Arial;
            text-align:center;
        ">
            <h1>${message}</h1>
            <h2>Click the button,Thats it. 
            Theres no ending.
            Or is there...</h2>
            <button onclick="location.reload()"
                style="padding:12px 24px;font-size:18px;cursor:pointer;">
                Ok...
            </button>
        </div>
    `;
}
function OpenLeaderboard() {
    const seconds = ((Date.now() - startTime) / 1000).toFixed(2);
    
    const date = Date.now()

    let message;
        message = "LEADERBOARD";
        
    document.body.innerHTML = `
        <div style="
            position:fixed;
            inset:0;
            background:#111;
            color:white;
            display:flex;
            justify-content:center;
            align-items:center;
            flex-direction:column;
            font-family:Arial;
            text-align:center;
        ">
            <h1>${message}</h1>
            <h2>Currently Under Construction 😭</h2>
            <button onclick="location.reload()"
                style="padding:12px 24px;font-size:18px;cursor:pointer;

position:009;
            inset:0;
            background:#000;
            color:white;
            display:flex;
            justify-content:center;
            align-items:center;
            flex-direction:column;
            font-family:Arial;
            text-align:center;">
                OK
            </button>
        </div>
    `;
}
</script>

</body>
</html>

ඞ
About
