Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1

Thread: puzzle bordem

  1. #1
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,517
    Thanks
    114
    Thanked 110 Times in 109 Posts

    puzzle bordem

    Here is the code for a puzzle game... enjoy! i can't complete it so i got no way of testing if the win game part works but think it should

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
        <title>Transitions</title>
        <script type="text/javascript">
            var image = new Image();
            var hit = false;
                var done = false;
                var move_i = 0;
                var missing_pos =0;
                var move_counter = 0;
                var direction = "left";
                var clipping_x = new Array();
                var clipping_y = new Array();
                var position_x = new Array();
                var position_y = new Array();
                var random_clips = new Array();
                clipping_x[1] = 0;
                clipping_y[1] = 0;
                clipping_x[2] = 100;
                clipping_y[2] = 0;
                clipping_x[3] = 200;
                clipping_y[3] = 0;
                
                clipping_x[4] = 0;
                clipping_y[4] = 100;
                clipping_x[5] = 100;
                clipping_y[5] = 100;
                clipping_x[6] = 200;
                clipping_y[6] = 100;
                
                clipping_x[7] = 0;
                clipping_y[7] = 200;
                clipping_x[8] = 100;
                clipping_y[8] = 200;
                clipping_x[9] = 200;
                clipping_y[9] = 200;
                
                var position_x = clipping_x;
                var position_y = clipping_y;
                
                var missing_one = 1;
    
            function init() {
                image.src = "img.jpg";
                canvas = document.getElementsByTagName('canvas')[0];
                context = canvas.getContext('2d');
                
                            
                for(i=1;i<10;i++)
                {
                    do
                    {
                        rand = Math.floor((Math.random()*9)+1); 
                    }while(in_array(rand, random_clips))
                    
                   random_clips[i] = rand;
                }
    
                for(i=1;i<10;i++)
                {
                    if(random_clips[i]!=missing_one)
                        context.drawImage(image, clipping_x[random_clips[i]], clipping_y[random_clips[i]], 100, 100,position_x[i], position_y[i], 100, 100);
                    else
                        missing_pos = i;
                }
                
                console.dir(random_clips);
                
                intertimer = setInterval(main_loop, 1);
                
                /*
                context.drawImage(image, 0,0, 100, 100, 0, 0, 100, 100);
                
                context.drawImage(image, 100,0, 100, 100, 100, 0, 100, 100);
                
                context.drawImage(image, 200,0, 100, 100, 200, 0, 100, 100);
                
                context.drawImage(image, 0, 100, 100, 100, 0, 100, 100, 100);
                
                context.drawImage(image, 100,100, 100, 100, 100, 100, 100, 100);
                
                context.drawImage(image, 200,100, 100, 100, 200, 100, 100, 100);
                
                context.drawImage(image, 0, 200, 100, 100, 0, 200, 100, 100);
                
                context.drawImage(image, 100, 200, 100, 100, 100, 200, 100, 100);
                
                context.drawImage(image, 200, 200, 100, 100, 200, 200, 100, 100);
                */
                
            }
        
        function main_loop()
        {
            document.onmousemove = function( ev ){
               x_mouse_pos = ev.pageX; 
               y_mouse_pos = ev.pageY;
            };
            
            document.onclick = function( ev ){
                
                
                if(x_mouse_pos > 0 && x_mouse_pos < 100)
                {
                    if(y_mouse_pos > 0 && y_mouse_pos < 100 && missing_pos!=1)
                    {
                        move_i = 1;
                        hit = true;
                    }
                }
                
                if(x_mouse_pos > 100 && x_mouse_pos < 200)
                {
                    if(y_mouse_pos > 0 && y_mouse_pos < 100 && missing_pos!=2)
                    {
                        move_i = 2;
                        hit = true;
                    }
                }
    
    
                if(x_mouse_pos > 200 && x_mouse_pos < 300)
                {
                    if(y_mouse_pos > 0 && y_mouse_pos < 100 && missing_pos!=3)
                    {
                        move_i = 3;
                        hit = true;
                    }
                }
    
                if(x_mouse_pos > 0 && x_mouse_pos < 100)
                {
                    if(y_mouse_pos > 100 && y_mouse_pos < 200 && missing_pos!=4)
                    {
                        move_i = 4;
                        hit = true;
                    }
                }
                
                if(x_mouse_pos > 100 && x_mouse_pos < 200)
                {
                    if(y_mouse_pos > 100 && y_mouse_pos < 200 && missing_pos!=5)
                    {
                        move_i = 5;
                        hit = true;
                    }
                }
    
    
                if(x_mouse_pos > 200 && x_mouse_pos < 300)
                {
                    if(y_mouse_pos > 100 && y_mouse_pos < 200 && missing_pos!=6)
                    {
                        move_i = 6;
                        hit = true;
                    }
                }
                
                if(x_mouse_pos > 0 && x_mouse_pos < 100)
                {
                    if(y_mouse_pos > 200 && y_mouse_pos < 300 && missing_pos!=7)
                    {
                        move_i = 7;
                        hit = true;
                    }
                }
                
                if(x_mouse_pos > 100 && x_mouse_pos < 200)
                {
                    if(y_mouse_pos > 200 && y_mouse_pos < 300 && missing_pos!=8)
                    {
                        move_i = 8;
                        hit = true;
                    }
                }
    
    
                if(x_mouse_pos > 200 && x_mouse_pos < 300)
                {
                    if(y_mouse_pos > 200 && y_mouse_pos < 300 && missing_pos!=9)
                    {
                        move_i = 9;
                        hit = true;
                    }
                }
                
            };
            
            if(hit)
            {
                hit= false;
                if(check_next_to_hit())
                {
                    
                    
                    clearInterval(intertimer);
                    movetimer = setInterval(move_loop, 1);
                    
                    
                }
                else
                {
                    intertimer = setInterval(main_loop, 1);
                }
            }
            
        }
        
    
     
    
    function move_loop()
    {
    
        if(move_counter>=100)
        {
            clearInterval(movetimer);
            
            //test for game over
            win = true;
            for(i=1;i<10;i++)
            {
                if(random_clips[i]!=i)
                    win = false;
            }
            
            if(win)
                window.alert("well done!");
    
            //
            
            
            /* This bit below was hard for me */
            var key = random_clips.getKeyByValue(missing_one);
            random_clips[key] = random_clips[move_i];
            random_clips[move_i] = missing_one;
            missing_pos = move_i;
            
            
            move_i=0;
            move_counter= 0;
            done = true;
            console.dir(random_clips);
            intertimer = setInterval(main_loop, 1);
        }
        else
        {
            for(i=1;i<10;i++)
            {
                if(random_clips[i]!=missing_one)
                {
                    if(random_clips[i] == random_clips[move_i])
                    {
                        context.fillStyle="white";
                        context.fillRect(position_x[i], position_y[i], 100, 100);
                        switch(direction)
                        {
                            case "left":
                                context.drawImage(image, clipping_x[random_clips[i]], clipping_y[random_clips[i]], 100, 100,position_x[i]-move_counter, position_y[i], 100, 100);
                            break;
                            case "right":
                                context.drawImage(image, clipping_x[random_clips[i]], clipping_y[random_clips[i]], 100, 100,position_x[i]+move_counter, position_y[i], 100, 100);
                            break;
                            case "up":
                                context.drawImage(image, clipping_x[random_clips[i]], clipping_y[random_clips[i]], 100, 100,position_x[i], position_y[i]-move_counter, 100, 100);
                            break;
                            case "down":
                                context.drawImage(image, clipping_x[random_clips[i]], clipping_y[random_clips[i]], 100, 100,position_x[i], position_y[i]+move_counter, 100, 100);
                            break;
                        }
                    }
                    else
                        context.drawImage(image, clipping_x[random_clips[i]], clipping_y[random_clips[i]], 100, 100,position_x[i], position_y[i], 100, 100);
               
                }
            }
    
        }
        move_counter++;
    }
        
    
     
    function check_next_to_hit()
    {
        switch(move_i)
        {
            case 1:
                if(missing_pos ==2)
                {
                    direction = "right";
                    return true;
                }
                if(missing_pos==4)
                {
                    direction = "down";
                    return true;
                }
            break;
            case 2:
                if(missing_pos ==3)
                {
                    direction = "right";
                    return true;
                }
                if(missing_pos==1) 
                {
                    direction = "left";
                    return true;
                }
                if(missing_pos==5)    
                {
                    direction = "down";
                    return true;
                }
            break;
            case 3:
                if(missing_pos ==2)
                {
                    direction = "left"
                    return true;
                }
                if(missing_pos==6)
                { 
                    direction = "down";
                    return true;
                }
            break;
            case 4:
                if(missing_pos ==1)
                {
                    direction = "up";
                    return true;
                }
                if(missing_pos ==5)
                {
                    direction = "right";
                    return true;
                }
                if(missing_pos ==7)
                {
                    direction = "down";
                    return true;
                }
    
            break;
            case 5:
                if(missing_pos ==2)
                {
                    direction = "up";
                    return true;
                } 
                if(missing_pos==4)
                {
                    direction = "left";
                    return true;
                }
                if(missing_pos==6)
                {
                    direction = "right";
                    return true;
                }
                if(missing_pos==8)
                { 
                    direction = "down";
                    return true;
                }
            break;
            case 6:
                if(missing_pos ==3)
                {
                    direction = "up";
                    return true;
                }
                if(missing_pos ==5)
                {
                    direction = "left";
                    return true;
                }
                if(missing_pos ==9)
                {
                    direction = "down";
                    return true;
                }        break;
            case 7:
                if(missing_pos ==4)
                {
                    direction = "up"
                    return true;
                }
                if(missing_pos==8)
                { 
                    direction = "right";
                    return true;
                }
    
            break;
            case 8:
                if(missing_pos ==7)
                {
                    direction = "left";
                    return true;
                }
                if(missing_pos ==5)
                {
                    direction = "up";
                    return true;
                }
                if(missing_pos ==9)
                {
                    direction = "right";
                    return true;
                }
            break;
            case 9:
                if(missing_pos ==6)
                {
                    direction = "up"
                    return true;
                }
                if(missing_pos==8)
                { 
                    direction = "left";
                    return true;
                }
    
            break;
        }
    
        return false;
    
    }
    function in_array (needle, haystack, argStrict) {
        // Checks if the given value exists in the array  
        // 
        // version: 1109.2015
        // discuss at: http://phpjs.org/functions/in_array    // +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
        // +   improved by: vlado houba
        // +   input by: Billy
        // +   bugfixed by: Brett Zamir (http://brett-zamir.me)
        // *     example 1: in_array('van', ['Kevin', 'van', 'Zonneveld']);    // *     returns 1: true
        // *     example 2: in_array('vlado', {0: 'Kevin', vlado: 'van', 1: 'Zonneveld'});
        // *     returns 2: false
        // *     example 3: in_array(1, ['1', '2', '3']);
        // *     returns 3: true    // *     example 3: in_array(1, ['1', '2', '3'], false);
        // *     returns 3: true
        // *     example 4: in_array(1, ['1', '2', '3'], true);
        // *     returns 4: false
        var key = '',        strict = !! argStrict;
     
        if (strict) {
            for (key in haystack) {
                if (haystack[key] === needle) {                return true;
                }
            }
        } else {
            for (key in haystack) {            if (haystack[key] == needle) {
                    return true;
                }
            }
        } 
        return false;
    }
    
    Object.prototype.getKeyByValue = function( value ) {
        for( var prop in this ) {
            if( this.hasOwnProperty( prop ) ) {
                 if( this[ prop ] === value )
                     return prop;
            }
        }
    }
    
        </script>
    </head>
    <body onload="init();">
        <canvas width="500" height="500"></canvas>
    </body>
    </html>
    just put it in your webserver and add a 300px x 300px image called 'img.jpg' in the same folder. Here i uploaded an image for you

    Enjoy!
    Attached Thumbnails Attached Thumbnails puzzle bordem-img.jpg  
    You can not say you know how to do something, until you can teach it to someone else.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •