Gaming Engine - Snake Demo v2

Last week I was busy at GDC and have not had time to put together a detailed article, so in the spirit of GDC, I thought I would share the latest iteration of my HTML5 gaming engine (still very rough).

There has been a lot of progress around the Game class to support stages (or levels) and a score board to track the player’s score. The stages are demoed by a new version of the Snake game where collecting five powerups will cause a new and slightly more difficult map to render. This showcases a fully functioning Snake game: a movable snake, score incremented and snake grown by picking up powerups, and levels changing over time. Please try the Snake game demo and let me know your thoughts or any issues you experience.

Eventually, I will revisit Snake to add enemies and eventually some type of multiplayer, but my next step for the platform will be to try out one or two other games to see how it holds up. I’ll share them with you when they are ready.

You can read more about the original release at Introducing Gaming Engine - Snake Demo v1.

Using Promises to Cache Static AJAX JSON Data

This article showcases a useful caching strategy for static data that is fetch via AJAX. We will use jQuery to setup a promise and cache the data in the localStorage for subsequent page loads or data loads.

Getting ready

A modern web browser supporting localStorage and JSON. Also, a basic understanding of promises[2] is helpful.

How do it…

Here is the code:
 (function($) { var oKeyDeferredMap = {}; function fnReadData(sKey) ...

Introducing Gaming Engine - Snake Demo v1

In my not so copious spare time over the past few months, I’ve been working on a game engine to power two dimensional board-based games. The engine has a long way to go, but I have reach the first demo milestone and wanted to share it with you. Here is a basic version the snake game written using the game engine. It illustrates a working main thread, responsiveness to keyboard commands, interaction between a ...

jQuery Function for Change Event and Delayed Keydown Event

In my experience, it is rare to assign only a change event to a text input, as any callback that would be executed for the change event should also be called on a key event as well, but with a slight delay (think how an autocomplete shows results as you type). This is a common pattern and I was surprised to not immediately find a jQuery plugin implementing it, so I decided to add one ...

jQuery Widget for Dynamic Input Helper Text

This is a proof of concept widget that I demoed for work. The desire is to update some text according to a regex and replacement, when an input field changes. This will allow developers to show a message and/or format the input value, so users understand they do not need to enter meta characters and see the result of their input (think phone or identification numbers). I built a simple jQuery plugin that can be ...

YUI Port of jQuery TipTip Plugin

This article explains and shares the implementation of the light-weight jQuery plugin TipTip port to YUI. The goal is to clone the plugin behavior, as closely as possible, using YUI.

Getting ready

Read up on the TipTip tooltip plugin. You will find all the documentation for configuring the TipTip widget: TipTip jQuery Plugin. The YUI code is a clone of version 1.3.

How do it…

Download and include the yui.tiptip.plugin in ...

jQuery Attach Focus and Blur Function

Todays code snippet uses jQuery to attach blur and focus listeners to an input element, so default text is shown (like "enter your username") and that text is cleared when the user focuses into the field.

Getting ready

Setup an input element somewhere on the page:
<input id="myInputId" type="input"/>
And setup the following CSS class to handle the focusing styles:
.unfocused { color: #999; }

How to do it…

Here is the function: ...

Animation Comparison of 3 Top Libraries

There are many conversations between designers and engineers that go back and forth about the performance of animations in JavaScript. Often there is an expectation of animations to run consistently (same speed, same step size, same in all browsers, etc.), and as awesome as that would be, this pushes at the limitations of JavaScript. Many designers experience a great working animation on a demo page, and in turn, expect that the animation can be plugged ...

jQuery vs Prototype from Brian Dillard

I saw this post on one of my favorite blogs, Agile Ajax. Despite the title, it is not an analysis of jQuery versus Prototype but a discussion of the OOP design of the two Frameworks. I like Brians analogy of Prototype being JavaScript with training wheels and other Frameworks like programming without training wheels. Using Prototype has a tendency to make coders lazy, attaching everything to the this operating and using event and function binding ...