Question

这就是我现在得到的...

var max = 7;
var min = 1;

$('#dice').click(function() {
  random = Math.floor(Math.random() * (max - min) + min);
  $('.bordSquare').css({
    'backgroundColor': 'white'
  });
  $('#' + random).css({
    'backgroundColor': '#00ffec'
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1" class="bordSquare">1</div>
<div id="2" class="bordSquare">2</div>
<div id="3" class="bordSquare">3</div>
<div id="4" class="bordSquare">4</div>
<div id="5" class="bordSquare">5</div>
<div id="6" class="bordSquare">6</div>

<button id="dice">Dice</button>

使用此代码，该片段（bg颜色）将移至随机生成的数字，但是我想从其实际位置开始计数，并移动那么多正方形（div），甚至当它到达最后，如果数字更大，可以算出那么多正方形。

我认为我需要某种方式来使用数组并存储当前位置，然后从“骰子”中增加一个，然后更新“木板”，但是我不知道该怎么做。

Answer 1

如果通过倒数表示循环并从1重新开始，则可以通过将当前位置存储在变量中来完成此操作，然后在骰子滚动时，通过添加到current并计算新位置骰子值的模（请参见下面的内联注释）。

var max = 7;
var min = 1;
var current = 0;

$('#dice').click(function() {
  var random = Math.floor(Math.random() * (max - min)); // between 0 and (max - min)
  var newPos = min + (current + random) % (max - min); // % ensures we stay within range
  console.log('current was ' + current, 'dice rolled ' + random, 'new position is ' + newPos);
  current = newPos;
  $('.bordSquare').css({
    'backgroundColor': 'white'
  });
  $('#' + newPos).css({ // update new position's bg color
    'backgroundColor': '#00ffec'
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1" class="bordSquare">1</div>
<div id="2" class="bordSquare">2</div>
<div id="3" class="bordSquare">3</div>
<div id="4" class="bordSquare">4</div>
<div id="5" class="bordSquare">5</div>
<div id="6" class="bordSquare">6</div>

<button id="dice">Dice</button>

如果您只想倒退差额，则可以从current中减去来计算newPos。

如何根据随机数（骰子）在游戏板上来回移动？

1 个答案: