输入字段值和随机数匹配以增加或减少分数的游戏

时间:2017-10-01 06:17:20

标签: javascript html

我目前正在进行的项目涉及一个游戏,其中包括两个按钮(“开始游戏”和“停止游戏”),一个选定的数字(用户可以输入0到9之间的整数的提示框),用户得分(从零开始)和三个随机数,范围从0到9。

我已经完成并制定了游戏的每个解决方案,除了与用户输入字段匹配的随机数字。例如,如果用户要选择“6”作为他们想要的号码,他们将有机会在三个随机数字区域之间每次点击,直到他们看到“6”。每次点击“6”时,用户获得一个点,并且每次点击“6”以外的数字时,将扣除用户的总点数。分数从零开始,可以得分为负。

以下是我的随机数字和输入字段提示框的代码:

有没有什么方法可以模仿这个设计,得分基本上与输入值和各自的数字相匹配?

任何建议或指示都将不胜感激...对于长期的问题抱歉!

干杯。

<script>

var txt;

function chooseNum() 
{
var txt;
var person = prompt("Choose an integer between 0 and 9:");
if (person == null || person == "") {
    txt = "User cancelled the prompt.";
} else {
    txt = person;
}
document.getElementById("chosen").innerHTML = txt;
}

function randomNumber()
{
var rand = Math.floor(Math.random()* 9 + 1);
$('#number1').html(rand);

}
</script>

<script>

var id = window.setInterval(function(){randomNumber1();},1000);

function randomNumber1()
{
var rand = Math.floor(Math.random()*9);

document.getElementById("number1").innerHTML = rand;

}

</script>

<script>

var id = window.setInterval(function(){randomNumber2();},1000);

function randomNumber2()
{
var rand = Math.floor(Math.random()*9);

document.getElementById("number2").innerHTML = rand;

}

</script>

<script>

var id = window.setInterval(function(){randomNumber3();},1000);

function randomNumber3()
{
var rand = Math.floor(Math.random()*9);

document.getElementById("number3").innerHTML = rand;

}

</script>

1 个答案:

答案 0 :(得分:0)

有几个问题。这是一个开始使用IIFE和你似乎可用的jQuery。

var txt;

function chooseNum() {
  var person = prompt("Choose an integer between 0 and 9:");
  if (person == null || person == "") {
    txt = "User cancelled the prompt."
  } else {
    txt = person;
    runIt();
  }
  $("#chosen").html(txt)
}

function runIt() {
  for (var i = 1; i <= 3; i++) {
    (function(i) {
      var interval = setInterval(function() {
          var rand = Math.floor(Math.random() * 10);
          $('#number' + i).html(rand);
        },
        1000);
    })(i);
  }
}
$(function(){
  chooseNum()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<span id="chosen"></span> -
<span id="number1"></span><span id="number2"></span><span id="number3"></span>