Building a board game using canvas + css animations

// meta code
const tiles = [
  {left: 0, top: 0},
  {left: 10, top: 10},
  {left: 20, top: 20},
  {left: 30, top: 30},
  {left: 40, top: 40},
  {left: 50, top: 50},
  {left: 60, top: 60},
  {left: 70, top: 70},
  {left: 80, top: 80},
  {left: 90, top: 90},
  {left: 100, top: 100},
  {left: 110, top: 110},
  {left: 120, top: 120},
];

let rollHistory = [];
let currentPosition = 0; // starting positon

function rollDice() {
  return Math.floor(Math.random() * 6) + 1;
}

// show roll history
const el = document.getElementById('roll-history');

function updateHistory(roll) {
  rollHistory.push(roll);
  el.innerHTML = '';
  rollHistory.forEach((record, i) => {
    const recordDiv = document.createElement('div');
    recordDiv.innerHTML = `${(i + 1)}: ${record}`;
    el.appendChild(recordDiv);
  });
}

// draw tiles
const tilesWrapper = document.getElementById('tiles-wrapper');

tiles.forEach(tile => {
  const tileDiv = document.createElement('div');
  tileDiv.className = 'tile';
  tileDiv.style.left = tile.left + 'px';
  tileDiv.style.top = tile.top + 'px';
  tilesWrapper.appendChild(tileDiv);
});


// button and position logic
const button = document.getElementById('roll-button');
const piece = document.getElementById('piece');

button.addEventListener('click', (e) => {
  const roll = rollDice();
  updateHistory(roll);

  if (currentPosition + roll >= tiles.length) {
    // not enought tiles left, go to last
    currentPosition = tiles.length - 1;
  } else {
    currentPosition += roll;
  }
  
  piece.style.left = tiles[currentPosition].left + 'px';
  piece.style.top = tiles[currentPosition].top + 'px';
  
  // if on last, WIN!
  if (currentPosition === tiles.length - 1) {
    setTimeout(() => alert('You win!'), 1);
  }
});

#roll-button {
  position: absolute;
  right: 50%;
  top: 10px;
}

#piece {
  position: absolute;
  top: 0;
  left: 0;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #000;
}

.tile {
  position: absolute;
  height: 10px;
  width: 10px;
  border: 1px solid red;
}

.history {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 150px;
  background: #eee;
}

<button id="roll-button">Roll</button>

<div class="history">
  History (move: roll) <br /> <br />
  <div id="roll-history"></div>
</div>

<div id="piece"></div>
<div id="tiles-wrapper"></div>