The Making of Evil Clutches, Javascript version.

This is a quick and dirty walk-thru on how I put together the 'Evil Clutches' javascript demo. First of all, I bought the book 'The Game Makers Apprentice' and built the first game, in Chapter 2. It's called "Evil Clutches", without the "Javascript". This was a fairly easy game to build with Game Maker and so, after building it and playing it a few times, I took the art resources and modified them a little (made them PNG instead of GIF, removed the animation frames, etc).

After doing this, I started building out my CSS Stylesheet to describe my resources, each resource has it's own style and all my 'objects' use the 'object' class (which simply says "position: absolute".

So, here's a quick example of some of the CSS:

My 'game' area is defined as a static object, like so:

Note the 'overflow: hidden' to prevent objects from 'bleeding' out of my game area, also note the 'position: relative' which allows my absolutely positioned children to be offset by the game board. So '0,0' for a child of 'game' is the top-left of the 'game' element, not the document/window.

Now, I have two other static objects, my Dragon and my Boss, and these were defined as such:

I added a z-index to these, to ensure they were placed over top of any of my dynamic objects (Demons, Babies and Fireballs), which was done to prevent any 'bleeding' overlap when the objects collide.

After I created this style sheet, I started writing some code. First off, I created the 'JSGameLib' side-by-side with this demo, but for the purposes of this walk-thru, we'll skip the 'making of' for JSGameLib.

I added my script references, which included jQuery 1.2.3, jQuery Growl, and JSGameLib. I then added a reference to 'index.js', which was just a simple script file i created to hold my games code.

So, let's take a look at 'index.js'.

At the very top, I define a bunch of global variables, this is to help reduce some of the strain on the browser while executing the code repeatedly. Three of the most common things I reference are the Game area, the Dragon and the Boss. As these are static objects that always exist, and only have one instance of each, I simply store a reference to a jQuery object that points to them.

In my $(document).ready() I set some of the jQuery Growl settings, to make it look a little nicer, as well as add the 'object' class to all of my 'game' children (I did this so I didn't have to remember to do it when I laid out the Markup on the page).

One of the children in my 'game' area is the 'overlay', which basically hides my screen and provides basic user instructions. To begin the game, we click this area, so I attached a simple jQuery click handler and it simply calls "gameStart". I also added a click handler to my 'Stop Game' button, which calls "gameOver".

"gameStart" is pretty simple, it initializes all my global variables to there default values and stores a few pre-calculated values onto my static Dragon, Boss and Game objects. Namely the 'h' and 'w' properties, so I don't have to calculate these every time i need to know what they are -- this also allows me to quickly resize my artwork and change my game area without having to change -ANY- of my code.

The game 'starts' by calling the 'bossDown' function, which basically just animates my 'boss' object by making it move to the bottom of the screen, this 'animate' function has a complete handler, which calls 'bossUp' (take a wild guess what 'bossUp' does?). These are basic jQuery methods, and you can review the docs for the 'animate' function of a jQuery object. The 'unique' thing is the simple 'complete' handler, which generates a simple 'loop' which makes my boss object go 'up and down' repeatedly.

I make a call to 'dragon.controlled()', and 'controlled' is a function available in JSGameLib and I pass in some basic options, enabling support for the UP and DOWN (Arrow Keys and WASD style) as well as a 'speed' and 'duration' override. For more details, please take a look at the JSGameLib documentation. Following this, I add a 'keypress' handler and look for 'space' (charCode: 32). If you press 'space', I call the 'fireball' function. This function simply creates a new DIV element with a class of 'fireball object' and then sets the Top and Left CSS attributes to that of the dragons' current position. I also set 'display: none' to make the object hidden initially, and then call 'animate' with an 'opacity: show' to make the fireball fade in quickly. While it is fading in it also begins to start moving by setting 'queue: false' in the 'animate' options. I simply tell the fireball to move '+=675px' over the course of 2000 milliseconds. Once 'complete', I remove the fireball.

Pretty straight forward so far, eh?

I'm out of time for now, but will finish this up later on -- hopefully adding some more detail to what's written already.

Javascript Game Library

I am currently in the process of building a 'Javascript Game Library', which is being implemented as a simple jQuery plugin. So, with that said, it requires jQuery (1.2.3 to be exact). Currently, it supports very little, but with the limited functionality it has right now, it's capable of doing quite a bit of interesting things.

You can view a demo of the 'collision detection' and 'keyboard movement' here:

http://projects.zoulcreations.com/jquery/JSGameLib/

Or, better yet, you can view a 'game' written with the library here:

http://projects.zoulcreations.com/games/JSEvilClutches/

Anyone familiar with 'Game Maker' will most likely notice this game as 'Evil Clutches' from 'The Game Makers Apprentice'.

Some small notes on the Demo Game:

It does not seem to work in anything other then Firefox currently, and as I do not have a Mac to test with diligently, I will most likely not have Safari support any time soon -- JSGameLib seems to work fine in IE, Safari and Firefox ... however, the Demo Game has some problems (objects spawn in the wrong place) which is either related to a CSS issue and Firefox is just too forgiving, or it's related to an issue with jQuery not having access to certain pieces of information at the time the values are being set. Either way, I intend to make it support Safari for Mac and hopefully IE for Windows as well.

SQL Server, Drop All Tables in Database Quickly

Just a quick and dirty way of dropping all the tables in a database, without dropping the database itself.  Useful for when your writing data migration scripts and staging data and need to wipe out your development environment real quick ... or, when you've found that uber cool sql-injection-able site and want to wreak some havoc (I don't condone the latter, but I do think its funny from time to time when it happens to the 'big companies').

