javascript - 如何根据随机数(骰子)在游戏板上来回移动？

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>

使用这段代码，该 block (bg颜色)只是转到随机生成的数字，但我想实际从它所在的位置开始计数并移动那么多方 block (div)，当就到最后了，如果数字更大就可以倒数那么多方格。

我认为我需要使用一个数组并存储当前位置，用“骰子”中的位置递增，然后更新“棋盘”，但我不知道该怎么做。

Answer 1

如果倒数是指循环返回并再次从 1 开始，您可以通过将当前位置存储在变量中来实现这一点，然后当骰子滚动时，通过添加到当前位置来计算新位置> 并取骰子值的模(参见下面的内联注释)。

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。