Tuesday, October 02, 2007

Bishop Swap Puzzle

As one final tribute to the 7th Guest chess puzzles, I've added the Bishop Swap Puzzle

GIVE IT A TRY!


Summary of Puzzle Experience

Each of these puzzles had unique problems which were fun to work out and gained in complexity (though each whole puzzle only took a couple hours to code, so they weren't terribly complex).


  • The 8 Queens Puzzle wasn't moving any pieces, so I could just put the queen wherever the user clicked. The only complexity was to check for conflicting queens in all directions and remove them. Of course, my initial goal wasn't to make an interactive game, but a solution generator so my wife's move selection strategy was key, but very simple to implement.

  • The Knight Puzzle added the animation for user moves which was more visually interesting. However, since there's only one open square, you don't have to worry about multiple moves for any given piece. The piece can either be moved to the open square or it can't. There were two interesting algorithms necessary for the knight puzzle. The first is pretty simple and is just the computation of valid "L" shaped moves which is done taking the absolute value of the differences of the coordinates of the piece to move and the blank square. If the absolute value of the differences is 1 & 2 (or 2 & 1), then it's valid.
    The second algorithm is a little more interesting. It is how to determine if all the pieces are in the correct location. For this, I added a little weighting of the row and column indicies as follows:
    • let the computedValue = (row * 2) + (column * 3)

    • not done if:
      • any white knights have a computedValue > 10

      • any black knights have a computedValue < 10

      • any piece has a computedValue == 10

    The following matrix demonstrates this:


    y\x01234
    0036912
    12581114
    247101316
    369121518
    4811141720

  • The Bishop Puzzle added the potential of multiple moves for any given bishop selection. So, I had to keep track of what piece was selected, determine which possible moves were available, and when multiple moves are available, highlight them and allow the user to select one.

Thursday, September 27, 2007

Knight Swap Puzzle

I decided to write another 7th Guest inspired game, the Knight Swap game.

This time I added some animations from the Script.aculo.us library to make it a little more visually interesting.

GIVE IT A TRY!

Tuesday, September 25, 2007

Eight Queens Puzzle

Recently, my wife decided to re-visit some of our old games and was playing The 7th Guest.  Several of the puzzles in that games are chess based, and one is the Eight Queens Puzzle.

I decided it would be a fun and fairly simple task to build a JavaScript implementation of that game which would also attempt to solve it.

My first pass merely randomly placed queens on the board (and subsequently removed the conflicting pieces) as a brut force method to stumble upon the solution.  I let that version run all day and it never found a solution -- which according to the Wikipedia entry, there are 92 of.

Then I added the logic she used to solve the puzzle which was to only add a new queen if it either didn't remove any others, or only removed one other queen.  That technique worked surprisingly well usually only requires the program to take from the 10s to the low 100s of attempts before it has a solution and it much less complex that the solution described in the Wikipedia entry.

In only took a couple hours to build, and in the end, I have a very simple program which will allow you to try your hand at solving the puzzle yourself, or can quickly figure out a solution from whatever you have on the board when you give up.

GIVE IT A TRY!


Wednesday, August 22, 2007

Tips for new Samsung Sync Users

As I mentioned earlier, I recently acquired a Samsung A707 which is provided by at&t/Cingular. In this article I'm going to recommend some software and other customizations to make it more useful.

  1. Access high-speed Internet everywhere I described this in my earlier article, Enjoying High Speed Wireless Connectivity Anywhere, so I won't do so again, but the important tip from that article is to download at&t Communications Manager to connect your laptop to the Internet via Bluetooth or USB.
  2. Easily manage address book, calendar, email, multimedia, and more You may think you need to buy a USB cable in order to connect with your phone and synchronize your address book, appointments, music library, etc., but the good news is that you don't! If you're laptop is equipped with Bluetooth (like mine is), simply download Samsung PC Studio (it's free!). It will run through a simple wizard to connect to your phone either via Bluetooth or USB (it also supports Infrared and Serial connections, but since the phone doesn't, that doesn't help). Once you're connected you can manually manage your address book, email, etc. or you can synchronize them with Outlook/Outlook Express. You can use this application to configure an Internet connection as well, but it's easier with the at&t application (see tip 1). The "Manage Multimedia Files" option allows you to copy music, photos, and videos to/from the phone -- including Podcasts.
  3. Add useful apps to your phone
    • Google Maps Other than making phone calls, one of the most useful thing a cell phone can do for you is help you find businesses while on the road. Google Maps is a "must have" application for this. Not only can if find local businesses by name or keywords, with a click of a button you can call them You can get directions to them including step-by-step instructions to get you there. It also adds real-time traffic information, can display satellite imagery, and provide navigation to move around the map and zoom in/out.
    • GMail Yes, the Sync comes with a mobile email program which connects to Yahoo!, AOL, Windows Live Mail (aka Hotmail), Juno, NetZero, and more. However, the one service it lacks it my preference, GMail. Fortunately, Google has provided their own application which can be installed on your phone to access GMail accounts. Unfortunately, I haven't found anyway to make it the default email program so that your phone will tell you when you get new mail like it will for the other email types.
    • Opera Mini The built in browser works fine for WAP/WML content, but when you need a more powerful browser, Opera Mini is the way to go. If you have iPhone envy and want a browser like it demonstrates showing the whole page and zooming in on pertinent sections, try the beta of version 4 which can do that too.
    • mWebPlayer The Sync includes "XM Radio Mobile" which allows you to stream XM Radio content to your phone. The only problem is, you have to pay for the service. As an alternative, mWebPlayer will stream radio stations off the Internet (for free!). The free version of mWebPlayer doesn't save changes you make to the station list, however, since you can load your Live365.com favorites, it's quick and easy to just load that list each time you start the application.
    • Instant Messaging (http://www.getjar.com/software/Samsung/SGH_A707/Applications/Messengers) The Sync includes an instant messaging application which can connect to either AIM, MSN, or Yahoo! However, it has two drawbacks. You can only connect to one at a time, and it uses your text messaging count for each message (which when you have unlimited data but limited text messages is rather stupid). Fortunately, there are a large number of IM clients out there which can connect to multiple IM communities at once and don't waste your messaging total. The biggest drawback is that, like the email, when you're using one of these apps you won't get notified when you're not using the phone and you get a message. You have to be running the application at the time. Since there are lots to choose from, I'm not specifying a particular one since I haven't evaluated them all, just follow the link and pick the one that sounds best to you.
    • Games There's going to be plenty of times when you're waiting in some lobby and need something to do to pass the time. Here are a few staple games that are both free and well done.
      • Backgammon This is a nice implementation of an old favorite. The LITE version is free and fully functional except that you can't play against other people online.
      • Chess (http://www.cellufun.com/Games/games.asp?game=Chess) Another nice (and free) rendition of a timeless classic.
      • Tetris A good way to waste time.
  4. Add useful URLs to add to your browser favorites
    • Google Who can surf the net without Google?
    • YouTube You too can watch everyone's homevideos on your cell phone (who needs an iPhone? -- the Sync can toggle between portrait and landscape too!)
    • TV Guide Who wants to flip through a paper guide and translate it to the correct station number? Get a customized list of what's on right now for your TV provider.
    • Bible Don't want to carry the Bible with you to church, no problem, get it online.
    • Weather (NOAA) I happen to live in a hurricane zone, so when a hurricane it coming, I want to be able to get up-to-date weather reports.
    • Java Applications (http://wireless.getjar.com/mobile/software/) Many of those aforementioned Java application, and many more can be downloaded from GetJar.com
    • Palm Mobile Portal (http://mobile.palmone.com/us/) True, this isn't a Palm, but Palm does have a nice portal site for other mobile sites.
  5. Free 411 Information Add a contact to your address book for 1-800-GOOG-411 (1-800-466-4411) to get local business information.
  6. Customize appearance Using pictures you take or upload with PC Studio (tip 2), be sure to set the "Caller ID" field for your address book contacts to pictures of them which will show up when they call. Until you get a picture of your friend, the Dilbert characters work nicely. Also, customize your ring tone and wallpaper. To the right is a picture I took at Clearwater Beach (Florida) which has been resized to fit the screen (240x320) in case you don't have a picture of your own.

Friday, August 17, 2007

Automatically Minimize (Minify) JavaScript

One of the 13 Simple Rules for Speeding Up Your Website is to Minify your JavaScript.

Sidenote: These rules can be easily checked using the YSlow add-on to Firebug.

The recommended tool to minify your JavaScript is JSMin. However, the default use of JSMin is to minimize your JavaScript in a separate step before you deploy your code and then have two JavaScript files - the original JavaScript you use to develop the code and the production "minified" version. For me the problem with that is the fact you have two versions to keep track of and keep in sync. Plus before you deploy your code, you need to make sure all your HTML pages use the minified filename not the original version.

Fortunately, there's a port of JSMin to PHP which allows you minify your JavaScript on the fly, but the usage instructions make it appear that you need to change your script source to point to separate PHP file for each JavaScript, or have a single PHP with all your JavaScript files hard-coded in it -- which is a nice option to get multiple JavaScript files with a single request.

What I'm going to show in this post is how to use jsmin-php to create a filter on your server so that all your JavaScript files are transparently minified as your retrieve them.

First off, download the current version of jsmin-php and save it in your directory. As the current version at the time of this writing is jsmin-1.1.0.php, I'll assume that is the file name.

Next, save the script below as jsmin.php:


<?php
// PHP filter to invoke JSMin on all JavaScript files
// see http://code.google.com/p/jsmin-php/
require_once('jsmin-1.1.0.php');

$js_file = pathinfo($_SERVER['ORIG_PATH_INFO']);
$js_path = substr($js_file['dirname'], 11);
$js_file = $js_file['basename'];

$charset = "utf-8";
$mime = "text/javascript";

header("Content-Type: $mime;charset=$charset");

// Output a minified version of JavaScript file
if (file_exists($js_file)) {
echo JSMin::minify(file_get_contents($js_file));
} else {
echo JSMin::minify(file_get_contents($js_path . '/' . $js_file));
}

?>


Note: If you change the name of this script, you'll probably need to change the 11 on the $js_path definition. That rips the script name (/jsmin.php/) off the beginning of the incoming path on the request so I can use a relative path to find scripts in a subdirectory. It should be the length of the script name plus 2 (for the leading and trailing '/'s).

Now, update your .htaccess file and add the lines:

# make all JavaScript files be minimized via JSMin
AddHandler jsmin .js
Action jsmin /jsmin.php


That should be it! If you fetch a JavaScript file from your server, it should now be minified.


Here are a few quick additions you could add to make YSlow happy.

At the beginning of jsmin.php, adding the line:

ob_start("ob_gzhandler");

should GZIP the output for you.



Also, where the Content-Type header is set, adding the following lines will add an expiration of 49 hours (needs to be > 48 hours to by sufficiently "far future" to make YSlow happy. If you really want to cut it close you could use (60 * 60 * 48) + 1):

$offset = 60 * 60 * 49;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
header($ExpStr);