jQuery Morph Preview

I was looking through some of the features offered by MooTools, and came across the Fx.Morph demo. I liked the look and feel of this and have seen it before in the past. However, in the past, I assumed it worked much like the common jQuery.animate(css,options) function. I actually looked at the demo and realized, it was morphing from one named style to another, without passing the actual style information into the 'animation', just the 'morph to' CSS class.

I did a bit of research, and found out that it's pretty easy to retrieve the current stylesheets and CSS Rules in Firefox (Safari and Opera also support this, to my knowledge) and so, began to create a simple 'jQuery.Morph' plugin for myself. I threw up a quick demo page, that is actually just a pseudo-recreation of the MooTools Fx.Morph demo (same Markup, same Style). You can compare the two and see some minor differences ... namely the background color not fading in as smoothly as it does with MooTools.

I hope to be able to finish this up at some point and release it to the general public.

You can view the preview here:

http://projects.zoulcreations.com/jquery/morph

UPDATE: I looked into the IE Support a bit more and figured out how to use document.styleSheets instead of the original method, and jquery.morph.js has been updated to reflect that.  However, there seems to be a small bug in jQuery 1.2.3 (maybe not so small? ) that is throwing errors in IE when you try to animate things like 'color' and 'overflow' (basically, anything that does not map back to a 'unitable numeric').

This is the offending code, in the _default for the step.  I didn't look through jQuery enough to figure it out (thousands of lines of code without a 'goto definition' isn't fun to debug) but I believe this should be considered a bug ... especially since the code does not validate either before calling this _default function or in the _default function.  As it's a "default" handler, it should assume all possible types of values and gracefully exit if it's "no good".  Which, it appears to do in Firefox, but that could just be because Firefox ignores when you try to set a style to an invalid value, and IE is simply saying "Hey, dummy, you cant do that" (forgiveness is a nice thing, you know?).

WordPress Growl … thoughts?

I am currently working on integrating my recently released 'jQuery Growl' with WordPress 2.5, as an administrative plugin.  Allowing a logged in Site Admin (User Level >= 10) to be notified of system messages such as 'Comment Posted', 'User Logged In', 'Post Published', etc ... as well as allowing the site administrator to enable the 'whose looking' feature which will just log all requests to the site and notify the administrator of every page request ...

