EffectHub.com: your best source for gaming

Recommendation

More Effects...

/**
 * Cookie plugin
 *
 * Copyright (c) 2006 Klaus Hartl (stilbuero.de)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 */

/**
 * Create a cookie with the given name and value and other optional parameters.
 *
 * @example $.cookie('the_cookie', 'the_value');
 * @desc Set the value of a cookie.
 * @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
 * @desc Create a cookie with all available options.
 * @example $.cookie('the_cookie', 'the_value');
 * @desc Create a session cookie.
 * @example $.cookie('the_cookie', null);
 * @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
 *       used when the cookie was set.
 *
 * @param String name The name of the cookie.
 * @param String value The value of the cookie.
 * @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
 * @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
 *                             If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
 *                             If set to null or omitted, the cookie will be a session cookie and will not be retained
 *                             when the the browser exits.
 * @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
 * @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
 * @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
 *                        require a secure protocol (like HTTPS).
 * @type undefined
 *
 * @name $.cookie
 * @cat Plugins/Cookie
 * @author Klaus Hartl/klaus.hartl@stilbuero.de
 */

/**
 * Get the value of a cookie with the given name.
 *
 * @example $.cookie('the_cookie');
 * @desc Get the value of a cookie.
 *
 * @param String name The name of the cookie.
 * @return The value of the cookie.
 * @type String
 *
 * @name $.cookie
 * @cat Plugins/Cookie
 * @author Klaus Hartl/klaus.hartl@stilbuero.de
 */
jQuery.cookie = function(name, value, options) {
    if (typeof value != 'undefined') { // name and value given, set cookie
        options = options || {};
        if (value === null) {
            value = '';
            options.expires = -1;
        }
        var expires = '';
        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires == 'number') {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
        }
        // CAUTION: Needed to parenthesize options.path and options.domain
        // in the following expressions, otherwise they evaluate to undefined
        // in the packed version for some reason...
        var path = options.path ? '; path=' + (options.path) : '';
        var domain = options.domain ? '; domain=' + (options.domain) : '';
        var secure = options.secure ? '; secure' : '';
        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
    } else { // only name given, get cookie
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};

/*****************************************************************************************/
// Globals
/*****************************************************************************************/

// canvas dimensions
var WIDTH = 500;
var HEIGHT = 500;

// pit dimensions
var PIT_WIDTH  = 5;
var PIT_HEIGHT = 5;
var PIT_DEPTH  = 10;

// fake perspective
var ZSIZE_X = 30; 
var ZSIZE_Y = 30;

// color constants
var PIECE_COLOR = [50,0,90];
var BG_COLOR = "#000";

// cube rendering style
var CUBE_PLAIN = 0, CUBE_GRADIENT = 1;

var CUBE_STYLE = CUBE_PLAIN;
var CUBE_OUTLINE = "#000";

var FORCE_DEPTH_COLOR = 1;

var LINEWIDTH_CUBE = 0.5;
var LINEWIDTH_PIT = 0.35;

// game speed
var SPEED = 2;
var SPEED_MAP = {
    0:0,
    1:2000,
    2:1000,
    3:500,
    4:250,
}
var AUTOFALL_DELAY = SPEED_MAP[SPEED];

// animation
var ANIM_DURATION = 150;
var FRAME_DELAY = 10;

var DELTA = 1;
var DELTA_ANGLE = Math.PI/2;

// pieces
var SET = "basic";

// piece shapes
var TEMPLATES = {
    
// 2D polyominoes 
'flat': [
    [ ["x"] ],
    
    [ ["xx"] ],

[ ["xxx"] ],

[ ["xx",
       "x "] ],
    
    [ ["xx",
       "xx"] ],
    
    [ ["xxx",
       " x "] ],
    
    [ ["xx ",
       " xx"] ],

[ ["xxx",
       "x  "] ]
],

// Polycubes of order three or four
"basic": [    
    [ ["xx",
       "x "] ],
       
    [ ["xxx",
       " x "] ],
       
    [ ["xx ",
       " xx"] ],

[ ["xxx",
       "x  "] ],

[ ["xx",
       "x "],
      [" x",
       "  "] ],

[ ["xx",
       "x "],
      ["  ",
       "x "] ],

[ ["xx",
       "x "],
      ["x ",
       "  "] ]
],

// All n-polycubes up to n=5
"extended": [   
    [ ["x"] ],
    
    [ ["xx"] ],

[ ["xxx"] ],

[ ["xxxx"] ],

[ ["xxxxx"] ],
    
    [ ["xx",
       "x "] ],
    
    [ ["xx",
       "xx"] ],
    
    [ ["xxx",
       " x "] ],
    
    [ ["xx ",
       " xx"] ],

[ ["xxx",
       "x  "] ],

[ ["xxx",
       "x  ",
       "x  "] ],

[ ["xxx",
       " x ",
       " x "] ],
    
    [ [" x ",
       "xx ",
       " xx"] ],
       
    [ ["xx ",
       " x ",
       " xx"] ],

[ ["x  ",
       "xx ",
       " xx"] ],

[ ["x   ",
       "xxxx"] ],

[ [" x  ",
       "xxxx"] ],

[ ["x x",
       "xxx"] ],

[ ["xx ",
       "xxx"] ],

[ ["  xx",
       "xxx "] ],
       
    [ [" x ",
       "xxx",
       " x "] ],
       
    [ ["xxx",
       "x  "],
      ["   ",
       "x  "] ],
       
    [ ["xxx",
       "  x"],
      ["   ",
       "  x"] ],
       
    [ ["xxx",
       " x "],
      ["   ",
       " x "] ],
       
    [ ["xxx",
       "x  "],
      [" x ",
       "   "] ],
       
    [ ["xxx",
       "  x"],
      [" x ",
       "   "] ],
       
    [ ["xx ",
       " xx"],
      ["x  ",
       "   "] ],
       
    [ [" xx",
       "xx "],
      ["  x",
       "   "] ],
       
    [ [" x ",
       "xx "],
      [" xx",
       "   "] ],
       
    [ [" x ",
       " xx"],
      ["xx ",
       "   "] ],
       
    [ ["xxx",
       "  x"],
      ["x  ",
       "   "] ],
       
    [ ["xxx",
       "x  "],
      ["  x",
       "   "] ],
       
    [ ["xx",
       "x "],
      [" x",
       "  "] ],
       
    [ ["xx",
       "x "],
      ["  ",
       "x "] ],

[ ["xx",
       "x "],
      ["x ",
       "  "] ],
       
    [ ["xxx",
       " x "],
      [" x ",
       "   "] ],
       
    [ ["xx",
       "xx"],
      ["x ",
       "  "] ],
       
    [ ["xxx",
       "x  "],
      ["x  ",
       "   "] ],
       
    [ [" xx",
       " x "],
      ["xx ",
       "   "] ],
       
    [ ["xx ",
       " x "],
      [" xx",
       "   "] ],
       
    [ ["xx",
       " x"],
      ["  ",
       "xx"] ],
]
};

// controls
var KEYCODES = {
8:"backspace",
9:"tab",
13:"enter",
16:"shift",
17:"control",
18:"alt", 
20:"caps lock",    
27:"escape",
32:"space",
33:"page up",
34:"page down",
35:"end",
36:"home",    
37:"left arrow",
38:"up arrow",
39:"right arrow",
40:"down arrow",
45:"insert",
46:"delete",
59:";",
188:",",
189:"-",
190:".",
191:"/"
}

var KEYMAP_DEFAULT = {
"X+" :39, // right
"X-" :37, // left
"Y+" :40, // down
"Y-" :38, // up
"Z+" :90, // y
"Z-" :88, // x

"A+" :81, // q
"A-" :65, // a
"B+" :87, // w
"B-" :83, // s
"C+" :68, // d
"C-" :69 ,// e

"D"  :32  // space
};

var CACHE_PIT = 0, CACHE_LAYERS = 0, CACHE_SHADOW = 0;

var START, END, ELAPSED;
var ID1 = -1, ID2 = -1;

// game state
var STATE = {"setkeys":0};

// pause
var PAUSE_ANIM = 1;
var PAUSE_WORMS = 1;
var N_ELEMENTS = 250;
var PAUSE_ELEMENTS = [];
var DP = 0;

// highscore
var HIGHSCORE = {};
    
/*****************************************************************************************/
// Pieces
/*****************************************************************************************/
function precompute_pieces() {
    for(var set in TEMPLATES) {
        PIECES[set] = [];
        for(var i=0; i<TEMPLATES[set].length; ++i) {
            var piece3d = generate_piece(TEMPLATES[set][i]);
            var bb = bbox(piece3d.lines);
            
            // center of the piece (middle of bounding box)
            var cx = bb.x[0]+(bb.x[1]-bb.x[0])/2.0;
            var cy = bb.y[0]+(bb.y[1]-bb.y[0])/2.0;
            var cz = bb.z[0]+(bb.z[1]-bb.z[0])/2.0;
            
            // align rotation on full cubes
            cx = Math.floor(cx);
            cy = Math.floor(cy);
            cz = Math.floor(cz);
            
            PIECES[set][i] = {
            'lines' :piece3d.lines,
            'voxels':piece3d.voxels,
            'cx'    :cx,
            'cy'    :cy,
            'cz'    :cz,
            'bb'    :bb
            };
        }
    }
}

function generate_layers(width, height, depth) {
    var layers = [];
    
    for(var z=0; z<depth; ++z)
        layers.push(generate_layer(width, height));
    
    return layers;
}

function generate_counts(layers) {
    var depth  = layers.length;
    var height = layers[0].length;
    var width  = layers[0][0].length;

function init_colors(depth) {
    COLORS = [];
    var h,s,l,a;
    var pie = 360/(depth-0.5);
    for(var i=0; i<depth; ++i) {
        h = i*pie;
        s = 90;
        l = 50;
        a = 1.0;
        COLORS.push([h,s,l,a]);
    }
}

/*****************************************************************************************/
// Random
/*****************************************************************************************/
function rand_range(lo, hi) {
    return Math.round(lo + (hi-lo)*Math.random());
}

/*****************************************************************************************/
// Text
/*****************************************************************************************/
function pretty_number(x) {
    var delimiter = "'";
    var strx = x.toString();
    var pretty = "";
    for(var i=strx.length-1; i>=0; i-- ) {
        if((strx.length-1-i) % 3 == 0 && (strx.length-1-i) > 0)
            pretty = delimiter+pretty;
        pretty = strx[i]+pretty;
    }
    return pretty;
}

/*****************************************************************************************/
// Math
/*****************************************************************************************/
function cap(val, max) {
    if(val>max) return max;
    return val;
}

/*****************************************************************************************/
// Geometry
/*****************************************************************************************/
function project(cwidth, cheight, width, height, x,y,z) {        
    var offsetx1 = z*ZSIZE_X-z*z;
    var offsety1 = z*ZSIZE_Y-z*z;
    
    var xsize1 = (cwidth-2*offsetx1)/width;
    var ysize1 = (cheight-2*offsety1)/height;
    
    var px = Math.round(offsetx1 + x*xsize1);
    var py = Math.round(offsety1 + y*ysize1);
    
    return {'x':px, 'y':py};
}

function translate(p, t) {
    return [p[0]+t[0], p[1]+t[1], p[2]+t[2]];
}

function rotate(p, angles) {
    // X-axis
    var cos = Math.cos(angles[0]);
    var sin = Math.sin(angles[0]);
    
    var x = p[0];
    var y = p[1] * cos - p[2] * sin;
    var z = p[1] * sin + p[2] * cos;
    
    // Y-axis
    cos = Math.cos(angles[1]);
    sin = Math.sin(angles[1]);
    
    var a = x * cos - z * sin;
    var b = x * sin + z * cos;
    x = a;
    z = b;
    
    // Z-axis
    cos = Math.cos(angles[2]);
    sin = Math.sin(angles[2]);
        
    a = x * cos - y * sin;
    b = x * sin + y * cos;
    x = a;
    y = b;
    
    return [x,y,z];
}

/*****************************************************************************************/
// Rendering
/*****************************************************************************************/
function line3d(ctx, cwidth, cheight, width, height, s, e, color) {
    var p1 = project(cwidth, cheight, width, height, s[0],s[1],s[2]);
    var p2 = project(cwidth, cheight, width, height, e[0],e[1],e[2]);
    
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.moveTo(p1.x, p1.y);
    ctx.lineTo(p2.x, p2.y);
    ctx.stroke();
}

function point3d(ctx, cwidth, cheight, width, height, s, color, radius) {
    var p1 = project(cwidth, cheight, width, height, s[0],s[1],s[2]);
    
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(p1.x, p1.y, radius, 0, 6.28, 0);
    ctx.fill();
}

function render_cube(canvas, ctx, width, height, depth, x,y,z, color, faces, outline) {
    var cwidth = canvas.width;
    var cheight = canvas.height;
        
    // This breaks Opera, no idea why expanded expressions work
    /* 
    var offsetx1 = z*(ZSIZE_X-z);
    var offsety1 = z*(ZSIZE_Y-z);
    
    var offsetx2 = (z+1)*(ZSIZE_X-(z+1));
    var offsety2 = (z+1)*(ZSIZE_Y-(z+1));    
    */
    var offsetx1 = z*ZSIZE_X-z*z;
    var offsety1 = z*ZSIZE_Y-z*z;
    
    var offsetx2 = z*ZSIZE_X-z*z-z+ZSIZE_X-z-1;
    var offsety2 = z*ZSIZE_Y-z*z-z+ZSIZE_Y-z-1;
    
    var xsize1 = (cwidth-2*offsetx1)/width;
    var ysize1 = (cheight-2*offsety1)/height;
    
    var xsize2 = (cwidth-2*offsetx2)/width;
    var ysize2 = (cheight-2*offsety2)/height;

var left1   = Math.round(offsetx1 + x*xsize1);
    var top1    = Math.round(offsety1 + y*ysize1);
    var right1  = Math.round(left1 + xsize1);
    var bottom1 = Math.round(top1 + ysize1);
    
    var left2   = Math.round(offsetx2 + x*xsize2);
    var top2    = Math.round(offsety2 + y*ysize2);
    var right2  = Math.round(left2 + xsize2);
    var bottom2 = Math.round(top2 + ysize2);
    
    var cx = 0.5*width;
    var cy = 0.5*height;
    
    /*
    // bottom side
    ctx.fillStyle = "#aaa";
    ctx.strokeStyle = "#000000";
    ctx.fillRect(  left2, top2, xsize2,ysize2);
    ctx.strokeRect(left2, top2, xsize2,ysize2);
    */

if(outline)
            ctx.strokeStyle = outline;
        else
            ctx.strokeStyle = topcolor;
        ctx.fillRect  (left1, top1, xsize1,ysize1);
        ctx.strokeRect(left1, top1, xsize1,ysize1);
    }
}

function render_layers(canvas, ctx, layers, refresh_flag) {
    var outline = CUBE_OUTLINE;
    
    if(CACHE_LAYERS == 0 || refresh_flag) {
        //draw_pit(canvas, ctx, PIT_WIDTH,PIT_HEIGHT,PIT_DEPTH);
        
        // render bottom->top order
        for(var i=layers.length-1; i>=0; --i)
            render_layer(canvas, ctx, layers[i], i, outline, layers.length);

if(CACHE_LAYERS == 0) {
            var cache = $("<canvas></canvas>");
            cache.css("display","none");
            $("body").append(cache);
            cache.attr('width', canvas.width).attr('height', canvas.height);
            CACHE_LAYERS = cache.get(0);
        }
        CACHE_LAYERS.getContext("2d").drawImage(canvas,0,0);
        STATE.refresh_layers_flag = 0;
    }
    else {
        ctx.drawImage(CACHE_LAYERS,0,0);
    }
}

function render_pit(canvas, ctx) {
    draw_pit(canvas, ctx, PIT_WIDTH,PIT_HEIGHT,PIT_DEPTH, 1);
    render_layers(canvas, ctx, LAYERS, 1);
    
    // transparent overlay layer below shadow
    ctx.fillStyle = "rgba(25,25,25,0.75)";
    ctx.fillRect(0,0, canvas.width, canvas.height);

render_shadow(canvas, ctx, 100, 0, 1);
}

/*****************************************************************************************/
// Voxels
/*****************************************************************************************/
function bbox_piece(shape) {
    var width = shape[0][0].length;
    var height = shape[0].length;
    var depth = shape.length;
    return { 'width':width, 'height':height, 'depth':depth };
}

function project_voxels(piece, x,y,z, angles) {
    var voxels = [];
    var cx = piece.cx;
    var cy = piece.cy;
    var cz = piece.cz;
    for(var i=0; i<piece.voxels.length; ++i) {
        var p = translate(piece.voxels[i], [-cx,-cy,-cz]);
        var r = translate(rotate(p, angles), [x+cx,y+cy,z+cz]);
        r[0] = Math.floor(r[0]);
        r[1] = Math.floor(r[1]);
        r[2] = Math.floor(r[2]);
        voxels.push(r);
    }
    return voxels;
}

function overlap_diff(voxels, pwidth, pheight, pdepth) {
    var dx = 0, dy = 0, dz = 0;
    
    var bbox = bbox_voxels(voxels);
    
    // no delta if voxels are bigger than pit
    if(!(bbox.x[0]<0 && bbox.x[1]>=pwidth)  ||
       !(bbox.y[0]<0 && bbox.y[1]>=pheight) ||
       !(bbox.z[0]<0 && bbox.z[1]>=pdepth))
    {
        if(bbox.x[0]<0) dx = -bbox.x[0];
        if(bbox.x[1]>pwidth-1) dx = (pwidth-1)-bbox.x[1];
        
        if(bbox.y[0]<0) dy = -bbox.y[0];
        if(bbox.y[1]>pheight-1) dy = (pheight-1)-bbox.y[1];
        
        if(bbox.z[0]<0) dz = -bbox.z[0];
        if(bbox.z[1]>pdepth-1) dz = (pdepth-1)-bbox.z[1];
    }

return [dx,dy,dz];
}

$("#layers").html(tmp);
}

function remove_layer(layers, n) {
    var height = layers[0].length;
    var width = layers[0][0].length;
    layers.splice(n,1);
    layers.unshift(generate_layer(width, height));    
}

/*****************************************************************************************/
// Utils
/*****************************************************************************************/
function log(text) {
    $("#log").css("display", "block");
    $("#log").append(text+"<br/>");
}

/*****************************************************************************************/
// Tests
/*****************************************************************************************/
function test_cubes(canvas, ctx) {
    var faces = [1,1,1,1,1];
    var outline = "#000";
    
    render_cube(canvas, ctx, PIT_WIDTH,PIT_HEIGHT,PIT_DEPTH, 0,0,0, [0,100,50,1.0], faces, outline);
    render_cube(canvas, ctx, PIT_WIDTH,PIT_HEIGHT,PIT_DEPTH, 4,0,0, [60,100,50,1.0], faces, outline);
    render_cube(canvas, ctx, PIT_WIDTH,PIT_HEIGHT,PIT_DEPTH, 4,4,0, [120,100,50,1.0], faces, outline);
    render_cube(canvas, ctx, PIT_WIDTH,PIT_HEIGHT,PIT_DEPTH, 0,4,0, [180,100,50,1.0], faces, outline);
    
    render_cube(canvas, ctx, PIT_WIDTH,PIT_HEIGHT,PIT_DEPTH, 2,0,3, [255,100,50,1.0], faces, outline);
    render_cube(canvas, ctx, PIT_WIDTH,PIT_HEIGHT,PIT_DEPTH, 1,4,3, [255,100,50,1.0], faces, outline);
    render_cube(canvas, ctx, PIT_WIDTH,PIT_HEIGHT,PIT_DEPTH, 3,0,1, [255,100,50,1.0], faces, outline);
    render_cube(canvas, ctx, PIT_WIDTH,PIT_HEIGHT,PIT_DEPTH, 3,0,0, [255,100,50,1.0], faces, outline);
    
    render_cube(canvas, ctx, PIT_WIDTH,PIT_HEIGHT,PIT_DEPTH, 4,4,9, [255,90,50,1.0], faces, outline);
    render_cube(canvas, ctx, PIT_WIDTH,PIT_HEIGHT,PIT_DEPTH, 3,4,9, [255,90,50,1.0], faces, outline);
    render_cube(canvas, ctx, PIT_WIDTH,PIT_HEIGHT,PIT_DEPTH, 2,4,9, [255,90,50,1.0], faces, outline);
    render_cube(canvas, ctx, PIT_WIDTH,PIT_HEIGHT,PIT_DEPTH, 3,3,9, [255,90,50,1.0], faces, outline);
    
    render_cube(canvas, ctx, PIT_WIDTH,PIT_HEIGHT,PIT_DEPTH, 3,1,9, [355,90,50,1.0], faces, outline);
    render_cube(canvas, ctx, PIT_WIDTH,PIT_HEIGHT,PIT_DEPTH, 3,2,9, [355,90,50,1.0], faces, outline);
    render_cube(canvas, ctx, PIT_WIDTH,PIT_HEIGHT,PIT_DEPTH, 2,3,9, [355,90,50,1.0], faces, outline);
    render_cube(canvas, ctx, PIT_WIDTH,PIT_HEIGHT,PIT_DEPTH, 2,2,9, [355,90,50,1.0], faces, outline);

render_shadow(canvas, ctx, 100);
}

function test_layer(canvas, ctx) {
    var layer0 = [ "11122",
                   "30012",
                   "30002",
                   "30004",
                   "00004" ];
    var layer1 = [ "11122",
                   "31112",
                   "32022",
                   "31044",
                   "11144" ];
    var layer2 = [ "11122",
                   "01112",
                   "32002",
                   "30044",
                   "00004" ];
    render_layer(canvas, ctx, layer1, 9, "#000");
    /*
    render_layer(canvas, ctx, layer1, 8, "#000");
    render_layer(canvas, ctx, layer1, 7, "#000");
    render_layer(canvas, ctx, layer1, 6, "#000");
    render_layer(canvas, ctx, layer1, 5, "#000");
    render_layer(canvas, ctx, layer1, 4, "#000");
    render_layer(canvas, ctx, layer1, 3, "#000");
    render_layer(canvas, ctx, layer1, 2, "#000");
    render_layer(canvas, ctx, layer1, 1, "#000");
    render_layer(canvas, ctx, layer0, 0, "#000");
    */
    
    render_piece(canvas, ctx, PIT_WIDTH,PIT_HEIGHT,PIT_DEPTH, 0,0,0, PIECES['flat'][0], [0,0,0], PIECE_COLOR);
    
    //render_shadow(canvas, ctx, 100);
}

function test_cache(canvas, ctx) {
    var start = (new Date).getTime();    
    draw_pit(canvas, ctx, PIT_WIDTH,PIT_HEIGHT,PIT_DEPTH);
    var end = (new Date).getTime();
    
    log("pit uncached: "+(end-start)+"ms");
    
    var start = (new Date).getTime();    
    draw_pit(canvas, ctx, PIT_WIDTH,PIT_HEIGHT,PIT_DEPTH);
    var end = (new Date).getTime();
    
    log("pit cached: "+(end-start)+"ms");
    
    //test_cubes(canvas, ctx);
    
    var start = (new Date).getTime();    
    //test_layer(canvas, ctx);
    render_layers(canvas, ctx, LAYERS);
    var end = (new Date).getTime();
    log("layer uncached: "+(end-start)+"ms");

var start = (new Date).getTime();    
    render_layers(canvas, ctx, LAYERS);
    var end = (new Date).getTime();
    log("layer cached: "+(end-start)+"ms");    
}

/*****************************************************************************************/
// Pause magic
/*****************************************************************************************/
function init_pause_elements() {
    for(var i=0; i<N_ELEMENTS; ++i) {
        var x = rand_range(0, 100*PIT_WIDTH-1)/100;
        var y = rand_range(0, 100*PIT_HEIGHT-1)/100;
        var z = rand_range(0, 100*PIT_DEPTH-1)/100;
        var d = 0.01*rand_range(4, 6);
        PAUSE_ELEMENTS[i] = [x,y,z,d];
    }
}

