jquery-box-game

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.

Demo setup:

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

    $('#start').on('click', function(event) {
        event.preventDefault();
        $('#log').empty();

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

        $c.empty();
        $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);
        });

        $c.boxGame('start');
    });
});

Installation

Basically just include the file.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/libs/jquery-box-game/jquery.box-game.js"></script>

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

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

Usage

Events

License

Apache License 2.0