Trying to arrange images as a deck of cards

[exidez]

Im new to javascript so im sure there is a lot i am missing in its understanding.
What i am trying to do it create a layer of images so that it looks like a pile of cards.

have seen similar codes and have tried to follow their idea but i just cant get the images to position properly. All 10 or so images are place in the exact same location.

Can any help to see why they not positioning? Also what is "em". I cant find any literature on it but assume it is the measurement em like px ?? Why is it in "" ?

function Display() {
	var el;
	var left = 0;
	var top = 0;
	var i=0;
	var n = deck.length;
	var cardNode;
	var img = document.createElement("IMG");
	img.src = "wendell7_back.png";
	el = document.getElementById('deck');
	el.appendChild(img);
	while (el.firstChild != null) el.removeChild(el.firstChild);
	for (i = 0; i < Math.round(n / 5); i++) 
	{
		cardNode = document.createElement("DIV");
		cardNode.appendChild(img);
		cardNode.style.left = left + "em"; 
		cardNode.style.top  = top + "em";
		el.appendChild(cardNode);
		left += 0.1;
		top  += 0.1;
	}

}

[crishlay]

em use as px

[Airshow]

"em" is the width of an "M" in whichever font is being used (or browser's default font if nothing overrides it).

There are at least two things wrong in your code:

1. left and top have no meaning unless the element to which they are applied also has position:absolute or position:relative (or position:fixed I think). Your safest approach is to apply position:relative (but no left: or top:) to the container and position:absolute to each of the cards.
2. There's only one img. For multiple cards, you need multiple imgs otherwise the same img gets repositioned over and over.

A more economical approach is probably to show a separate "stack" image for multiple cards and single card images for a single cards.

An even more economical approach is only to show single card images with a "tooltip" to indicate the number of cards in a stack. I have successfully employed this technique in an implementation of a game of patients.

Of course, these alternative techniques don't work if you want to show multiple cards as a "fanned out" stack of upturned cards.

Airshow

[exidez]

never mind. i got it.
i ended up making a class and modified the position of that for the deck.

I always realized that the "em" is just concatenating the value to give it a unit.

function Display() {
	var el;
	var left = 0;
	var top = 0;
	var i=0;
	var n = deck.length;
	var cardNode;
	el = document.getElementById('deck');
	while (el.firstChild != null) el.removeChild(el.firstChild);
	for (i = 0; i < Math.round(n / 5); i++) 
	{
		cardNode = document.createElement("DIV");
		cardNode.className = "card2";
		var img = document.createElement("IMG");
		img.src = "wendell7_back.png";
		cardNode.appendChild(img);
		cardNode.style.left = left + "em"; 
		cardNode.style.top = top + "em";
		el.appendChild(cardNode);
		left += .1;
		top  -= 6.2;
	}

}

[Airshow]

OK but memory hungry (despite the best efforts of garbage collection).

The containing div and each card img is created every time Display() is called.

It is more economical to predefine, in the game's init phase, one img per card and one div for each potential container on the game canvas.

Then, in response to game events, move cards from container to container with (pseudocode) container.appendChild(card) .

Not only will this approach help save memory but it will also guarantee a maximum of one representation of each card. Otherwise spurious duplicates can arise despite one's best efforts to impose a strict game logic; trust me I've been there.

Airshowi