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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Graphics swapping places

    Hi all, I am a newbee to the forum and to Javascript, I am currently trying to create a wee muckabout game, basically its 16 boxes in 4 columns and 4 rows. The user interacts by selecting a box then selecting either a box vertically, horizontally or diagonally but can only move 1 box length at a time.

    The problem I have is I do not know how to make the images swap positions.

    I have already created my array for the images and the for loop.

    Any advice would be greatful.

    Cheers

    Rapala

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // by Vic Phillips(19-February-2007) - http://www.vicsjavascripts.org.uk
    
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
     if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
     for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
     if (zxcp){ zxcp.appendChild(zxcele); }
     if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
     return zxcele;
    }
    
    function zxcInit(zxcid){
     var zxcp=document.getElementById(zxcid);
     window['zxc'+zxcid]=[];
     for (var zxc0=0;zxc0<16;zxc0++){
    zxcES('DIV',{position:'absolute',left:(zxc0%4*50)+'px',top:(Math.floor(zxc0/4)*50)+'px',height:'50px',width:'50px',backgroundColor:'#FFFFCC',border:'solid black 1px'},zxcp,zxc0+1).onclick=function(){ zxcChoise(this); }
     }
    }
    
    function zxcChoise(zxcobj){
     var zxcary=window['zxc'+zxcobj.parentNode.id];
     if (zxcary[0]&&zxcary[1]){ zxcary=[]; }
     if (!zxcary[0]){ zxcary[0]=[parseInt(zxcobj.style.left)/parseInt(zxcobj.style.width),parseInt(zxcobj.style.top)/parseInt(zxcobj.style.height),zxcobj] }
     else if (!zxcary[1]){
      zxcary[1]=[parseInt(zxcobj.style.left)/parseInt(zxcobj.style.width),parseInt(zxcobj.style.top)/parseInt(zxcobj.style.height),zxcobj];
      if (Math.abs(zxcary[0][0]-zxcary[1][0])<=1&&Math.abs(zxcary[0][1]-zxcary[1][1])<=1&&!(zxcary[0][0]==zxcary[1][0]&&zxcary[0][1]==zxcary[1][1])){
       var zxcsave=[zxcary[0][2].style.left,zxcary[0][2].style.top];
       zxcES(zxcary[0][2],{left:zxcary[1][2].style.left,top:zxcary[1][2].style.top});
       zxcES(zxcary[1][2],{left:zxcsave[0],top:zxcsave[1]});
      }
     }
     window['zxc'+zxcobj.parentNode.id]=zxcary;
    }
    
    
    //-->
    </script>
    </head>
    
    <body onload="zxcInit('tst');">
    
    <div id="tst" style=position:relative;left:100px;top:100px;" ></div>
    </body>
    
    </html>
    Have a good look at it, then I will explain if required
    Last edited by vwphillips; 02-19-2007 at 09:24 PM. Reason: note at bottom
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeh, that is the sort of thing I am after, but your script looks kind of complex, any chance you could break it down for me please.

    Cheers for the reply

    Rapala

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    you'll be suprised how simple.

    but late now so will explain tomorrow.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    could not sleep
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // by Vic Phillips(19-February-2007) - http://www.vicsjavascripts.org.uk
    
    
    
    // Please note that the code only took 5-10 minutes(and only one typo) to write so wont be optomised.
    
    
    // First this general purpose function, I use this in most applications
    // it can
    // 1) create an element
    // 2) apply any number of inline style features to the created or existing element
    // 3) append the element to a specified element
    // 4) append a text node to the created, existing or specified element.
    // Obviously very useful, simple to use and code saving.
    // parameter 0
    // If parameter 0 is an element tag name as a string the function creates that element type.
    // and that element object is the target of the balance of the function.
    // If parameter 0 is an element object that element is the target of the balance of the function.
    // parameter 1
    // Required style features are defined in a type of keyed array and passed to the funtion in parameter 1.
    // parameter 2
    // If the created or passed element defined in parameter 0 is to be appended to a specified element object,
    // that  element object is specified in parameter 2.
    // parameter 3
    // If a next node is to be appended to the created or passed element(parameter 0) the node text(data/value)
    // is passed as parameter 3.
    //
    // Finally the element is returned for any subsequent processing.
    //
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
     if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
     for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
     if (zxcp){ zxcp.appendChild(zxcele); }
     if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
     return zxcele;
    }
    
    function zxcInit(zxcid){
    // identify the parent(anchor) element object from its ID name.
    var zxcp=document.getElementById(zxcid);
    // generate a dynamic global array variable with a name referenced to the parent ID
    // Could use a standard global variable but the method used is generic allowing muliple applictions using the same code.
     window['zxc'+zxcid]=[];
    // Now to generate the divs, these could be images but I did not have suitable images to hand
    // The horizontal spacing is controlled by 'zxc0%4' which equates to 0,1,2,3,0,1,2,3,0,1,2,3,0,1,2,3,
    // these multiplied by 50(the width of the div) result in spacing or 0,50,100,150,0,50,100,150,0,50,100,150,0,50,100,150.
    // The vertical spacing is controlled by Math.floor(zxc0/4)  which equates to 0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3.
    // these multiplied by 50(the height of the div) result in spacing or 0,0,0,0,50,,50,50,50,100,100,100,100,150,150,150,150.
    // An event call is attached to the div, returned back from function 'zxcES'.
    // The event call to function 'zxcChoise' passes the div element object.
    // All this in a single line! (some will not like this but never mind a)
     for (var zxc0=0;zxc0<16;zxc0++){
      zxcES('DIV',{position:'absolute',left:(zxc0%4*50)+'px',top:(Math.floor(zxc0/4)*50)+'px',height:'50px',width:'50px',backgroundColor:'#FFFFCC',border:'solid black 1px'},zxcp,zxc0+1).onclick=function(){ zxcChoise(this); }
     }
    // Five lines of code and its all over.
    }
    
    function zxcChoise(zxcobj){
    // First we need to retrieve the array associated with the div parent, the se of zxcary is to save typing
     var zxcary=window['zxc'+zxcobj.parentNode.id];
    // we are going to use two fields of the array
    // field 0 is for the first div clicked.
    // field 1 is for the second div clicked.
    // If both fields are complete we clear the array and start again.
     if (zxcary[0]&&zxcary[1]){ zxcary=[]; }
    // If field 0 is empty it must be the first div clicked.
    // The position of the div is identified by its position divided by the div width or height
    // These positions(column and row together with the div element object are recorded in an array in field 0
    // example: zxcary=[[2,3,object]]
     if (!zxcary[0]){ zxcary[0]=[parseInt(zxcobj.style.left)/parseInt(zxcobj.style.width),parseInt(zxcobj.style.top)/parseInt(zxcobj.style.height),zxcobj] }
    // If field 1 is empty it must be the second div clicked.
     else if (!zxcary[1]){
    // example: zxcary=[[2,3,object],[3,2,object]]
      zxcary[1]=[parseInt(zxcobj.style.left)/parseInt(zxcobj.style.width),parseInt(zxcobj.style.top)/parseInt(zxcobj.style.height),zxcobj];
    // now check that the rows and columns of each div are one or zero column/row apart and both row and columns are the same
      if (Math.abs(zxcary[0][0]-zxcary[1][0])<=1&&Math.abs(zxcary[0][1]-zxcary[1][1])<=1&&!(zxcary[0][0]==zxcary[1][0]&&zxcary[0][1]==zxcary[1][1])){
    // could do this from the recorded row and column but easier to record the position of the first div held in zxcary[0][2]
       var zxcsave=[zxcary[0][2].style.left,zxcary[0][2].style.top];
    // now change the position of the first div to the position of the second div
       zxcES(zxcary[0][2],{left:zxcary[1][2].style.left,top:zxcary[1][2].style.top});
    // now change the position of the second div to the saved positions(the position of the first div).
       zxcES(zxcary[1][2],{left:zxcsave[0],top:zxcsave[1]});
      }
     }
    // finally return the array content to the 'parent div' array variable
     window['zxc'+zxcobj.parentNode.id]=zxcary;
    }
    // Easy! yes?
    
    // and you can have as applications many as you want
    
    //-->
    </script>
    </head>
    
    <body onload="zxcInit('tst');">
    
    <div id="tst" style=position:relative;left:100px;top:100px;" ></div>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Im still a bit confused with your code VW, what are the zxc parts are they variables??

    I could send you what I have got already??

    If that helps?


  •  

    Posting Permissions

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