Member Avatar for lkkkeith

I'm working on a card game with javascript and CSS but I am a complete newbie of both languages.

I wanna ask whether I can make all card images as buttons and have an "overlapping" effect which looks like this http://www.crazyeights-cardgame.com/

Attached is my source code but the images are not included.

Please give me some advice. Thank you:)

<html>
<head>
</head>
<body bgcolor="green" >
<script type="text/javascript">

function Shuffle(a) {
  var d,c,b = a.length;
   while (b) {
    c = Math.floor(Math.random() * b);
    d = a[--b];
    a[b] = a[c];
    a[c] = d
   }
}

var deck = new Array;
var bot = new Array;
var player = new Array;

for (var i = 0; i< 52; i++) 
	deck[i] = i; //initialize the deck by ascending order

function bubbleSort(arr, n) {
      var swapped = true;
      var j = 0;
      var tmp;
      while (swapped) {
            swapped = false;
            j++;
            for (var i = 0; i < n - j; i++) {
                  if (arr[i] > arr[i + 1]) {
                        tmp = arr[i];
                        arr[i] = arr[i + 1];
                        arr[i + 1] = tmp;
                        swapped = true;
                  }
            }
      }
}

//initialize player's deck
function assignHand(hand,start){
	var counter = 0;
	while (counter < 8){
		hand[counter] = deck[start];
		counter++;
		start++;
	}
	bubbleSort(hand,8);
}

//Display hand
function displayHand(hand,text){
	document.write(text + "<br />" + "<br />");
	for (var i = 0; i < 52; i++)
		if (typeof(hand[i]) != "undefined" ){
			document.write('<IMG SRC="graphics/' + hand[i] + '.png"  width="80" height="115">');
		}
}

Shuffle(deck);

assignHand(player,0);
displayHand(player,"Your Hand");

document.write("<br />" + "<br />");

assignHand(bot,8);
displayHand(bot,"Bot 1's Hand");
</script>
</body>
</html>
Edited by lkkkeith because: n/a
  • 2 Contributors
  • 1 Reply
  • 134 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

There's no reason why cards should not overlap like that. Each card needs to be relatively or absolutely positioned, then manipulate its left and top properties to control position. To animate card movements, you will find it easier to use jQuery rather than trying to write the animation yourself.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.