Transcolors on Khan Academy: Version 1.0

The first iteration of Transcolors, a colorful puzzle game made on Khan Academy's Processing.js environment.
The first iteration of Transcolors, a colorful puzzle game made on Khan Academy's Processing.js environment.

Make your way through puzzling mazes and colorful obstacles in this challenging puzzle game made on Khan Academy. As an entry to Khan Academy’s Puzzle-Game Challenge, Transcolors is among the most popular programs on Khan Academy’s computer science platform.




Programming Language

Typeface Used

Transcolors on Khan Academy: Version 1.0

The Puzzle-Game Challenge was posed early in the existence of Khan Academy’s new computer programming curriculum, challenging student programmers to write a puzzle game using JavaScript and the Processing.js library. I had programmed a puzzle game before – Transcolors, using Scratch – and I figured I’d remake it for this occasion. It’s one of my first JavaScript projects – not bad, huh?

In this Transcolors remake, guide Smiley through a grid of colored obstacles by matching color. Color changes occur when the character steps on a blinking color transformer, upon which the old color is lost. The object of the game is to reach the flag with a matching color.

Redesigning the Puzzle Layout

The puzzles in the Scratch version of Transcolors are free-form and pixel-based; collisions are detected by touching pixels, using the pixel’s color to determine whether or not an obstacle is passable. Making levels is tedious, as they have to be hand-drawn with precisely chosen colors in order to make the game function correctly.

I decided I wanted to improve upon this model. I first figured out that any free-form puzzle layout can be remade into a grid system, which would make the game logic much more efficient than checking the surrounding pixel color every time the player moved. It would also help to make the puzzles look consistent and easier to render.

So I started by streamlining all the puzzle elements – the color transformers, walls, bricks, and gates – into a tile-based map. What used to be wide open space in the Scratch version is now constrained to “path” blocks. The character now simply moves from square to square.

The player itself is a square in the Scratch version. That doesn’t work so well on a square grid, since you won’t be able to see where you’re standing. So I changed the shape to a circle; that way there’s some context as to what’s behind they player. And why not, let’s add a smiley face on top of that to make the game more fun.

Thus begins Smiley’s debut – hello, Smiley!

With a new tile-based system came a redesign of the puzzle elements. One thing I thoroughly enjoyed making was the brick-smashing animation. Simply run into a brick, and POW! – the whole thing explodes into pixels. If you think that’s satisfying, here’s the same animation on a much larger scale:

The tile-based system also brings a new objective to Transcolors: using as few moves as possible to finish a puzzle. Each time you step on a square, a counter increments to keep track of your moves. You’re also timed once the level starts, and your best move count and time are saved as high scores. I never programmed in the minimum possible amount of moves or any sort of time goal, so the main idea of this feature is to constantly improve your score after you try a level for the first time.

Saving your hard-earned scores is a bit tricky, since there’s no way to store internal data in Khan Academy’s programming interface. Clicking “Save My Stats” from the main menu will output your scores as a JSON object, which you’ll have to override in the game code via copy-and-paste. You can then save the game code in its entirety to your Khan Academy account as a spin-off (or fork, if you will).

The Level Editor

Users can design their own level using the editor found under “Create a Level.” Just select a tile and a color from the palette, then drag on the game board to place tiles. Hit “SAVE”, and the game exports the code used to generate that level. Paste it inside the game code at the indicated spot, save a spin-off to your account, and you’ve just made your very own Transcolors level! You can even challenge your friends to solve it.

Adding to that train of thought, why don’t I just let the Khan Academy community create some of the levels for me?

I created a post in the project discussion area, where community members can submit links to spin-offs containing levels they’ve created. I would then review it and provide some feedback if necessary. If I feel that a level is deserving to be in the game*, I’d include it as an official level with credit to the maker. After the last Version 1.0 update, 13 of the 27 levels in the game ended up being made by community members. Not half bad.

(*I’ve come to learn that level-making is a sort of art, and that it takes effort and some careful thinking to make levels that are effective. As such, I’m quite picky about style and don’t accept every level.)

Reception From the Khan Academy Community

Before long, Transcolors was rising up the ranks and eventually became the #1 most popular puzzle game of the Puzzle Game Challenge. (This was based on the order of which the spin-offs were listed – the challenge is entered by making a spin-off of the Puzzle-Game Challenge project. The ordering criteria was since changed to favor more recent projects, so presently Transcolors is “topped” by several other games – many of which aren’t of the puzzle genre, for the matter.)

So, after using the concept of Transcolors from the Scratch game and remaking it with Processing.js, Transcolors became a huge hit, with over 500 up-votes from the Khan Academy community. I’m quite proud of this accomplishment, especially being so early in my JavaScript career!

Transcolors on Khan Academy: 2.0

Of course, much was learned since the beginning of my JavaScript adventure. After looking back into the code, I saw lots of possible improvements I could make.

Enter Version 2.0 – the complete revamp after the complete remake, with vivider graphics and a whole new experience. Check it out!

Since the completion of Transcolors on Khan Academy, I have been working on an iOS app for Transcolors!

By | 2016-10-16T16:32:13-07:00 July 3rd, 2016|0 Comments

About the Author:

Darryl Yeo is a young programmer, web developer, computer graphics artist, musician, and composer who hopes to inspire others through his projects and inventions. Read more about Darryl.

Leave A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Go to Top