slayeroffice - web experiments gone horribly awry

11.08.2005 - Four Corners

It's been a long while since I've written a new game for the site, so I searched around for inspiration last week and came across this Flash game that I thought would make an interesting, if quick, re-write in javascript.

I changed the rules around a good bit and added all sorts of design fluff like color transitions (I took a break from it to do the gradients), opacity fades and object resizing. I'm calling it Four Corners. Instructions on how to play can be found on the the game's page.

Lessons learned over the course of writing this game:

  • MSIE doesn't support obj.setAttribute("style","[styles]"). You have to use obj.style.setAttribute("cssText","[styles]"). More info on Quirksmode.
  • Obvious probably, but a DOM based means of clearing the innerHTML of an object is:
    while(obj.firstChild) obj.removeChild(obj.firstChild).
  • In a for loop, appending created objects to a documentFragment and then appending the documentFragment to the parent object is waaaay faster than appending the created object to the parent immediately.
  • The previously mentioned lexicographic sort issue.
  • var pos = document.all && !window.opera; would make a great bumper sticker. Alternately, replace "pos" with "wtf".

Give the game a once over and let me know if you run into any issues.

Comments

Cool game. Thanks for sharing the javascript tips.
Posted by chao on November 8, 2005 @ 1:26 pm
really elegant game. thanx
Posted by Quentin on November 9, 2005 @ 1:37 pm
YES! 85300 Points! The next version should have a highscore board!

Cool game!
Posted by Daniel on November 22, 2005 @ 8:35 am

Finally found your site after going through the DOm scripting pages. Then got sucked into playing the game. Which was fun. The funny thing is today is the first time I've heard of documentFragment and I've read about it twice now.

Which is cool.
Posted by Simon Proctor on November 22, 2005 @ 9:40 am

Great game, great code.

Just a thing : green gradient colors are very hard to distinguish...
Posted by David on December 1, 2005 @ 6:07 am

Ahh, trying to do work and I got stuck playing this game. :-)

I was trying to get the same color in all four corners so that I could clear the board, but I gave up after 15 minutes.

I haven't checked the code out yet, but a very cool little game.
Posted by Froggie on December 5, 2005 @ 12:52 pm

122000 points.. is that good? Do highscores get tracked?

Great game!!
Posted by Daniel on December 9, 2005 @ 5:55 am

Like the game, as addictive as minesweeper. Got a little frustrated clicking the boxes though, didn't always seem to pick up the click event. Could just be my uncoordinated self though.
Posted by chrisA on December 10, 2005 @ 1:08 pm
Cool game. Thanks for sharing the javascript tips.
Posted by kominki on February 3, 2006 @ 5:13 pm

Comments have been closed for this post.