Good Progress

This evening, I was able to knock out features 2, 10, and 12.

There is now a winning animation that uses some cheerleader icons from IconBuffet.

The load time is pretty much instantaneous now.

The player now has the ability to save the state of his game and later restore it.

Most recently, my game development environment of choice has been HTML with JavaScript.  Usually, I start out the game pretty bare bones, with nothing more than a <DIV> tag in the HTML, and I use JavaScript to bootstrap the content into there.  The entirety of playdeez.com works this way.  The pages themselves consist of empty <BODY> tags and a bunch of scripts.

For example, the HTML behind the page with connect on it looks like:

		<title>PlayDeez Games</title>
		<link rel="stylesheet" type="text/css" href="styles/standard.css" />
	<body id="pagebody">
	<script src="scripts/common/pagebody.js"></script>
	<script src="scripts/common/titlepanel.js"></script>
	<script src="scripts/common/sidebar.js"></script>
	<script src="scripts/common/utilities.js"></script>
	<script src="scripts/jsconnect.js"></script>
	<script src="scripts/jsconnect/connect.js"></script>

As you can see… not much there.  All of the work is done in the JS files.  All of my layout stuff is in the scripts in scripts/common.

Typically, when I am building a page in  this manner, I build up a string filled with HTML, and at some point find an object in the DOM and set that objects innerHTML to the string I generated.

When I started putting together Connect! (which actually began as a Yahoo! Widget, which is why I made some of the architectural decisions I did), I instead APPENDED strings with HTML to the innerHTML of my main <DIV>.  For a Connect! board with 64 nodes, 56 vertical connectors, 56 horizontal connectors, a background image, a cheerleader image, and 6 buttons,  thats close to 200 DOM objects getting inserted, one at a time, into another DOM object.  No wonder it seemed to take forever to load.

So, I switched the code so that it instead build up a string as it went, and only put the objects into the DIV at a single time.  The result: nearly instant load.

And yet another valuable lesson learned about manipulating the HTML DOM with JavaScript


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s