1

我正在制作一个 Javascript 游戏，其中一个序列显示在一个网格上（8 个动作，网格总共有 12 个按钮）。用户必须重复该序列，最后我想比较两个序列并给出分数。目前我可以检测到哪个按钮被按下，但我不知道还能做什么

PS：我想要实现的是将用户的选择保存在一个数组中，然后如果选择正确，则与“控制数组”进行比较，给出一个分数。

      <!-- Game -->
    <div data-role="page" id="page2">
        <div id="header" data-theme="a" data-role="header">
            <a id="back" data-role="button" data-transition="flip" href="#page1" data-icon="back" data-iconpos="left" class="ui-btn-left">
                Back
            </a>
            <a data-role="button" href="#page1" data-icon="star" data-iconpos="left" class="ui-btn-right">
                Score
            </a>
            <h3 id="title">
                Salsa-App
            </h3>
        </div>
        <div data-role="content">
            <div id="grid" class="ui-grid-c">
                <div class="ui-block-a">
                    <a id="a1" data-role="button" data-transition="flow" href="#page1" data-icon="star" data-iconpos="bottom">
                        A1
                    </a>
                </div>
                <div class="ui-block-b">
                    <a id="a2" data-role="button" data-transition="flow" href="#page1" data-icon="star" data-iconpos="bottom">
                        A2
                    </a>
                </div>
                <div class="ui-block-c">
                    <a id="a3" data-role="button" data-transition="flow" href="#page1" data-icon="star" data-iconpos="bottom">
                        A3
                    </a>
                </div>
                <div class="ui-block-d">
                    <a id="a4" data-role="button" data-transition="flow" href="#page1" data-icon="star" data-iconpos="bottom">
                        A4
                    </a>
                </div>
                <div class="ui-block-a">
                    <a id="b1" data-role="button" data-transition="flow" href="#page1" data-icon="star" data-iconpos="bottom">
                        B1
                    </a>
                </div>
                <div class="ui-block-b">
                    <a id="b2" data-role="button" data-transition="flow" href="#page1" data-icon="star" data-iconpos="bottom">
                        B2
                    </a>
                </div>
                <div class="ui-block-c">
                    <a id="b3" data-role="button" data-transition="flow" href="#page1" data-icon="star" data-iconpos="bottom">
                        B3
                    </a>
                </div>
                <div class="ui-block-d">
                    <a id="b4" data-role="button" data-transition="flow" href="#page1" data-icon="star" data-iconpos="bottom">
                        B4
                    </a>
                </div>
                <div class="ui-block-a">
                    <a id="c1" data-role="button" data-transition="flow" href="#page1" data-icon="star" data-iconpos="bottom">
                        C1
                    </a>
                </div>
                <div class="ui-block-b">
                    <a id="c2" data-role="button" data-transition="flow" href="#page1" data-icon="star" data-iconpos="bottom">
                        C2
                    </a>
                </div>
                <div class="ui-block-c">
                    <a id="c3" data-role="button" data-transition="flow" href="#page1" data-icon="star" data-iconpos="bottom">
                        C3
                    </a>
                </div>
                <div class="ui-block-d">
                    <a id="c4" data-role="button" href="#page1" data-icon="star" data-iconpos="bottom">
                        C4
                    </a>
                </div>
            </div>
        </div>
    </div>
    <script>        
        //App custom javascript                             
            $(document).ready(function() {                  
                $('a[data-role="button"]').click(function(){
                var whichButton;
                whichButton = $(this).attr("id");

                alert(whichButton);
                    });         
                });

    </script>
4

3 回答 3

1

您需要在变量中拥有两件事：

  • 用户尝试匹配的序列。
  • 用户执行的点击次数

然后你只需要比较这些。我将假设您有某种方式知道用户何时完成（可能是特定数量的点击，或者他们可能点击特定按钮），并且这是作为一个名为 timeToStop() 的函数实现的，它返回一个布尔真/假值。

本质上，您只需继续收集点击次数，直到到达 timeToStop()，然后您遍历并比较两个数组。

sequence = ['a1','a4','c1','a1','a3','b1','b4','c4'];     //in the real game, you'd do this dynamically somehow
userClicks = [];

$('a[data-role="button"]').click(function(){
    var whichButton = $(this).attr("id");
    userClicks.push(whichButton);

    if (timeToStop()) {                
        var errorStep = -1;
        for(int i = 0; i < sequence.length; i++) {
            if (sequence[i] != userClicks[i]) {
                errorStep = i;
                break;
            }
        }
        if (errorStep >= 0) {
            alert("Sorry, you messed up at step " + (errorStep + 1) + "!");
        } else {
            alert("Congratulations - you nailed it!");
        }   
        //Reset for the next round (if you're not reloading the page)
        sequence = [];      //define new sequence (somehow?)
        userClicks = [];
    }
});
于 2012-11-09T19:59:22.260 回答
0

如果您只是想跟踪点击历史，我建议您只需一个很棒的数组并开始在那里推送 ID。

例如：

var history = [];
$('a').click(function(){
  history.push($(this).id

}):
于 2012-11-09T19:46:52.133 回答
0

我不知道它有多大帮助，但我试着做一个你描述的演示。这是草稿...

jsFiddle

请记住，当您查看小提琴时，请使用浏览器控制台获取有关正在录制的内容的更多信息。

var blox = $(".ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d"),
    tmrGame,
    curPattern = new Array(),
    usrPattern = new Array(),
    aniTime = 1000,
    clkCount = 0,
    total=0;

function gameOn(i) {
    if (i == 0) {
        curPattern = new Array();
        usrPattern = new Array();
    };
    if (i < 8) {
        var randI = Math.floor(Math.random()*12);
            block = $(blox[randI]);
        curPattern.push(block.children("a").prop("id"));
        block.addClass("highlight")
            .animate({ opacity: 0 }, aniTime, 'linear', function(e) {
            $(this).removeClass("highlight").css("opacity", 1);
        });
        i++;
        tmrGame = setTimeout(function() { gameOn(i); }, aniTime+100);
    }
    else {
        $(document).css("cursor", "default");
        blox.css("cursor", "pointer");
        console.log(curPattern);
        blox.on("click", btnClickEvent);
        clearTimeout(tmrGame);
    };
};

tmrGame = setTimeout(function() { $(document).css("cursor", "wait"); blox.css("cursor", "wait"); gameOn(0); });

function btnClickEvent() {
    var block = $(this);
    if (clkCount < 8) {
        usrPattern.push(block.children("a").prop("id"));
        clkCount++;
    };

    if (clkCount == 8) {
        blox.off("click", btnClickEvent);
        total=0;
        for(x in curPattern) {
            if (curPattern[x] == usrPattern[x]) total++;
        };
        var perc = ((total/8)*100)+"%";
        console.log(usrPattern, perc);
        $("#score").text(perc);
    };
};

$("#restart").click(function(e) {
    clkCount = 0;
    clearTimeout(tmrGame);
    blox.stop().css("opacity", 1);
    $("#score").text("00%");
    tmrGame = setTimeout(function() { $(document).css("cursor", "wait"); blox.css("cursor", "wait"); gameOn(0); }, 1000);
});
于 2012-11-09T21:09:15.617 回答