Now, due to the large number of requests that would be created if this was 'literally real-time', I'm thinking of limiting the checks to every 10 seconds (possibly providing an override in the options?) and only retrieving the last 10 notices ... if any of them are found in your current 'notice stack', then it will ignore it -- keeping the internal 'notice stack' to 10 items or so.

With that said, I'm curious as to whether or not this is a useless feature, or if people would actually use it

So, let me know.

jQuery Growl 1.0 Released

I've just released jQuery Growl 1.0 'Preview' and submitted it to the jQuery Plugin Repository. jQuery Growl is a jQuery based version of Growl for OS X.

The 'home page' for this plugin is currently located here on Fragmented Code.

I have lots to do to 'finish this up', but this is a pretty solid 'preview release' and is now open to the general public. I implemented something very close to this at the office on Friday, and just couldn't resist releasing a jQuery Plugin (the one at the office uses jQuery, but is tied heavily into the 'framework' we're building there -- its currently proprietary, so ... don't bother asking, but we may release bits and pieces to the public at some point).

A co-worker likes to point out my 'lack of support for IE' when I release code snippets, and ... as such, he pointed out the same 'lack of support' with my jQuery Growl 'demo' template ... my response is,

if you can get IE to act right, I'll support it

With that said, the demo looks a little 'odd' in IE -- however, the demo uses a 'custom' template, the default template works perfectly fine (last I checked it, which was a while ago, *shrug*). The demo is a perfect example of 'templating' the output though ... and your welcome to create as many IE-friendly templates as you want ...

And, on that note ... if you create any custom templates, please, let me know, I'd love to show case them with the plugin ...

Fun with jQuery

I was a bit bored this evening, and was speaking with one of my employers' web designers earlier about jQuery and some of the 'cool' things you can do with it. One of the more interesting things about jQuery, in my opinion, is the 'animate' function. Everything else is cool too, don't get me wrong ... "animate" is just one of the 'cooler' features, to me.

As I'm not a 'designer' or an 'animator', I've never really played with it too much, despite how much it's intrigued me all this time. So, with that, I decided to 'draft' a quirky little prototype of some jQuery animation magic ...

The idea is pretty simple, I have a single H1 tag in my BODY and in $(document).ready() I just grab the .text() and break it out into 'letter parts', hide the original H1 and then append the 'letter parts' into the DOM and run some animations on them ... all while, at the same time, running a generic 'move the box' animation-queue.

You can view this 'Fun with jQuery' demo here:

http://projects.zoulcreations.com/jquery/jquery.animate.html

http://projects.zoulcreations.com/jquery/jquery.slider.html

If you have any interesting ideas for jQuery animations, let me know ... I'd love to see how far this can go ...

UPDATE 2008-04-15: (Added 'jquery.slider.html' reference)

Need a Data Model, take a Data Model.

I was speaking with a co-worker last night; he's working on a project that requires a sample database for a demo he's making, and as with most demo's he was planning to use either the Northwind or AdventureWorks databases from Microsoft.  I made the suggestion of 'googling' for 'sample database' and using something 'not so common' ... however, his requirement relies on 'standard', so he went with AdventureWorks.

I got curious this morning, and decided to run the query myself and came across this interesting website that has quite a large number of 'standard models' already laid out for you in UML Diagrams.

The website is maintained by Barry Williams and is simply called "Database Answers'.

It's not the prettiest site I've ever seen, in fact, it's quite ugly looking to be honest, but I'm not one to judge by looks ... I dug through and looked at a few of the Models presented and was quite impressed with the work put into them.  Everything from ACL (Access Control) to Video Rental and Wedding Management schema's are available ... for FREE!

