Question

我目前无法弄清楚我应该如何监控用户的每次点击。

我的小游戏就是这样：

您有随机顺序中的 5个按钮， 1个开始按钮和 4个按钮 highlighted 即可。

之后，我希望用户按照突出显示的顺序点击按钮（在10秒的时间内，我还没有实现10秒的时间）。

我不知道如何限制用户只能在给定时间内按下按钮，并查看他使用JavaScript和Jquery按下的按钮（如果你不能限制至少看他按什么按钮）。

然后我将保留他按下数组中按钮的顺序＆＃34;输入＆＃34; 。

这是我的代码：

HTML：

<!DOCTYPE html> 
<html lang="ro"> 
<head> 
<link href="my.css" type="text/css" rel="stylesheet">
<script type="text/javascript"  src="jquery-1.11.0.js"></script>
<script src="Joculet.js" type="text/javascript"> </script>

<meta charset="utf-8">
<title> Joculet </title>
 </head>

<body>
<div id ='tot'>
<button type='button' class='cls1' id='id1'></button>

<button type='button' class='cls2' id='id2'></button>

<button type='button' class='cls3' id='id3'></button>

<button type='button' class='cls4' id='id4'></button>

<button type='button' id='start'>Click Me!</button> 
</div>



</body>
</html>

CSS：

.tot{
    position: absolute;
    width: 100%;
    height: 100%;

    }

.cls1{
    position: absolute;
    background-color: red;
    width: 12%;
    height: 12%;
    border: 2px solid black;

   }

.cls2{
    position: absolute;
    background-color: yellow;
    width: 12%;
    height: 12%;
    border: 2px solid black;
    margin-left: 17%;

   }

.cls3{
    position: absolute;
    background-color: #00FF00;
    width: 12%;
    height: 12%;
    border: 2px solid black;
    margin-top: 12%;

   }

.cls4{
    position: absolute;
    background-color: #3090C7;
    width: 12%;
    height: 12%;
    border: 2px solid black;
    margin-left: 17%;
    margin-top: 12%;

   }

#start{
    position: absolute;
    margin-left: 12%;
    margin-top: 23%;

    }

.cls12{
    position: absolute;
    background-color: #C24641;
    width: 12%;
    height: 12%;
    border: 2px solid black;

    }

.cls22{
    position: absolute;
    background-color: #FFFFCC;
    width: 12%;
    height: 12%;
    border: 2px solid black;
    margin-left: 17%;

   }

.cls32{
    position: absolute;
    background-color: #6AFB92;
    width: 12%;
    height: 12%;
    border: 2px solid black;
    margin-top: 12%;

   }

.cls42{
    position: absolute;
    background-color: #893BFF;
    width: 12%;
    height: 12%;
    border: 2px solid black;
    margin-left: 17%;
    margin-top: 12%;

   }

和最重要的JS：

    var k = 1;
    var g = 1;
    var nrmax = 8;
    ordine = new Array();
    var j = 0;
    input = new Array();

    $(document).ready(function () {
    $('#start').click(function () {
        game();
    })

    function game() {
        if(k <= nrmax){
            if(g <= k){
                var x = Math.floor((Math.random() * 4) + 1);
                ordine[j++] = x;
                change1(x);
            }
            else {
                    alert('Felicitari ai castigat runda');
                    g = 1;
                    k++;
                    j = 0;
                    ordine = new Array();
                    setTimeout(function(){game();},2000);
                }
        }
        else alert('Felicitari ai castigat jocul');

    }

    function change1(y) {
        var z = 'cls' + y;
        var t = 'cls' + y + 2;
        $("." + z).removeClass(z).addClass(t);
        setTimeout(function() { change2(y); }, 500);
    }

    function change2(y) {
        var z = 'cls' + y + 2;
        var t = 'cls' + y;
        $("." + z).removeClass(z).addClass(t);
        g++;
        setTimeout(function(){game();},500);
    }

});

任何帮助都是相关的，您也可以在此处找到代码以获得更好的视图http://jsfiddle.net/6qDap/1181/

Answer 1

我想我理解你的问题了。我没有包含计时器，但这里是如何维护输入数组中单击按钮的顺序。

http://jsfiddle.net/6qDap/1184/

        $('button').click(function(){
            input.push( $(this).attr('id') );
            console.log(input);
        });

不要忘记检查控制台以查看输出。希望这可以帮助！如果您有任何问题或者我误解了，请告诉我。

Answer 2

如果我理解你 - 你想让用户在10秒内点击4个按钮。当用户点击开始时，我会启动一个javascript计时器。

setTimeout(disablebuttonsaftertimeout, 10000);

然后在计时器到期后禁用按钮。

Answer 3

＆＃34;我不知道如何限制用户只能在给定时间内按下按钮并查看他按下的按钮＆＃34; - 在这里问两件事

我不知道如何限制用户只能在给定时间内按下按钮 - 如果时间结束，禁用/隐藏按钮
看看他按下了什么按钮 - 每次按下按钮都会存储数组中按钮的ID
还限制用户按任何其他按钮，添加一个类＆＃34;错误＆＃34;按下他无法按下的按钮并单击检查 if $(this).hasClass('wrong') return 0;

如何监控用户点击的内容

3 个答案: