...

View Full Version : Graphics swapping places



Rapala
02-19-2007, 05:31 PM
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

vwphillips
02-19-2007, 10:22 PM
<!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

Rapala
02-19-2007, 11:07 PM
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

vwphillips
02-20-2007, 12:06 AM
you'll be suprised how simple.

but late now so will explain tomorrow.

vwphillips
02-20-2007, 03:11 AM
could not sleep


<!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>

Rapala
02-20-2007, 06:05 PM
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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum