views


Click to enlarge

Everybody was surprised after 12am last night (including me too) after viewing at the Google main search page, the normal Google logo was replaced with the PAC-MAN game, woot! In your minds, definitely you'll be thinking of the yellow pizza-shaped monster that eats the dots along the way in a maze and at the same time, it must avoid contact with the colorful ghosts from getting eaten.

Today (22nd May 2010), Google is celebrating this classic arcade game’s 30th anniversary by replacing its Google's logo at the main search page with this PAC-MAN game. According to Official Google Blog, this is their first-ever playable Google Doodle. It means the doodle is animated and you can even interact with it using some hot keys on the keyboard. Sounds cool, isn't it?

At first, I thought it was a Flash-based game. But the truth is, after looking at the page source (in Firefox: right click at the page, choose 'View Page Source'), it contains HTML, Javascript, CSS and image sprite codes. But, only the background song is in Flash file format (SWF file). Check out the screenshots below:


Click to enlarge


If you noticed at the Page Info window above, there are only 3 files embedded in the page source codes; 2 sprite image files, where one is for PAC-MAN and another is for Google, and an SWF file, which is the PAC-MAN's background song.


Click to enlarge


If you scroll at the Page Source window on the Google's search page (at above screenshot), there is a JavaScript code embedded in it. The bold text in the code is the JavaScript file, which is hosted at Google's server. This little script contains all the codes that generate the game logic, graphics, and sounds that mimic the classic 8-bit arcade game. You can have a look at this JavaScript code at http://www.google.com/logos/js/pacman10-hp.2.js.

Did you know that when you clicked the "Insert Coin" button (which is next to Google Search button), another PAC-MAN will appear in the game, but it is a female, Ms. PAC-MAN (and different background song is played too, if you've noticed). So, you and another person can play the game together at the same time. FYI: to control PAC-MAN, use the arrow keys or click the cursor on the maze, while Ms. PAC-MAN can be controlled by using the WASD keys.


Click to enlarge


If you feel that the screen size of the game is too small, you can also enlarge the PAC-MAN game by zooming in the screen. For most browsers (Firefox, Chrome and others), you can use the page zoom by pressing both Ctrl and + keyboard buttons for few time to zoom in (or enlarge) at the desired screen size. To return back at the normal page zoom (default screen size), just press Ctrl and 0 (zero) keyboard buttons.

Big claps to Ryan Germick (Google doodler) and Marcin Wichary (senior UX designer and developer) who have created the game at the Google homepage. Please take note that this game is available only for 2 days (today and tomorrow) as Google mentioned in their blog:

To play the game, go to google.com during the next 48 hours (because it’s too cool to keep for just one day) and either press the “Insert Coin” button or just wait for a few seconds.

So enjoy playing this innovative game as much as you can until tomorrow. Google FTW! ;D

UPDATE
(24 May): Missed the game? Wanna play it again? Go to http://www.google.com.my/pacman/