jquery/Javascript序列检查_Javascript_Jquery_Jquery Mobile

jquery/Javascript序列检查

javascript jquery jquery-mobile

jquery/Javascript序列检查,javascript,jquery,jquery-mobile,Javascript,Jquery,Jquery Mobile,我正在制作一个Javascript游戏，其中一个序列显示在网格上（8个移动，网格总共有12个按钮）。用户必须重复这个序列，最后我想比较两个序列并给出一个分数。目前我能检测出按下了哪个按钮，但我不知道还能做什么附言：我想实现的是将用户的选择保存在一个数组中，然后与“控制数组”进行比较。如果选择正确，则给出一个分数  <div data-role="page" id="page2"> <div id="he

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

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

      <!-- 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>


萨尔萨舞
//应用程序自定义javascript
$（文档）.ready（函数（）{
$（'a[data role=“button”]”）。单击（函数（）{
var whichButton；
whichButton=$（this.attr（“id”）；
警报（whichButton）；
});         
});

如果您只是想跟踪点击历史，我建议您创建一个数组，并开始将ID推送到那里

例如：

如果您只是想跟踪点击历史，我建议您创建一个数组并开始将ID推送到那里

例如：

变量中需要有两件事：

用户试图匹配的序列
用户已执行的单击

然后你只需要比较这些。我将假设您有某种方法知道用户何时完成（可能是一定次数的单击，或者他们单击特定按钮），并且这是作为一个名为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 = [];
    }
});

sequence=['a1'，'a4'，'c1'，'a1'，'a3'，'b1'，'b4'，'c4']//在真实的游戏中，您会以某种方式动态地执行此操作
用户点击次数=[]；
$（'a[data role=“button”]”）。单击（函数（）{
var whichButton=$（this.attr（“id”）；
用户点击。按下（whichButton）；
如果（timeToStop（））{
var errorStep=-1；
for（int i=0；i=0）{
警告（“对不起，你在步骤“+（错误步骤+1）+”！”）中出错；
}否则{
警惕（“祝贺你，你成功了！”）；
}   
//为下一轮重置（如果不重新加载页面）
sequence=[]；//定义新的序列（以某种方式？）
用户点击次数=[]；
}
});

变量中需要有两样东西：

用户试图匹配的序列
用户已执行的单击

基本上，您只需不断收集单击，直到到达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 = [];
    }
});

sequence=['a1'，'a4'，'c1'，'a1'，'a3'，'b1'，'b4'，'c4']//在真实的游戏中，您会以某种方式动态地执行此操作
用户点击次数=[]；
$（'a[data role=“button”]”）。单击（函数（）{
var whichButton=$（this.attr（“id”）；
用户点击。按下（whichButton）；
如果（timeToStop（））{
var errorStep=-1；
for（int i=0；i=0）{
警告（“对不起，你在步骤“+（错误步骤+1）+”！”）中出错；
}否则{
警惕（“祝贺你，你成功了！”）；
}   
//为下一轮重置（如果不重新加载页面）
sequence=[]；//定义新的序列（以某种方式？）
用户点击次数=[]；
}
});

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

请记住，当你看小提琴时，使用浏览器控制台获取更多关于所录制内容的信息

var blox=$（“.ui-block-a、.ui-block-b、.ui-block-c、.ui-block-d”），
tmrGame，
curPattern=新数组（），
usrPattern=新数组（），
aniTime=1000，
clkCount=0，
总数=0；
函数gameOn（i）{
如果（i==0）{
curPattern=新数组（）；
usrPattern=新数组（）；
};
如果（i<8）{
var randI=Math.floor（Math.random（）*12）；
block=$（blox[randI]）；
推（块、子（a）、道具（id）；
block.addClass（“突出显示”）
.animate（{opacity:0}，aniTime，'linear'，函数（e）{
$（this）.removeClass（“highlight”）.css（“不透明”，1）；
});
i++；
tmrGame=setTimeout（函数（）{gameOn（i）；}，aniTime+100）；
}
否则{
$（document.css（“游标”、“默认值”）；
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);
});