/*****************************************************************************************/
// Gameplay
/*****************************************************************************************/
function reset_pit(type) {
    LAYERS = generate_layers(PIT_WIDTH,PIT_HEIGHT,PIT_DEPTH);
    init_layers(LAYERS, type);
    COUNTS = generate_counts(LAYERS);
}

function end_game(canvas, ctx) {
    $(document).unbind("keydown");
    
    clearTimeout(ID1);
    clearTimeout(ID2);
    
    var hs = "Score:";
    var dh = difhash(SET, PIT_WIDTH, PIT_HEIGHT, PIT_DEPTH, SPEED);
    if(STATE.score>0 && (HIGHSCORE[dh] == undefined || HIGHSCORE[dh]<STATE.score)) {
        HIGHSCORE[dh] = STATE.score;
        save_score();
        hs = "<span id='highscore'>New high score:</span>";
    }
    
    set_ui_gameover(hs);
    init_game_keys(canvas, ctx);
}

// fps counter globals
var COUNTER = 0;
var EC = 0; SC = 0, XC = 0;

function game_loop(canvas, ctx) {
    END = (new Date).getTime();
    ELAPSED = END - START;
    START = END;
        
    //if(ELAPSED<FRAME_DELAY) {  log(ELAPSED); ELAPSED = FRAME_DELAY; }

/*
    // FPS averaged over multiple frames
    // to avoid JS getTime inaccuracies
    //  -- http://ejohn.org/blog/accuracy-of-javascript-time/
    COUNTER += 1;
    if(COUNTER % 50 == 0) {
        EC = (new Date).getTime();
        XC = EC - SC;
        SC = EC;
        $("#fps").text(50*(1000/XC).toFixed(1));
    }
    */
    
    STATE.progress = cap(STATE.progress+ELAPSED/ANIM_DURATION, 1);
    
    if(STATE.touchdown_flag && STATE.progress>=1) {
        touchdown();
        if(STATE.new_z==0) game_over(canvas, ctx);
        else new_piece(canvas, ctx);
    }
    
    // animate
    STATE.current_x = STATE.start_x + STATE.progress*(STATE.new_x - STATE.start_x);
    STATE.current_y = STATE.start_y + STATE.progress*(STATE.new_y - STATE.start_y);
    STATE.current_z = STATE.start_z + STATE.progress*(STATE.new_z - STATE.start_z);
    
    STATE.current_angles[0] = STATE.start_angles[0] + STATE.progress*(STATE.new_angles[0] - STATE.start_angles[0]);
    STATE.current_angles[1] = STATE.start_angles[1] + STATE.progress*(STATE.new_angles[1] - STATE.start_angles[1]);
    STATE.current_angles[2] = STATE.start_angles[2] + STATE.progress*(STATE.new_angles[2] - STATE.start_angles[2]);
    
    // render
    render_frame(canvas, ctx);
}

function render_frame(canvas, ctx) {
    draw_pit(canvas, ctx, PIT_WIDTH,PIT_HEIGHT,PIT_DEPTH);
    render_layers(canvas, ctx, LAYERS, STATE.refresh_layers_flag);
    if(STATE.render_piece_flag)
        render_piece(canvas, ctx, PIT_WIDTH,PIT_HEIGHT,PIT_DEPTH, STATE.current_x,STATE.current_y,STATE.current_z, STATE.piece, STATE.current_angles, PIECE_COLOR);
    //if(STATE.render_shadow_flag)
    //    render_shadow(canvas, ctx, 100);
}

function reset(canvas, ctx) {
    STATE.pi = ALLOWED[rand_range(0, ALLOWED.length-1)];
    STATE.piece = PIECES[SET][STATE.pi];
    STATE.current_x = 0;
    STATE.current_y = 0;
    STATE.current_z = 0;
    STATE.current_angles = [0,0,0];

STATE.new_x = 0;
    STATE.new_y = 0;
    STATE.new_z = 0;
    STATE.new_angles = [0,0,0];
    
    STATE.start_x = 0;
    STATE.start_y = 0;
    STATE.start_z = 0;
    STATE.start_angles = [0,0,0];
    
    STATE.progress = 0;
    
    STATE.render_piece_flag = 1;
    STATE.touchdown_flag = 0;
    
    render_frame(canvas, ctx);
}

function set_start() {
    STATE.start_x = STATE.current_x;
    STATE.start_y = STATE.current_y;
    STATE.start_z = STATE.current_z;
        
    STATE.start_angles[0] = STATE.current_angles[0];
    STATE.start_angles[1] = STATE.current_angles[1];
    STATE.start_angles[2] = STATE.current_angles[2];

STATE.progress = 0;
}

function touchdown() {
    STATE.render_piece_flag = 0;
    STATE.refresh_layers_flag = 1;
    
    nvoxels = project_voxels(STATE.piece, STATE.new_x,STATE.new_y, STATE.new_z, STATE.new_angles);
    STATE.score += add_voxels(nvoxels, LAYERS, COUNTS);
        
    STATE.score += check_full_layers(LAYERS, COUNTS);
    refresh_score();
    
    refresh_column();
}

function new_piece(canvas, ctx) {
    reset(canvas, ctx);
}

function game_over(canvas, ctx) {
    render_pit(canvas, ctx);
    end_game(canvas, ctx);
}

/*****************************************************************************************/
// User interface
/*****************************************************************************************/
function change_set(el) {
    var which = el.innerHTML.toLowerCase();
    SET = which;
    
    save_settings();
    reset_allowed();
}

function change_pit(el, canvas, ctx) {
    var dimensions = el.innerHTML.toLowerCase().split("x");
    PIT_WIDTH  = parseInt(dimensions[0]);
    PIT_HEIGHT = parseInt(dimensions[1]);
    PIT_DEPTH  = parseInt(dimensions[2]);
    
    save_settings();
    
    init_colors(PIT_DEPTH);
    
    reset_pit(3);
    render_pit(canvas, ctx);
    
    reset_allowed();
}

