Question

我正在为学校项目制作一个打鼹鼠型游戏。到目前为止，我已经创建了一个基于2 setIntervals运行的2个随机数生成器，它们在全局计时器之后停止，但我接下来的步骤是：

根据我提供的ID号码显示元素，与生成的数字相关。
假设我将使用.onClick()并在此实例中创建一个向score变量添加数字的函数，使出现的元素消失。
如果任一生成器生成了相同的数字并且未单击该项目，则不显示项目或避免关闭项目。（我必须采取的其他解决方案是停止发电机两次产生相同的数字或产生任何发电机相同的数字。）

除了这些之外，还有什么我应该考虑的吗？
请记住，我是一个新手，对你的建议的任何解释都会很棒。

这是我到目前为止的代码：

＆＃13;

var score;
var count;
var fastcount;
var counter;
var randGen;
var randCount;
var number1;
var blob = $("td");

$(document).ready(function() {

  $('#start').fadeToggle(500);

  $('#start a').click(function(e) {
    e.preventDefault();
    startGame($(this));
  });

});


/* Start Button Toggle */

function startGame(whichNav) {
  score = 0;
  count = 10;
  fastCount = count * 2;
  counter = setInterval(timer, 1000);
  fastCounter = setInterval(fasterTimer, 500);
  randCount1 = setInterval(randGen1, 1000);
  randCount2 = setInterval(randGen2, 500);

  var startbutton = $(whichNav.attr("href"));
  $('#start').fadeToggle(250);
  $('#timer').html(count);
  $('#score').html(score);
}


/* Game Mechanics */

/* Timer */
function timer() {
  number1 = randGen1;
  $('#number1').html(number1); //take out later
  if (count == 0) {
    clearInterval(counter);
    return;
  }

  count = count - 1;
  $('#timer').html(count);

  if (count == 0) {
    $('#start').fadeToggle(250);
    number1 = 0;
    number2 = 0;
  };

}

function fasterTimer() {
  number2 = randGen2;
  $('#number2').html(number2); //take out later
  if (fastCount == 0) {
    clearInterval(fastCounter);
    return;
  }

  fastCount = fastCount - 1;
}


/* Number Generator */
function randGen1() {
  return parseInt(Math.floor(Math.random() * 8) + 1);
}

function randGen2() {
  return parseInt(Math.floor(Math.random() * 8) + 1);
}


/* Pop Up */
if (number1 = blob) {
  $("td .blob").show();
}

＆＃13;

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #FFF;
  background: #000;
}
#wrapper {
  width: 1024px;
  height: 768px;
}
#start {
  position: absolute;
  display: inline;
  display: none;
  text-align: center;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
}
#start a {
  background-color: rgba(255, 255, 255, 0.3);
  color: #FFF;
  padding: 10px 20px 10px 20px;
  position: fixed;
  top: 45%;
  left: 45%;
  text-decoration: none;
}
#gameboard {
  text-align: center;
  width: 100%;
  height: 50%;
}
#gameboard tr {
  width: 100%;
}
.blob {
  display: none;
}
#scoreboard {
  width: 100%;
  height: 10%;
}

＆＃13;

<!doctype html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link href='http://fonts.googleapis.com/css?family=Fredoka+One|Montserrat:400,700' rel='stylesheet' type='text/css'>
</head>

<body>
  <div id="wrapper">
    <div id="start"><a href="#start">Start</a>
    </div>
    <table id="gameboard">
      <tr id="10">
        <td id="1">
          <img class="blob" alt="tapme" src="img/snorlax.png">
        </td>
        <td id="2">
          <img class="blob" alt="tapme" src="img/snorlax.png">
        </td>
        <td id="3">
          <img class="blob" alt="tapme" src="img/snorlax.png">
        </td>
      </tr>

      <tr id="20">
        <td id="4">
          <img class="blob" alt="tapme" src="img/snorlax.png">
        </td>
        <td id="5">
          <img class="blob" alt="tapme" src="img/snorlax.png">
        </td>
        <td id="6">
          <img class="blob" alt="tapme" src="img/snorlax.png">
        </td>
      </tr>

      <tr id="30">
        <td id="7">
          <img class="blob" alt="tapme" src="img/snorlax.png">
        </td>
        <td id="8">
          <img class="blob" alt="tapme" src="img/snorlax.png">
        </td>
        <td id="9">
          <img class="blob" alt="tapme" src="img/snorlax.png">
        </td>
      </tr>
    </table>

    <div id="scoreboard">
      <div>Score: <span id="score"></span>
      </div>
      <div>Time: <span id="timer"></span>
      </div>
      <div>[DEV] Random Number 1: <span id="number1"></span>
      </div>
      <div>[DEV] Random Number 2: <span id="number2"></span>
      </div>
    </div>
  </div>
</body>

＆＃13;

如何根据随机数生成器显示元素？

0 个答案: