The Basics

The game is simple, you are given an empty game board, which you fill in by placing randomly colored blocks down. When the blocks create a rectangle of the same color, the blocks inside the rectangle and the rectangle itself are cleared from the board earning you points. However, every 1 second the computer randomly clears a block.

The game is a little buggy at present, and I'm still open to taking it different directions, such as making the game board slowly erode away or drop down every few clicks so it's a race against time.

0 points -

Demo setup:

$(function() {
    var $p = $('#points');
    $p.levelup({'start' : 0});
    var $c = $('#container');

    $('#start').on('click', function(event) {

        var debugmode = $('#debugoption option:selected').text();
        if (debugmode === 'Off') {
            debugmode = false;
        } else {
            debugmode = true;

        $c.boxGame({rows: 20, cols: 20, offColor: 'white', debug : debugmode});

        $c.on('color-change', function(event, color) {
            $('#currentColor').css('background-color', color);

        $c.on('points-earned', function(event, points) {
            $p.levelup('increment', points);



Basically just include the file.

<script src="//"></script>
<script src="/libs/jquery-box-game/"></script>

<div id='container'></span>

    $('#container').boxGame({rows: 20, cols: 20});


Name Type Default Description
rows integer 50 Number of rows.
cols integer 50 Number of columns.
offColor css color string white Background color for the board.
colors array of css color strings ['black', 'green', 'lightgreen', 'lightblue', 'blue', 'red'] Colors for the blocks

method param type description
'start' start the game (or reset the game)


Event Handler
color-change function(event, color):
- event - jQuery event
- color - next block color
points-earned function(event, points):
- event - jQuery event
- function(event, points) - points earned


Apache License 2.0