function change_speed(el) {
    var speed = parseInt(el.innerHTML);
    SPEED = speed;
    AUTOFALL_DELAY = SPEED_MAP[SPEED];
    
    save_settings();
}

function reset_allowed() {
    ALLOWED = [];
    for(var i=0; i<PIECES[SET].length; ++i) {
        var bb = PIECES[SET][i].bb;
        if(bb.x[0]>=0 && bb.x[1]<=PIT_WIDTH &&
           bb.y[0]>=0 && bb.y[1]<=PIT_HEIGHT &&
           bb.z[0]>=0 && bb.z[1]<=PIT_DEPTH)
            ALLOWED.push(i);
    }
}

/*****************************************************************************************/
// User interface (macros)
/*****************************************************************************************/
function set_ui_start() {
    STATE.setkeys = 0;
    $(".hud").css("display", "none");
    $("#column").css("display", "none");
    $("#footer").css("display", "block");
    $("#message").css("display", "block");
    $("#difficulty").css("display", "block");
}

function set_ui_game() {
    $(".hud").css("display", "none");
    $("#footer").css("display", "none");
    $("#score").css("display", "block");
    $("#column").css("display", "block");
}

function set_ui_gameover(scorelabel) {
    $("#scorelabel").html(scorelabel);
    $("#finalscore").text(pretty_number(STATE.score));
    $("#column").css("display", "none");
    $(".hud").css("display", "none");
    $("#score").css("display", "none");
    $("#footer").css("display", "block");
    $("#over").css("display", "block");
    $("#difficulty").css("display", "block");
}

function refresh_score() {
    $("#score").text(pretty_number(STATE.score));
}

/*****************************************************************************************/
// Settings
/*****************************************************************************************/
function save_settings() {
    var tmp = SET+":"+PIT_WIDTH+":"+PIT_HEIGHT+":"+PIT_DEPTH+":"+SPEED;
    $.cookie('co_settings', tmp, { expires: 10000 });
}

function load_settings() {
    var tmp = $.cookie('co_settings');
    if(tmp) {
        var chunks = tmp.split(":");
        var set = chunks[0];
        if(TEMPLATES[set] != undefined) SET = set;
        
        PIT_WIDTH  = parseInt(chunks[1]);
        PIT_HEIGHT = parseInt(chunks[2]);
        PIT_DEPTH  = parseInt(chunks[3]);
        
        SPEED = parseInt(chunks[4]);
        AUTOFALL_DELAY = SPEED_MAP[SPEED];
    }
}

/*****************************************************************************************/
// Custom keys
/*****************************************************************************************/
function pretty_key(keycode) {
    if(keycode>=48 && keycode<=122) return String.fromCharCode(keycode);
    if(KEYCODES[keycode]!=undefined) return KEYCODES[keycode];
    return keycode;
}

function reset_key_labels() {
    $("#keyset .lbl").each(function() {
        var label = $(this).text();
        var val = $(this).parent().find(".val");
        val.text(pretty_key(KEYMAP_TMP[LABELMAP[label]]));
    });
}

function set_key(keycode) {
    if(LAST_KEY_EL) {
        var label = LAST_KEY_EL.text();
        KEYMAP_TMP[LABELMAP[label]] = keycode;
        LAST_KEY_EL.parent().find(".val").text(pretty_key(keycode));
    }
}

function new_key(el) {
    LAST_KEY_EL = el;
    $("#keyset .val").removeClass("active");
    $("#keyset .lbl").removeClass("active");
    LAST_KEY_EL.addClass("active");
    LAST_KEY_EL.parent().find(".val").addClass("active");
}

function copy_keymap(src, dst) {
    for(var i in src)
        dst[i] = src[i];
}

function accept_keys() {
    copy_keymap(KEYMAP_TMP, KEYMAP);
}

function reset_keys() {
    copy_keymap(KEYMAP_DEFAULT, KEYMAP_TMP);
    reset_key_labels();
}

function save_keys() {
    var tmp = [];
    for(var i in KEYMAP) tmp.push(i+":"+KEYMAP[i]);
    $.cookie('co_keymap', tmp.join("|"), { expires: 10000 });
}

function change_keys(canvas, ctx) {
    STATE.setkeys = 1;
    
    $(".hud").css("display", "none");
    $("#score").css("display", "none");
    $("#keyset").css("display", "block");
    
    copy_keymap(KEYMAP, KEYMAP_TMP);
    reset_key_labels();
}

/*****************************************************************************************/
// Highscore
/*****************************************************************************************/
function difhash(set, width, height, depth, speed) {
    return width+"x"+height+"x"+depth+":"+set[0]+":"+speed;
}

function save_score() {
    var tmp = [];
    for(var i in HIGHSCORE) tmp.push(i+"|"+HIGHSCORE[i]);
    $.cookie('co_highscore', tmp.join(","), { expires: 10000 });
}

function generate_highscores() {
    var tmp = [];
    for(var i in HIGHSCORE) {
        var chunks = i.split(":");
        var dim = chunks[0];
        var s = chunks[1];
        var x = chunks[2];
        var sfull = "";
        if(s=="f") sfull = "flat";
        else if(s=="b") sfull = "basic";
        else if(s=="e") sfull = "extended";
        var row = "<tr><td>"+dim+"</td><td>"+sfull+"</td><td>"+x+"</td><td class='ths'>"+pretty_number(HIGHSCORE[i])+"</td></tr>";
        tmp.push(row);
    }
    return "<table><tr><th>Pit</th><th>Pieces</th><th>Speed</th><th>Score</th></tr>"+tmp.join(" ")+"</table>";
}

function show_highscores() {
    $(".hud").css("display", "none");
    $("#hscontent").html(generate_highscores());
    $("#highscores").css("display","block");
}

