Question

我正在寻找创建一个简单的jquery游戏。它就像这样开始，用户在文本字段中输入一个数字。

<form>
    <input type="text" id="MyNumber" value="" />
    <button id="getit">Play</button>
</form>
<div id="randomnumber"></div>

点击播放按钮后，div id randomnumber中会出现一系列数字。目标是当他们在我的号码文本字段中看到他们所关注的号码时，点击div id randomnumber中随机旋转的数字。如果他们点击他们的号码，他们就赢了。

我的jquery脚本需要按下按钮才能生成数字，（每次生成新数字时我都不想按下按钮。）该脚本也不识别被点击的数字，或者将它发送到我的checknumber.php页面，这样我就可以存储输入的数字和数据库中选取的数字。有什么帮助吗？

这是我的jquery脚本。

function IsNumeric(n){
    return !isNaN(n);
} 

$(function(){
    $("#getit").click(function() {
        var numLow = $("#lownumber").val();
        var numHigh = $("#highnumber").val();

        var adjustedHigh = (parseFloat(numHigh) - parseFloat(numLow)) + 1;
        var numRand = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);

        if (IsNumeric(numLow)
            && IsNumeric(numHigh)
            && (parseFloat(numLow) <=  parseFloat(numHigh)) 
            && (numLow != '') 
            && (numHigh != '')) 
        {
            $("#randomnumber").text(numRand);
        } else {
            $("#randomnumber").text("Careful now...");
        }

        return false;
    });

    $("input[type=text]").each(function(){
        $(this).data("first-click", true);
    });

    $("input[type=text]").focus(function(){
        if ($(this).data("first-click")) {
            $(this).val("");
            $(this).data("first-click", false);
            $(this).css("color", "black");
        }
    });
});

Answer 1

“播放”按钮很适合开始滚动（我不确定你是否考虑完全移除它）。要定期生成数字，请使用setInterval。

$(function(){
    var initialPeriod=500; // 0.5s
    var generateNumIval;
    function generateNum() {
        var numLow = $("#lownumber").val();
        var numHigh = $("#highnumber").val();

        var adjustedHigh = (parseFloat(numHigh) - parseFloat(numLow)) + 1;
        var numRand = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);

        if (IsNumeric(numLow)
            && IsNumeric(numHigh)
            && (parseFloat(numLow) <=  parseFloat(numHigh)) 
            && (numLow != '') 
            && (numHigh != '')) 
        {
            $("#randomnumber").text(numRand);
        } else {
            $("#randomnumber").text("Careful now...");
        }
    }
    function run(period) {
        clearInterval(generateNumIval);
        generateNumIval = setInterval(generateNum, period);
    }

    $("#getit").click(function() {
        run(initialPeriod);
        return false;
    });
    ...

您可以通过使用新句点调用run来更改句点（例如，当用户点击正确的号码时增加难度，或者在用户输出太多连续错误时降低难度）。如果您想在生成每个号码后更改句点，请使用setTimeout而不是setInterval。

要检查数字上的点击，请在#randomnumber上注册一个点击处理程序，将其val()与#MyNumber的{{1}}进行比较。从那里，采取适当的行动，以确定它是命中还是错过。正如丹所说，每次点击都会这样做会产生相当多的网络流量。虽然每次只能传输少量数据，但连接数可能会产生重大影响。相反，如果用户点击它，则使用“停止”按钮并发送数据，或使用unload处理程序（一个不排除另一个）。

Answer 2

如果您有超过几个人玩这个游戏，您的服务器将崩溃并烧毁。人们可以非常快速地识别和点击（每秒多次），但除非他们住在您的服务器旁边，否则您无法快速接收和响应HTTP请求，您的服务器也无法从多个用户每秒处理数百或更多

使用JavaScript编写游戏，完成后，将总计（错误点击次数和右键点击次数等）发送到服务器进行保存。尽力模糊他们的发送方式，以便弥补分数并非微不足道。

Answer 3

这里有几件需要注意的事情。没有理由不能通过玩家进入自己的数字生成随机数，或者甚至更好地生成由游戏本身生成的数字。

使用data和两个事件处理程序完成占位符文本的方式也有些混乱。至少您应该使用.one为此附加一次性事件处理程序，但如果您将HTML5 placeholder属性与Javascript回退一起使用会更好。

除此之外，你仍然缺少大量的游戏逻辑。我不会建议你在这个游戏上工作太久 - 这对于使用JavaScript和jQuery很有用，但不是很值得。

哦，只是为了好玩，我也建立了我自己的版本。

var hitCount = 0,
    missCount = 0;

function IsNumeric(n) {
    return !isNaN(n);
}

$("#getit").click(function() {
    var li = [],
        intervals = 0,
        n = parseInt($('#MyNumber').val());

    if (IsNumeric(n)) {
        setInterval(function() {
            li[intervals++ % li.length].text(Math.random() > .1 ? Math.floor(Math.random() * (10 + n) + (n / 2)) : n).attr('class', '');
        }, 500);
    }

    $('#randomnumber').empty();

    for (var i = 0; i < 5; i++) {
        li.push($('<li />').click(function() {
            var $this = $(this);

            if (!$this.hasClass('clicked')) {
                if (parseInt($this.text(), 10) === n) {
                    $this.addClass('correct');
                    $('#hitcount').text(++hitCount);
                } else {
                    $this.addClass('wrong');
                    $('#misscount').text(++missCount);
                }
            }

            $this.addClass('clicked');
        }).appendTo('#randomnumber'));
    }

    return false;
});

原油是的，但它有点奏效。在这里查看：http://jsfiddle.net/DHPQT/

Answer 4

为了好玩..

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var mainLoop;
$(function(){
  $("#getit").click(function() {
    if ($(this).attr('class') == 'start') {
      $(this).attr('class','play');
      $(this).html('STOP THE MADNESS!');
      mainLoop = window.setInterval(function() {
        var output = '';
        for (var i = 0; i < 10; i++) {
          var numLow = $("#lownumber").val();
          var numHigh = $("#highnumber").val();  
          var adjustedHigh = (parseFloat(numHigh) - parseFloat(numLow)) + 1;
          var numRand = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);
          output += '<div>'+numRand+'</div>';
        }
        $('#randomnumbers').html(output);
      },250);
    } else {
      window.clearInterval(mainLoop);
      var sweetWin = false;
      $('#randomnumbers').children().each(function() {
        var v = $(this).html();
        if (v == $('#MyNumber').val()) {
          alert('WIN!');
          sweetWin = true;
          $.post('127.0.0.1',{outcome:'win'});
        }
      });
      if (!sweetWin) {
        alert('FAIL!');
        $.post('127.0.0.1',{outcome:'loss'});
      }
      $(this).attr('class','start');
      $(this).html('Play');
    }
  });
});
</script>
</head>
<body>
Low: <input type="text" id="lownumber" value="0" />
High: <input type="text" id="highnumber" value="100" />
<input type="text" id="MyNumber" value="50" />
<button id="getit" class="start">Play</button>
<div id="randomnumbers"></div>
</body>
</html>

Jquery随机数

4 个答案: