Play JavaScript Magic Square Game

A classic puzzle game adapted for the web. If you enjoy it, click through on the source link, or search on the game's author for more of his examples.

One of my favorite elements of this example is that the presentation details are left to CSS classes rather than specified in the JavaScript. It may seen like a dumb little detail, but my experience with JavaScript programmers is that they often try to control all of those details instead of leaving it to folks with a skill set more suited to design. (That's not to say that my example illustrates good design... it does not. But then design isn't my fortay.)

Some of the other cool features of this script are that it keeps track of the number of moves and seconds elapsed. It also lets you choose the number of squares and reflows the board using some classic DHTML techniques. All in all, this is a very cool example, and an engaging game (if you enjoy puzzle games.)

That said... enjoy. To start the game, either select a new level and press "Go" or click on any of the board pieces to shuffle them and start the game.

Arrange

  1. Choose a Level (3 to 10).
  2. The game board has blocks with numbers in it. Also there is a single "hole" that can be used for moving the blocks.
  3. The objective of the game is to order the numbers using the "hole" for temporary movement.
  4. Press the "Start Game" button. The timer would be started.
  5. Move blocks in a row by clicking on them. A block can be moved only if it is in the same row or column as the "hole". Make a guess by typing in a number in the box provided.
  6. You can move multiple blocks (in the same row or column as the "hole") by clicking the farthest block that you need to be moved.
Order all the numbers in the shortest time possible with a minimum number of moves...

Level:
Original Games by Arun Narayanan, Dec 2002
Free JavaScripts provided
by The JavaScript Source

Related Links