The Puzzle and Comments

We present here a web-based, browser version of the Rolling Cubes puzzle and its complete source code.

Click the screen shot below or this link to open the puzzle in a new window:

The rendition of Rolling Cubes presented here is not well-suited for Android phones. If you wish to play the game on your phone, open the Android Market, search for flashandmath, and locate RollingCubes on our apps list. You can then download and install the app. We discussed the Android-specific parts of the code and the app at   AIR for Android 'Rolling Cubes' 3D Puzzle - Source Code.

Download the Complete AS3 Code

The following zip package contains complete code and the custom AS3 classes behind the puzzle:

Custom AS3 Classes: Puzzle and Cube

There are two AS3 classes behind the application and Timeline code in cubesweb.fla file. The custom classes are Cube and Puzzle.

The Puzzle class extends the Sprite class. It creates a display of eight cubes and it dispatches a custom event, Puzzle.PUZZLE_SOLVED. The class' constructor evoked with the keyword 'new' takes seven parameters:

new Puzzle(len:Number,g:int,b:uint,f:uint,m:uint,l:uint,tf:TextField)

len is the length of sides of each cube in pixels, g the gap between cubes in pixels, b, f, m, and l stand for the colors of the back side, front side, middle strip of multicolored sides, and the border of each cube, respectively. tf is a reference to a TextField in which a message about the number of the current move is displayed.

The Cube class that is responsible for creating each of the eight cubes, as well as rotating and depth-sorting each cube. The Cube class is used only within the Puzzle class and not in the Timeline code.

In the Timeline code, we create an instance of the Puzzle class and use its public method Puzzle.loadState(...) to load each of the consecutive puzzles. We also listen to Puzzle.PUZZLE_SOLVED event. The class itself attaches listeners to individual cubes, keeps track of their positions, and determines which rotation should take place when a cube is clicked.

The Timeline code is easy to read and illustrates well methods of the Puzzle class.

Depth-sorting and the root Object

As in our Android app, AIR for Android 'Rolling Cubes' 3D Puzzle - Source Code, we use the technique of depth-sorting developed in Z-Sorting and Perspective Projection in AS3 and Flash Player 10. We sort with respect to the distance to the observer which requires accessing perspective projection settings of the root object and cubes' coordinates with respect to the root. This technique works very well in our Android AIR app and, for a browser version presented here, in any computer browser. The method becomes slightly imperfect in the Android browser as the Android browser rescales and resizes the Stage and the root object quite arbitrarily. The readings of an object's position with respect to 'root' are no longer reliable.

Enjoy the puzzle!

The original Rolling Cubes puzzle was published by John Harris in Journal of Recreational Mathematics, 1976.

Back to Advanced Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.