Building a PONG game with the j5g3 Javascript Game Engine

December 1st, 2011

I wrote a tutorial on how to build a simple game of pong using my Javascript HTML5 Game Engine j5g3.

The tutorial can be found at j5g3.coaxialhost.com/tutorials/pong.html.

Random Isometric Map Generation

January 14th, 2011

My new JS demo uses HTML5 Canvas to generate a random isometric map. You can see it in action here:

Isometric Demo

The algorithm is simple, it selects four random points and then grows recursively until all the map is filled.

HTML5 for IE

January 13th, 2011

This script allows you to use HTML5 tags (nav, header, footer, etc) in Internet Explorer 7 and 8.

To use it put this code in your page:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Preventing Text Selection using Javascript and Event Handlers

January 12th, 2011

To prevent text selection of any element use:

in Firefox, Opera and Webkit based browsers (Chrome, Safari, etc) this can be achieved by setting a CSS property.

-webkit-user-select:none;
-moz-user-select:none;
-o-user-select: none;
user-select: none;

user-select is part of the CSS3 standard.

For IE < 9 we have two options:

Using javascript:

onselectstart="return false;"

and using the HTML attribute

unselectable="on"

Ruby Ternary Search Tree Implementation

January 10th, 2011

Simple Ternary Search Tree Implementation in Ruby.

Currently supports:

My Home Setup

December 30th, 2010

IMAG0538

Close Up

IMAG0535

Simple, yet Powerful ™

Custom Validation Messages for jquery-validate plugin

October 5th, 2010

The jquery.validate plugin allows us to define our own custom validation methods and messages like this:

$.validator.addMethod("equal_to", function(value, element, params) {
    return value == condition;
}, message);

The interesting thing here is that message can be a function. We have complete access to the value, element and parameters of the input validation method.

Assuming our HTML is this:

<input type="text" equal_to="obj_id" />

Our equal_to method can be written like this:

var message = function(value, element, params) {
   var expected = document.getElementById(params).value;
   return value + " is not equal to " + expected;
}

This feature is useful when trying to implement validation methods, like greater_than_element or greater_date, that need additional information to generate their validation messages.

HTML5 Carousel/Slideshow

August 28th, 2010

This is my new script. An image carousel/slideshow made in Javascript (no frameworks, HTML5 browsers).
It uses the new figure, figcaption HTML5 tags, and css3 opacity, transition, text-shadow and border-radius.

Demo and Code
Documentation
GitHub Development Page

The script was tested in Chrome 5.0. Submit Bugs and comments to github page.

Qt + Boost Spirit Logo Interpreter

May 21st, 2010

This is a logo interpreter i have been working on:

http://code.google.com/p/qslogo/

It uses Boost.Spirit for parsing and Qt for the GUI.

Javascript Inheritance

October 14th, 2009

Inheritance in Javascript is pretty simple.

function Child(arg1, arg2)
{
    Parent.apply(this, arguments);
    // .. other methods
}

The apply function calls the Parent function with arguments and sets this to Child’s this object. The arguments variable contains all the arguments passed to Child. (Available since Javascript 1.2).

To create an instance of Child call:

    var instance = new Child(x, y);