/*****************************************************************************************/
// Colum
/*****************************************************************************************/
function refresh_column() {
    var xcanvas = $("#screen2");
    var canvas = xcanvas.get(0);
    var ctx = canvas.getContext("2d");
    var width = xcanvas.parent().width();
    var height = xcanvas.parent().height();
    
    xcanvas.attr('width',width).attr('height', height);
        
    var i,c,top,bottom,lingrad;
    var unit = width;
    var sy = height-(unit+2)*COUNTS.length+2;
    for(i=0; i<COUNTS.length; ++i) {
        top = sy+i*(unit+2);
        if(COUNTS[i]!=undefined && COUNTS[i]>0) {
            var c = COLORS[COLORS.length-1-i];
            var c2 = "hsla("+c[0]+","+c[1]+"%,"+(c[2]-10)+"%,"+c[3]+")";
            var c1 = "hsla("+c[0]+","+c[1]+"%,"+(c[2]-30)+"%,"+c[3]+")";
            
            bottom = top+unit;
            lingrad = ctx.createLinearGradient(0,top,width,bottom);
            lingrad.addColorStop(0.0, c2);
            lingrad.addColorStop(1.0, c1);
            ctx.fillStyle = lingrad;
            //ctx.fillStyle = c1;
        }
        else {
            ctx.fillStyle = "#050505";
        }
        ctx.fillRect(0,top,unit,unit);
    }
}

/*****************************************************************************************/
// Main
/*****************************************************************************************/
$(document).ready(function(){
    copy_keymap(KEYMAP_DEFAULT, KEYMAP);
    copy_keymap(KEYMAP, KEYMAP_TMP);

load_settings();
    load_keys();
    load_score();
    
    var xcanvas = $("#screen");
    var canvas = xcanvas.get(0);
    var ctx = canvas.getContext("2d");
    xcanvas.attr('width', WIDTH).attr('height', HEIGHT);
    
    precompute_pieces();
    init_colors(PIT_DEPTH);
    
    reset_pit(3); 
    render_pit(canvas, ctx);
    reset_allowed();
    
    init_game_keys(canvas, ctx);
    
    // difficulty settings
    $("#pieces .button").each(function() { if($(this).text().toLowerCase()==SET) $(this).addClass("on");});
    $("#pieces .button").click(function() { change_set($(this).get(0)); $("#pieces .button").removeClass("on"); $(this).addClass("on"); });
    
    var pit_string = PIT_WIDTH+"x"+PIT_HEIGHT+"x"+PIT_DEPTH;
    $("#pit .button").each(function() { if($(this).text().toLowerCase()==pit_string) $(this).addClass("on");});
    $("#pit .button").click(function() { change_pit($(this).get(0), canvas, ctx); $("#pit .button").removeClass("on"); $(this).addClass("on"); });
    
    $("#speed .button").each(function() { if($(this).text().toLowerCase()==SPEED) $(this).addClass("on");});
    $("#speed .button").click(function() { change_speed($(this).get(0)); $("#speed .button").removeClass("on"); $(this).addClass("on"); });
    
    // custom keys
    $("#keys .button").click(function() { change_keys(); });
    
    $("#keyset .lbl").click(function() { new_key($(this)); });
    
    $("#keys_ok").click(function() { LAST_KEY_EL = 0; accept_keys(); save_keys(); set_ui_start(); STATE.setkeys = 0; });
    $("#keys_cancel").click(function() { LAST_KEY_EL = 0; set_ui_start(); STATE.setkeys = 0; });
    $("#keys_reset").click(function() { reset_keys(); });
    
    // high scores
    $("#hs").click(function() { show_highscores() } );
    $("#hs_back").click(function() { set_ui_start(); });
    
    refresh_column();
});

CSS

* { padding:0; margin:0 }

