Using Javascript To Create Games
It may be a little unconventional, but JavaScript is actually really fun to use to write games that will run in a web browser without plugins or special software.
Here are some examples of games in varying states of completion.
Take a moment to view the source to see how to do the animation, board building, game loop, and other game programming tricks using JavaScript to create and drive HTML and CSS.
Phone Number Auto Focus Example
A client was using customer phone numbers to look up account info.
They wanted a form which would automatically move the focus to the next control
when the customer entered the expected number of digits into each field, ending
on the submit button.
This code does that.
Javascript / DHTML Calendar Example
An example which builds a cool dynamic html calendar using the Javascript date object.
It uses the MSIE 5.0+ DOM to create some MOUSEOVER/MOUSEOUT effects.
Sorry for the proprietary DOM usage... at some point I'll rewrite this example using
DOM compliant code. (Note: at this point 90+% of users can run this example
despite the proprietary nature of the code.)
Expose DOM Elements
A quick way to introspect an HTML/DOM object and enumerate it's properties and their actual instantiated values.
I use this frequently in IE where the Firebug plug-in popular in FF isn't available.
Javascript Letter WOW Example
CSS LetterSpacing Effect + dynamic HTML.
The effect uses a Javascript timer to expand and contract the space between letters.
Dynamic Pop Up and Exit Examples
This example pre-loads an image, determines it's width and height,
and creates (or resizes) a pop up child window and renders the image in that child.
CSS Interface
Cascading Style Sheets are very powerful.
By using them to implement site designs and interface you can save serious time.
When implemented externally and called in through the <LINK> tag simple changes can have wide impact.
Since the time these were built in an effort to make an argument for styling using CSS rules rather than the font tags and non-structural HTML tags from the old days, much better examples of CSS have been created.
Check out the links toward the bottom of the list to see some far better design examples which use CSS to drive them.
Window Onload and Resize Example
An example using Javascript to capture an onload or onresize event and cause an action to be triggered.
Scrolling Menu
An example that uses DHTML, Javascript, and CSS to build a responsive HTML
scrolling menu. The example works for Internet Explorer 4 and higher.
This example demonstrates how to use events with table elements and how
to use DIV to render responsive hot zones on menu items which can receive and
act on a variety of events.
Drop Menu
An example that uses DHTML, Javascript, and CSS to build a menu which will open and
close when clicked. This example is still being developed. It also illustrates
one of the biggest frustrations about Netscape 4.x namely that it's DOM (Document
Object Model) is far less useful than IE's DOM.
Dynamic Arrays
An example that uses JavaScript to create dynamic arrays which associate an image
and a url to link to if the image is clicked. When one of the images is mousedover
a larger version of the number is swapped in a central graphic. With this method
a dynamic image swap can be done (with pre-cached images) and dyamic links can be associated
with the images. A nifty example and done in cool colors.
CSS Form Input and Button Style Beautification
These examples were created to illustrate the ability of CSS to influence the
appearance of HTML FORM controls. This was an effort to convince the developers
at Freeservers.com to use HTML buttons instead of the images in their interface
for contextual HELP.
One serious disadvantage to using images in this context is they require an additional trip
to the server to grab the image, or many additional trips if you have browser caching turned
off as most developers do.
Worse, if you want to add dynamic behaviors such as a highlight when the
mouse moves over the buttons, or to simulate the button depressing when a click occurs on it, these are done with image swaps which
require more trips to the server... and at the worst possible time from an animation perspective.
This process can be excrutiating when you are expecting instantaneous interactions on the part
of the interface.
So the obvious solution is to use HTML FORM controls in the interface instead of a graphic because they can react instantly to user interaction.
The problem was that pre-CSS you couldn't "beautify" the ugly gray buttons. This is a problem no longer...
Additional Resources
|
|