If your working on a website, or a new application that requires a database schema and your not quite sure how to design it yourself ... give this great web resource a try and check it out.  The site even comes pack with Tutorials to show you how to work with the Models provided.

Can't beat that, eh?

iPhone… as a Desktop Workstation?

I just read over an interesting article from Hamid Shojaee, about a "thought experiement" that he and Angelo Coppola performed recently. The end result, a concept that is most likely not too 'far fetched' to actually become reality ... sooner then some people might think.

The idea is pretty simple, take an iPhone, 'dock it' to a 17" Monitor 'base station', toss a bluetooth keyboard and mouse into the picture ... and, Viola!

I don't believe I can say much about the idea that Hamid or Angelo haven't already, so, give their articles a read ... I'm pretty sure you'll be picking up your jaw and wiping the drool off your keyboard before you get to the end.

The original articles can be found here:
Hamid  -> iPhone Desktop: Unleash the Leopard in Your Pocket. $299.
Angelo -> Set the Leopard Free

SWFObject, ExternalInterface and Internet Explorer

I was working on something earlier today, and became so frustrated with it that I just got up and went home early for the day.  I was very pleased with the work I had completed to this point, and as soon as I launched the dreaded Internet Explorer browser to 'test compatibility' ... I immediately threw my arms up in the arm and spouted out a handful of expletives.

I created a very simple Video player in Adobe Flex 2.0, and exposed all of its functionality through ExternalInterface so that a javascript framework I am working on could communicate with it -- allowing for 'media controllers' (play, stop, pause, forward, backward, rewind, progress, etc) could be rendered to the page using HTML and CSS.  I had the following general code in my Adobe Flex application:

I dropped a reference to my compiled SWF onto the page using the latest SWFObject 2.0, recently released on Google Code. I even back-ported it to the last 1.5 release on blog.deconcept.com, when it failed initially ... assuming, of course, that the 2.0 release was still 'buggy'.  I stood corrected.

I did some research, and found a few posts related to the issue, one that I found more or less 'ensuring' was Mihai Bazon's.  He basically stated that to accomplish the ExternalInterface integration to my page, I'd have to load my SWF's with the initial page ... well, this is sort of a 'oops, would have been nice to know this AHEAD OF TIME' thing, as it makes quite a few changes to the framework a requirement.  Especially since Flash Video's are going to be one of the driving forces to the end result.

So, with that ... Mihai suggests that you can load the SWF's dynamically still, if you load them into an IFRAME.  This seems like a logical solution, but I had another alternative idea ... which is to use Flash's LocalConnection system to 'relay' the events, and simply loading a small lightweight 'listening server' on the page at 'page load' which can be passed the 'destination' and the 'method' with 'arguments'.  Now, to pull this off, all dynamically loaded SWF's on the page would have to implement the same basic startup process ... Which would go something like:

Pass a static param into the 'listener server', this represents it's "LocalConnection Name" that it will listen on

Pass the same param into all the dynamically loaded SWF's that will 'attach' to the 'listener server'

Once the dynamically loaded SWF is done, in it's "creationComplete" it can simply connect to the 'listener server' and ask to be an event handler.

When you have javascript on the page that needs to execute some ActionScript in a dynamically loaded SWF, the Javascript can tell the 'listener server' and then the 'listener server' can basically 'relay' the information to the handler.

Now, I've only thought about this for a few minutes ... and I haven't tried to put it into practice, not sure if I can 'late bind' "external interface callbacks" with the "early-load" SWF ... or if all the "addCallback" methods have to be executed as part of the "creationComplete" process or not.  Knowing what I know so far of ActionScript and Flash, I'm thinking it's just some sort of a goofy limitation either with the Flash Player 9 Plugin ... or with the way Internet Explorer allows plugins access to the page's JavaScript run-time.

Either way, I'll probably be trying to put one of the two idea's into practice, as it will be a required feature set for the framework I'm building.

I'll write more about the final solution, and possibly some example code for those who may be struggling with the same issue.