html { background:#111; }
body { font-family:verdana; background:#111; color:#fff; text-shadow:#000 0px 0px 0.1em;  }
h1 { margin:1em 0 0.5em; color:#fff; font-size:3em; font-variant:small-caps; font-weight:bold; text-shadow:#000 0px 0px 0.3em; letter-spacing:0.04em }
h3 { color:gold; }

a { text-decoration:none; color:#fff }
a:hover { text-decoration:underline }

h1 a:hover { text-decoration:none }

.shadow {
	box-shadow:0px 0px 15px rgba(0,0,0,1); 
   -moz-box-shadow:0px 0px 15px rgba(0,0,0,1); 
   -webkit-box-shadow:0px 0px 15px rgba(0,0,0,1);
   -khtml-box-shadow:0px 0px 15px rgba(0,0,0,1);
	}
	
#fps { display:none }

#screenwrap { height:620px; border:solid 0px red; overflow:hidden }
#screen, #dummy { padding:3em; background:#000; margin-top:15px }

#dummy { width:500px; height:500px; }
#dummy { color:orangered }

.hud { position:relative; font-size:1.1em; color:#fff; text-shadow:#000 0px 0px 0.3em; }
.full { padding:0em; width:500px; height:500px; border:solid 1px #000; }

#message { top:-575px; display:block; }
#message a, #hs { color:#009FA0 }

#hs { cursor:pointer }
#hs:hover { text-decoration:underline }

#highscores { display:none; top:-552px }
#highscores h3 { margin:2em 0 1em }
#hscontent { margin:1em; color:#eee; border:solid 0px red; height:320px; overflow:auto }
#hscontent th { text-align:left; color:#999; padding:0 1em 0 0 }
#hscontent td { padding:0 1em 0 0 }
.ths { color:orangered; padding:0 0 0 3em;  }

#description { background:rgba(60,60,60,0.75); color:#eee; margin:3em 0 2em; padding:1em 0;  }
#controls {  background:rgba(100,100,100,0.0); padding:1em 0  }

.action { color:yellow }

#over    { top:-400px; display:none; }
#pause   { top:-40px; display:none; color:#222; }

#keyset  { top:-552px; display:none; }
#keyset ul { width:300px; margin:1em 0 }
#keyset li { text-align:left; list-style-type:none; }
#keyset h3 { margin:3em 0 1em 0 }
#keyset .lbl { width:6em; margin:0 0.5em 0 0; display:inline-block; text-align:right; cursor:pointer; }
#keyset .lbl:hover { color:#fe4 }
#keyset .val { color:#0a0 }
#keyset .lbl.active, #keyset .lbl.active:hover { color:gold }
#keyset .val.active { color:#0f0 }
#keys_reset { margin:0 0 0 9em; float:left }

#score { display:none; position:relative; top:-590px; left:1.5em; padding:0; text-align:right; width:500px; font-family:arial; font-size:1.5em; font-weight:bold; color:#fff; text-shadow:#000 0px 0px 0.3em; }

#scorelabel { color:#aaa }
#highscore { color:orangered; }
#finalscore { font-size:1.1em }

#difficulty { position:relative; top:-2em; }
#pieces { margin:0 0.5em 0 0 }
#pit { margin:0 0.5em 0 0.5em }
#speed { margin:0 0.5em 0 0.5em }
#keys { margin:0 0 0 0.5em }

#column { display:none; background:transparent; width:15px; height:500px; position:relative; top:-575px; left:-275px; margin-bottom:-500px }

.button { color:#444; 
	     background:#000;
		 cursor:pointer;
         padding:0.2em 0.5em;
		 font-size:0.66em;
		 font-weight:bold;
		 font-family:trebuchet ms;

text-shadow:0px 1px 0px #000;
}
		 
.xb { color:#fff; background:#0a0 url("button-green.png");
        box-shadow: 	   2px 2px 5px #000;
        -o-box-shadow:     2px 2px 5px #000;
        -icab-box-shadow:  2px 2px 5px #000;
        -khtml-box-shadow: 2px 2px 5px #000;
        -moz-box-shadow:   2px 2px 5px #000;
        -webkit-box-shadow:2px 2px 5px #000;

-moz-border-radius: 2px;
        -webkit-border-radius: 2px;
	}
.red { background:#a00 url("button-red.png"); }	
.gold { background:#a50 url("button-gold.png"); }	
.on { color:#fff }

#footer { text-align:center; font-size:0.9em; color:#666; margin:1.5em 0 2em 0 }
#footer a { color:#888 }

/* Debug */
#log { position:absolute; left:0; top:0; display:none; color:lime; background:#0a0a0a; font-family:trebuchet ms; width:50%; padding:1em; margin:3em 1em; width:20em; height:600px; overflow:auto }
#layers { position:absolute; left:0; top:0; color:#000; font-size:0.8em; font-family:courier;  }

HTML

<!DOCTYPE html>
<html>
<head>
    <meta name="description" content="Remake of classic puzzle game Blockout (3d tetris) in HTML 5"/>
    <title>CubeOut</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    
</head>

<body>

<center>
    <h1><a href="/cubeout">CubeOut</a></h1>
    
    <div id="fps"> </div>
    
    <div id="screenwrap">
        
        <canvas id="screen" class="shadow"><div id="dummy">Sorry, you need to check this page in browser that supports HTML5 canvas (like current version of Chrome, Opera, Firefox or Safari).</div></canvas>
        
        <div id="difficulty" class="hud">
            <span id="pieces" title="Change pieces complexity">
                <span class="button">Flat</span> <span class="button">Basic</span> <span class="button">Extended</span>
            </span>
            <span id="pit" title="Change pit size">
                 <span class="button">3x3x10</span> <span class="button">5x5x10</span> <span class="button">5x5x12</span>
            </span>
            <span id="speed" title="Change game speed">
                <span class="button">0</span> <span class="button">1</span> <span class="button">2</span> <span class="button">3</span> <span class="button">4</span>
            </span>
            <span id="keys" title="Set custom keys">
                <span class="button">Keys</span>
            </span>
        </div>

<div id="column"><canvas id="screen2"></canvas></div>
        
        <div id="message" class="hud full">  
            <div id="description" class="shadow">
                Remake of <a href="http://en.wikipedia.org/wiki/Blockout">Blockout (3d tetris)</a> in HTML 5<br/>
                <small><br/>Works in Firefox, Chrome, Opera and Safari<br/>
                Best performance in Chrome and Opera</small>
            </div>
            
            <div id="controls">
                Rotate with Q,W,E,A,S,D<br/>
                Move with arrows<br/>
                Drop with space<br/>
                <br/>
                Quit ESC<br/>
                Pause P<br/>
                <br/>
                <span class="action">Press space to start</span>
            </div>
            
            <span id="hs">High scores</span>
        </div>
        
        <div id="keyset" class="hud full">
            <h3>Set custom keys</h3>
            <small>Click on the label and then press key</small>
            
            <ul>
            <li><span class="lbl">left</span> <span class="val"></span></li>
            <li><span class="lbl">right</span> <span class="val"></span></li>
            <li><span class="lbl">up</span> <span class="val"></span></li>
            <li><span class="lbl">down</span> <span class="val"></span></li>
            <li><span class="lbl">rotate X+</span> <span class="val"></span></li>
            <li><span class="lbl">rotate X-</span> <span class="val"></span></li>
            <li><span class="lbl">rotate Y+</span> <span class="val"></span></li>
            <li><span class="lbl">rotate Y-</span> <span class="val"></span></li>
            <li><span class="lbl">rotate Z+</span> <span class="val"></span></li>
            <li><span class="lbl">rotate Z-</span> <span class="val"></span></li>
            <li><span class="lbl">drop</span> <span class="val"></span></li>
            </ul>
            <span class="button xb gold" id="keys_reset">Reset to default</span>
            <span class="button xb" id="keys_ok">Accept</span>
            <span class="button xb red" id="keys_cancel">Cancel</span>
        </div>
        
        <div id="highscores" class="hud full">
            <h3>High scores</h3>
            <small>On this computer and browser</small>
            <div id="hscontent"></div>
            <span class="button xb" id="hs_back">Back</span>
        </div>
        
        <div id="over" class="hud">
            <h2>Game over</h2>
            <br/>
            <span id="scorelabel">Score</span> <span id="finalscore">0</span><br/>
            <br/>
            <span class="action">Press space to play again</span>
        </div>
        
        <div id="pause" class="hud">
            Pause
        </div>
        
    </div>
    
    <div id="footer">
        <small><a href="mailto:postfilter@gmail.com">Feedback</a><br/><a href="http://twitter.com/alteredq">Twitter</a></small>
    </div>
</center>

</body>

</html>

A PHP Error was encountered

A PHP Error was encountered

Recommendation

A PHP Error was encountered

A PHP Error was encountered

Recommendation

Join Effecthub.com