Overview

Roland S

General Information

Game of Life JS is a jQuery Plugin that can be used on any page just by adding a small Javascript Snippet.

The project is coded among the Coding Conventions and Extension principles of jQuery (Plugin Authoring).

The developers are happy about help and critics on their work. Feel free to help improving the project.

Usage

Needed Libraries

  • (Mandatory) jQuery: min¹ v1.6.2, Download
  • (Optional) OpenAjax Hub 2.0: v2.0, Download
    • Sends an Event on Game activation and deactivation. Used on our site, to prevent navigation on the blocks used for the game. Otherwise the user would not be able to de-/select blocks.

Example

Header includes

<head>
    ....
    <script type="text/javascript" src="js/OpenAjaxUnmanagedHub.js" ></script>
    <script type="text/javascript" src="js/jquery-1.6.2.js"></script>
    <script type="text/javascript" src="js/gol.js"></script>
    ...
</head>

The Javascript files must be located in a directory name js that is located in the same directory as the html file.

Javascript

$('#logo').gameOfLife({
    selectorForElements: '.logo_item',
    selectorForInitDeadClass: '.logo_item_back',
    selectorForInitAliveClass: '.logo_item_front',
    menuId: 'golMenu'
});

Some Parameters are passed to the plugin. These are explained in the Parameters section.

HTML

<div id="logo" class="logo">
        <div class="logo_item logo_item_back"> </div>
        <div class="logo_item logo_item_back"> </div>
        <div class="logo_item logo_item_back"> </div>
        <div class="logo_item logo_item_back"> </div>
        <div class="logo_item logo_item_back"> </div><br style="clear: left"/>
        <div class="logo_item logo_item_back"> </div>
        <div class="logo_item logo_item_back"> </div>
        <div class="logo_item logo_item_back"> </div>
        <div class="logo_item logo_item_back"> </div>
        <div class="logo_item logo_item_back"> </div><br style="clear: left"/>
        <div class="logo_item logo_item_back"> </div>
        <div class="logo_item logo_item_back"> </div>
        <div class="logo_item logo_item_back"> </div>
        <div class="logo_item logo_item_back"> </div>
        <div class="logo_item logo_item_back"> </div>
</div>
<div id="golMenu"> </div>

The boxes for the game are displayed and additionally an element for the menu.

¹ Could work with older Version but not tested. Inform one of the developers or write a Ticket, if you have new information