jigsaw.js

(function(window,document) {
    if (!window.jigsaw) {
        jigsaw = {};
        window.jigsaw = jigsaw;
    }

    jigsaw.clip_buffer = [];
    jigsaw.total_steps = 0;
    jigsaw.total_clip = 0;
    jigsaw.current_index = 0;
    jigsaw.scale = 0.5;

    jigsaw.init = function (image, size) {

        var options = get_image_size(image);
        options.images = {'jigsaw': image};
        options.canvasid = 'jigsaw';
        var engine = awesome2d.use('engine', 'create', options);
        jigsaw.engine = engine;
        get_clips(size, engine);
        draw_image(engine);
        event_handler(engine.canvas, function (e) {

            var pos = get_point_on_canvas(engine.canvas, e.clientX, e.clientY);
            var clip = get_clicked_clip(pos.x, pos.y);
            if(check_position(clip, size)){
                //move
                current_index_clip = jigsaw.clip_buffer[jigsaw.current_index];
                jigsaw.current_index = clip.rand_index;
                console.log("current index" + jigsaw.current_index);
                exchange_clip(clip.rand_index,current_index_clip.rand_index, jigsaw.clip_buffer);
                //jigsaw.current_index = current_index_clip.rand_index;
                console.log("current index:" + jigsaw.current_index);
                draw_image(engine);
            }else{
                //do nothing;
            }
        })
    };

    var draw_image = function (engine) {
        engine.clear_canvas();
        console.log(jigsaw.clip_buffer);
        for (var i = 0; i < jigsaw.clip_buffer.length; i++) {

            if (jigsaw.clip_buffer[i].rand_index == jigsaw.current_index) {


                //engine.draw_image(jigsaw.clip_buffer[i]);

            } else {
                engine.draw_image(jigsaw.clip_buffer[i]);
            }
            //engine.draw_image(jigsaw.clip_buffer[i]);
        }
    };
    var get_image_size = function (image) {

        var img = document.createElement('img');
        img.src = image;
        return {'width': img.width * jigsaw.scale, 'height': img.height * jigsaw.scale};
    };

    var get_clips = function (size, engine) {
        var ctx = engine.context2d;
        var clip_width = engine.image_buffer['jigsaw'].width / size[1];
        var clip_height = engine.image_buffer['jigsaw'].height / size[0];
        jigsaw.total_clip = parseInt(size[0] * size[1]);

        var pos_buffer = [];
        for (var i = 0; i < jigsaw.total_clip; i++) {
            var pos = get_position(size, clip_width, clip_height, i);
            pos.image = 'jigsaw';
            //engine.draw_image(pos);
            pos_buffer.push(pos);
        }
        //jigsaw.current_index = jigsaw.total_clip - 1;
        jigsaw.clip_buffer = get_random(pos_buffer, size, clip_width, clip_height);

    };

    var get_position = function (size, width, height, index) {
        //sX sY sWidth sHeight, dX dY dWidth dHeight
        var total = parseInt(size[0] * size[1]);
        var ret = {};
        ret.sX = width * (parseInt(index % size[1]) );
        ret.sY = height * (parseInt(index / size[0]) );
        ret.sWidth = width - 5;
        ret.sHeight = height - 5;
        ret.dX = ret.sX * jigsaw.scale;
        ret.dY = ret.sY * jigsaw.scale;
        ret.dWidth = ret.sWidth * jigsaw.scale;
        ret.dHeight = ret.sHeight * jigsaw.scale;
        ret.correct_index = index;
        return ret;
    };
    var event_handler = function (canvas, handler) {

        canvas.addEventListener('click', handler, true);
    };
    var get_random = function (pos_buffer, size, width, height) {

        var ret = [];
        var length = pos_buffer.length;
        for (var i = 0; i < length; i++) {

            var rand_index = Math.floor(Math.random() * pos_buffer.length);

            pos_buffer[rand_index].rand_index = i;

            pos_buffer[rand_index].dX = jigsaw.scale * width * parseInt(i % size[1]);
            pos_buffer[rand_index].dY = jigsaw.scale * height * (parseInt(i / size[0]));
            ret.push(pos_buffer[rand_index]);

            if(pos_buffer[rand_index].correct_index == (jigsaw.total_clip - 1)){
                jigsaw.current_index = i;
            }
            pos_buffer.splice(rand_index, 1);
        }
        return ret;
    };

    var get_point_on_canvas = function (canvas, x, y) {

        var bbox = canvas.getBoundingClientRect();

        return { 'x': x - bbox.left * (canvas.width / bbox.width),

            'y': y - bbox.top * (canvas.height / bbox.height)

        };

    };

    var get_clicked_clip = function (x, y) {

        for (var i = 0; i < jigsaw.clip_buffer.length; i++) {

            var clip = jigsaw.clip_buffer[i];
            if ((x > clip.dX) && (x < (clip.dX + clip.dWidth)) && (y > clip.dY) && (y < (clip.dY + clip.dHeight))) {

                return clip;

            }
        }
    };

    var check_position = function (clip, size) {

        var total = parseInt(size[0] * size[1]);
        var top_clip    = 999;
        var right_clip  = 999;
        var bottom_clip = 999;
        var left_clip   = 999;

        var current_index = jigsaw.current_index;

        if(parseInt(current_index / size[1]) == 0){
            bottom_clip = current_index + size[1];

        }else if(parseInt(current_index / size[1]) == (size[0] - 1)){

            top_clip = current_index - size[1];

        }else{
            top_clip = current_index - size[1];
            bottom_clip = current_index + size[1];
        }
        if((current_index != (size[1] - 1)) && (current_index != 0)){
            right_clip = current_index + 1;
            left_clip  = current_index - 1;
        }else{
            if(current_index == 0){
                right_clip = current_index + 1;
            }else{
                    left_clip = current_index - 1;
            }
        }

        if(clip.rand_index == top_clip || clip.rand_index == right_clip || clip.rand_index == bottom_clip || clip.rand_index == left_clip){

            console.log("can move");
            return true;
        }else{
            console.log("can not move");
            return false;
        }

    }

    var exchange_clip = function(indexa, indexb, buffer){
        temp={};
        temp.correct_index = buffer[indexa].correct_index;
        temp.dHeight = buffer[indexa].dHeight;
        temp.dWidth = buffer[indexa].dWidth;
        temp.dX = buffer[indexa].dX;
        temp.dY = buffer[indexa].dY;
        temp.rand_index = buffer[indexa].rand_index;
        temp.sHeight = buffer[indexa].sHeight;
        temp.sWidth = buffer[indexa].sWidth;
        temp.sX = buffer[indexa].sX;
        temp.sY = buffer[indexa].sY;

        buffer[indexa].correct_index = buffer[indexb].correct_index;
        buffer[indexa].dHeight = buffer[indexb].dHeight;
        buffer[indexa].dWidth = buffer[indexb].dWidth;
        buffer[indexa].sHeight = buffer[indexb].sHeight;
        buffer[indexa].sWidth = buffer[indexb].sWidth;
        buffer[indexa].sX = buffer[indexb].sX;
        buffer[indexa].sY = buffer[indexb].sY;

        buffer[indexb].correct_index = temp.correct_index;
        buffer[indexb].dHeight = temp.dHeight;
        buffer[indexb].dWidth = temp.dWidth;
        buffer[indexb].sHeight = temp.sHeight;
        buffer[indexb].sWidth = temp.sWidth;
        buffer[indexb].sX = temp.sX;
        buffer[indexb].sY = temp.sY;

    }

})(window,document);