Rubik's Cube Shuffle

Generates a shuffle pattern for Rubik's cube.

by Uzair Mehmood

HTML

<h2>
  Rubik's Cube Shuffle
</h2>
<div>
  <input type="number" id="numMoves" value="25" />
  <ul id="resultMoves">

  </ul>
</div>
<p>
  Captial letters denote anti-clockwise movement. Each letter represents a face as follows :
  <ul>
    <li>F - Front</li>
    <li>B - Back</li>
    <li>U - Up</li>
    <li>R - Right</li>
    <li>L - left</li>
    <li>D - Down</li>
  </ul>
</p>

CSS

body {
  font-family: monospace;
  text-align: center;
}

#numMoves {
  border: none;
  text-align: center;
  display: block;
  margin-right: auto;
  margin-left: auto;
  font-size: 2em;
  background: rgba(199, 193, 193, 0.46);
  box-shadow: 0.05em 0.05em 0.2em #847777;
  width: 100%;
}

li {
  display: inline-block;
  width: 20%;
  font-size: large;
  text-align: center;
  padding: 0.2em;
  background: rgba(199, 193, 193, 0.46);
  box-shadow: 0.05em 0.05em 0.2em #847777;
  margin: 0.2em;
}

JavaScript

genMoves(25);

$('#numMoves').change(function() {
  genMoves($(this).val());
});

function genMoves(numMoves) {
  var possible_moves = ['f', 'F', 'r', 'R', 'l', 'L', 'd', 'D', 'u', 'U', 'b', 'B'];
  var result_moves = [];
  for (var i = 1; i <= numMoves; i++) {
    var lastMove = result_moves[result_moves.length - 1] ? result_moves[result_moves.length - 1] : possible_moves[Math.floor(possible_moves.length * Math.random())];
    var nextMove = possible_moves[Math.floor(possible_moves.length * Math.random())];
    while (nextMove.toLowerCase() == lastMove.toLowerCase()) {
      nextMove = possible_moves[Math.floor(possible_moves.length * Math.random())];
    }
    result_moves.push(nextMove);
  }

  $('#resultMoves').html('');
  $.each(result_moves, function(i, j) {
    $('#resultMoves').append('<li>' + j + '</li>')
  });
}