If you have a basic understanding of Javascript, CSS, and HTML, then you should consider coding you’re own Rubik’s Cube scrambler and solver. This is a great project to learn more about javascript specifically and also how event-handler, nested arrays, and different input types work. Coding this took me approximately 5 hours so anyone should be able to code it in under a week. You can view my project here.
Setup
This project is made on replit.com. First, we are going to set up some basic stuff in the script.js file. To create the scramble, we have to create an array of the possible move types. However, we will need to take extra steps to make sure that we don’t have moves in the scramble like R, and R’ next to each other. For this, we will use something called a nested array which you will see the use for later. We also need to set up some basic variables that will also be used in the future.
var scramble = "";
var randomIndex;
var randomSubIndex;
var prevIndex;
var maxLength = 22;
var is333 = true;
var moves = new Array ();
moves[0] = new Array ("R ","R' ","R2 ");
moves[1] = new Array ("L ","L' ","L2 ");
moves[2] = new Array ("U ","U' ","U2 ");
moves[3] = new Array ("D ","D' ","D2 ");
moves[4] = new Array ("F ","F' ","F2 ");
moves[5] = new Array ("B ","B' ","B2 ");
We can call a value from the solves array using 2 indexes. For example, D’ would be called with solves[3][1]: The first index of the third nested array.
The Scrambling Function
Now we will create the function that will generate a new scramble every time it’s called. We can later map this to a button or any other input type. Start by creating a generateScramble() function. There are 2 important variables in this function: randomIndex, and randomSubIndex. These variables decide which move is taken from the solves[][] array. The variables are randomized and placed as the indices for the solved[][] array. But here’s where there is a small problem, we have to make sure the moves selected don’t cancel out each other like D and D’. To do this we will create if and else statements that check if the new move cancels out the previous one or not.
if(randomIndex == prevIndex){
randomIndex = Math.floor(Math.random() * 6);
randomSubIndex = Math.floor(Math.random() * 3);
scramble += moves[randomIndex][randomSubIndex];
}
else{
scramble += moves[randomIndex][randomSubIndex];
}
This is why the nested arrays were useful because once we have some variation of a move like U or U2, then we know not to use any variation like that for the next move in the scramble. We can do this by making sure the nested array of the previous move is not equal (!=) to the current array. Here is all the code for the generateScramble() function:
function generateScramble() {
var scramble = "";
var randomIndex;
var randomSubIndex = 0;
var prevIndex = 0;
//Adding a new move to the scramble and making sure its not the same as the last index
for(let i = 0; i<maxLength; i++){
randomIndex = Math.floor(Math.random() * 6);
randomSubIndex = Math.floor(Math.random() * 3);
if(randomIndex == prevIndex){
randomIndex = Math.floor(Math.random() * 6);
randomSubIndex = Math.floor(Math.random() * 3);
scramble += moves[randomIndex][randomSubIndex];
}
else{
scramble += moves[randomIndex][randomSubIndex];
}
console.log(randomIndex, randomSubIndex);
prevIndex = randomIndex;
console.log(prevIndex);
}
document.getElementById('scramble').innerHTML = scramble;
}
If you see things that don’t make sense like the document.getElementById() function, don’t worry because that is related to the HTML portion of the code which will be covered later. Note that while the check for preventing inverses works sometimes, it is not very efficient because I wanted the code to be simple over accurate so anyone could understand and make changes.
HTML
Now we need to display the scramble we have generated. To do this we can create a text field that has the “scramble” id which we will use to set to the scramble we have created. To make this text field, we can simply use a button that is modified a little to our liking:
<center> <button onClick='generateScramble()' id='scramble' class='scramble'> Click to Generate New Scramble </button> </center>We used a button so that every time we click it, we can see the text change in the place we click by changing the name of the button. Notice the onClick = ‘generateScramble()’. This means that when we click the button, it will call the generateScramble function. We’re almost done, now all we have to do is tidy things up and make some finishing touches.
CSS
Now the fun part: making everything look nice. First, we have to style the button. Here is an example of a potential styling scheme:
.scramble {
font-size: 50px;
font-family: times;
background: none;
border: none;
}
.scramble:hover {
color: darkorange;
cursor: pointer;
}
We gave the button a class of ‘scramble’ so we could style it in CSS later. Feel free to experiment with the styles and customize the site to your own liking.
Next Steps and Cool Modifications
And we’re done! But not really because now it’s up to you to decide what path you will take your site down. I chose to make mine into a timer, but you can do anything from a simple cube scrambler widget to a full-on cube-solving algorithm. Here are some cool ideas you may want to consider adding to your program.
- Add a timer
While I did add a timing function to mine, I chose to keep it simple and just use manual input. Although a stopwatch is much more useful, it can be more difficult and some people prefer manual input.
- Use more advanced scrambling techniques
The scrambling algorithm used in this program is simple but not very reliable. You can take this to the next level by using more advanced methods and programs to get the scramble as close to WCA as possible.
- Go crazy with CSS
Why not make this site look just as cool as other timers like csTimer and cubedesk? Try experimenting with menus as different styles for objects like buttons and input fields. W3Schools is a great way to learn about different styling methods and ways to make things look much better.
Cubing Content 
Leave a comment