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.
Draw Hexagonal Shapes with HTML5 and JavaScript
HTML5 introduces the canvas tag which makes drawing a snap.
Here are two examples showing how to draw a hexagon, one using the HTML5 canvas and the other--a technique involving a grid.
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.
Building Dynamic User Interfaces from JSON
You don't need to resort to a framework to build UI for AJAX applications on the web.
Here are some examples showing how to construct user interfaces which consume JSON.
In the case of building a data table dynamically, the JSON can allow your data to specify the columns and data
and make your code reusable without needing to modify it each time you want to build a new variant.
Similarly, plotting data onto a graph using HTML5 can also be done dynamically, in a reusable fashion.
Javascript / DHTML Calendar Example
This example builds a date widget/calendar using Javascript date object, some CSS, and HTML.
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.
Modal Exit Dialog Example
This example shows how to utilize functionality in the browser to allow a user to save their work before they exit a page accidentally.
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.
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...
|
|
