Question

我正在尝试与Clickable地雷1-100（在Sporcle https://www.sporcle.com/games/RobPro/1-100-click-me上找到）进行类似的游戏。游戏很简单，有100个按钮，里面有一个数字（1-100），你必须找到文本为1，然后是2的按钮，依此类推，直到你点击按钮100。

我有一个脚本，随机打印值为1-20的按钮，点击后，它们的背景颜色变为红色。我想基于文本将每个按钮与一个值相关联（显示5的按钮的值应为5）。我想保持计数并制作一个功能，只允许有人点击按钮，如果它是按顺序的下一个按钮（你只能点击按钮4，如果你点击了按钮3，只有点击按钮3，如果你有点击按钮2等。如果按正确的顺序单击按钮颜色，按钮10的颜色不应改变，如何创建仅改变按钮颜色的功能

var array = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"];
var n = array.length;
var tempArr = [];
for (var i = 0; i < n - 1; i++) {

    tempArr.push(array.splice(Math.floor(Math.random() * array.length), 1)[0]);
}

tempArr.push(array[0]);
array = tempArr;

for (var i = 0; i < n; i++) {
    document.write("<button>" + array[i] + "</button>")
}



clicked = true;
$(document).ready(function () {
    $("button").click(function () {
        if (clicked) {
            $(this).css('background-color', 'red');
            clicked = false;
        } else {
            $(this).css('background-color', 'red');
            clicked = true;
        }
    });
});
console.log();

Answer 1

这是：

<html>
<head></head>
<body>
<script>
    var prevButton = 0; //The button that was cilcked before: 0 if no button has been clicked yet
    var howManyButtons = 20; // How many buttons do you want

    // A function that is called when a button is clicked with a (this) sent to it
    // you can read more about (this) on internet
    function checkButton(clickedButton){

        // check if id of current button is one ahead of the prevButton such as 3 - 1 == 2
        if(Number(clickedButton.id) -1 == prevButton)
        {
            // If it is then change the background color of it to red
            clickedButton.style.background = "red";
            // Then make prevButton point to current button id
            prevButton++;
        }
    }

    // function to generate buttons
    function createButtons(){
        // Write a div tag to document with class name (game)
        document.write("<div class='game'>");
        // Loop to generate buttons
        for (var i = 1; i <= howManyButtons; i++){
            // write button tags to document with id=i when i = 1, 2, 3, 4, .. and call checkButton function when clicked and pass (this) to it
            document.write("<button id=" + i + " onclick='checkButton(this)'>" + i + "</button>");
        }
        // write closed div tag
        document.write("</div>");
    }

    // function that shuffles the buttons to a random position
    function shuffleButtons(){
        // get the div that buttons are in it
        var div = document.querySelector('.game');
        // Loop that start from our number of buttons 20 and goes to 0
        for (var i = howManyButtons; i >= 0; i--) {
            // append a button to the new random position 
            div.appendChild(div.children[Math.random() * i | 0]);
        }
    }

    createButtons();
    shuffleButtons();
</script>
</body>

Answer 2

软件开发中要遵循的一个好方法是将视图渲染逻辑与数据分开，也称为模型。在这里，你有按钮＆＃39;将数据作为数据存储，因此您可以将每个按钮存储为其值和状态，如：

var buttons = [
    {value: 1, state: 'pressed'},
    {value: 2, state: 'not_pressed'}
]

然后，您创建一个渲染函数，用您的按钮的当前状态替换html。每个按钮都绑定到一个单击处理程序。您会注意到点击处理程序已初始化，并引用了当前按钮，如：

// Sudo code for rendering
function render() {
    buttonsContainer.empty();
    buttons.forEach(function(button) {
        var buttonHtml = renderButton(button);
        buttonHtml.on('click', function() {
            if (allowedToClickButton(button) {
                setButtonClicked(button);
            }
        });
        buttonsContainer.append(buttonHtml);
    }
}

升级到客户端模板框架会更好。如果你没有使用其他任何东西，把手很好，或者如果你想要一个更全面的框架，你可以升级到React或Angular。

按设置顺序单击按钮（即1,2,3,4,5，...）

2 个答案: