如何实现按顺序点击按钮的功能？附现有前端代码

Hey there! Let's tackle your Sporcle-style sequential click game step by step. I'll help you implement those three key features you need, building on your existing code.

核心思路 #

We'll track the current target number the player needs to click, bind each button to its corresponding numeric value, and only change the button's background color if it matches the current target—then update the target for the next click.

分步功能实现 #

• Bind numeric values to buttons: Use jQuery's data() method to store the button's numeric value directly on the element, so we don't have to parse text every time a button is clicked.
• Add sequential counting: Create a currentTarget variable starting at 1. Only allow clicks that match this value, then increment the target when a correct click happens.
• Conditional background color change: Move the background color logic inside the "correct click" check—so only buttons clicked in the right order turn red.

完整修改后的代码 #

$(document).ready(function () {
    // Generate an array of numbers 1-20
    const numbers = Array.from({ length: 20 }, (_, i) => i + 1);
    
    // Shuffle the array with Fisher-Yates algorithm (more fair/efficient than original method)
    for (let i = numbers.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [numbers[i], numbers[j]] = [numbers[j], numbers[i]];
    }
    
    // Dynamically create buttons and add to page (replaces document.write for cleaner DOM handling)
    const buttonContainer = $('<div>').addClass('button-grid');
    numbers.forEach(num => {
        const btn = $('<button>').text(num);
        // Bind the numeric value to the button
        btn.data('value', num);
        buttonContainer.append(btn);
    });
    $('body').append(buttonContainer);
    
    // Initialize the current target number
    let currentTarget = 1;
    
    // Button click event handler
    $('button').click(function () {
        const clickedValue = $(this).data('value');
        
        // Check if the clicked button matches the current target
        if (clickedValue === currentTarget) {
            // Change background color for correct click
            $(this).css('background-color', 'red');
            // Update target for next click
            currentTarget++;
            
            // Optional: Show completion alert when all numbers are clicked
            if (currentTarget > 20) {
                alert('You did it! You clicked all numbers in order!');
            }
        }
        // Do nothing if the clicked button isn't the current target
    });
});

关键改进说明 #

• Fisher-Yates Shuffling: This is a standard, fair way to randomize arrays—unlike the original splice method, it avoids bias and is more efficient.
• data() Value Binding: Storing the numeric value directly on the button element makes our click logic more reliable (no text parsing errors).
• Strict Sequential Control: The currentTarget variable ensures players can only click the next number in sequence, just like the Sporcle game you referenced.
• Dynamic Element Creation: Replacing document.write follows modern best practices, preventing unexpected DOM structure issues.

Quick Expansion Tip #

To turn this into a 1-100 game, just change the 20 in Array.from({ length: 20 }) to 100—all other logic works exactly the same!

内容的提问来源于stack exchange，提问作者Duncan