Javascript: Card shuffle game help/tutorial

ac6789 · Mar 12, 2008

Hi all, not sure if this is the right forum, or if it should go into the mac programming forum (sorry!). It does relate to web design though.

I have a client who wants to put a game to help market a set of math flash cards on their site. I can't seem to find a tutorial on it but essentially it is a "pick-a-card" type game. This is the example they gave me: http://www.aplacefortheheart.co.uk/affirmations/hayaffirmations.htm

Any tips or suggestions? I don't know enough about javascript to write it from scratch, but I do know enough about syntax to modify the script, so I just need a base script to start then I can probably edit it to my own needs.

Thanks!

angelwatt · Mar 12, 2008

Hard to say what they really want. I thought I had an idea, but when I looked at the linked site it totally threw off my thoughts. You probably want to get more specific details as to what they want.

I built a Japanese character flash card quiz/game that might be similar to what you'll need to do. I put a creative commons license on the code so you can use parts of it as desired to help you out, but it will take a bit of work to fit a math game.

I can offer more advice if you find out more details.

Edit: Link removed since it wasn't relevant.

ac6789 · Mar 12, 2008

@angel: Thanks for the reply. I guess I should have indicated the example I provided is exactly what they want, except for a "motivational" blurb, it's a math equation that comes up when a card is clicked.

I saw your example and it's not what they're looking for (sorry). They actually want a graphical representation of their cards displayed on the site and splayed out like the example.

I'm not sure how the example site did it, but I searched google for hours and all I could find were either videos on actual card shuffling or where to buy card shufflers

If you have any other questions, please let me know and I'll answer as best I can.

angelwatt · Mar 12, 2008

Alright, well in a short answer, the shuffle card page could be done by a number of images (the cards), each with a link to the appropriate math flash card page. For the shuffling, the JavaScript would adjust the z-index of the images and order them visually by their z-index.

If I get a chance I'll write up some JavaScript to do this. Shouldn't take very much.

Edit: Any reason you can't use the script on that page? It's a simple script.

ac6789 · Mar 12, 2008

anglewatt: in regards to using the script that's already there.. can i do that? Just take the script?

For some reason, I was always under the impression that scripts like this are the property of whomever created it or is this such a basic script that I can use it without getting into trouble?

Web coding copyright is such a gray area that I wasn't sure if I could copy it or not. If I can use the exiting code, and modify it for my needs that would simplify things.

And thanks for offering to write the script even though it seems like a moot point now, I would have really appreciated it.

angelwatt · Mar 13, 2008

ac6789 said:
anglewatt: in regards to using the script that's already there.. can i do that? Just take the script?

For some reason, I was always under the impression that scripts like this are the property of whomever created it or is this such a basic script that I can use it without getting into trouble?

Web coding copyright is such a gray area that I wasn't sure if I could copy it or not. If I can use the exiting code, and modify it for my needs that would simplify things.

And thanks for offering to write the script even though it seems like a moot point now, I would have really appreciated it.

Well, that code wouldn't meet your need directly so it would need to be reworked a little, and the code could also be modernized using more DOM style accesses. The code is also very small so don't think there's an issue having it inspire your coding. From the code they have I think I could actually reduce it's size by about 25%.

ac6789 · Mar 13, 2008

angelwatt said:
From the code they have I think I could actually reduce it's size by about 25%.

Cool, how would you go about doing that?

I figured it was as small as it can get...

angelwatt · Mar 13, 2008

ac6789 said:
Cool, how would you go about doing that?

I figured it was as small as it can get...

Well 25% was a little over estimated, but here is what I've got. I think part of what I was thinking about before was not just JavaScript, but the HTML portions as well. Some CSS cleans up the HTML nicely. I also adjusted the timing of the shuffle a little bit. You can tweak it as you desire.

JavaScript:

Code:

var rand = new Array(), cards, len=64;
for (var i=0; i<len; i++) rand[i]=i;
function ran(){return(Math.random()<0.5)? -1:1;} 
function Shuffle()
{
  cards = document.getElementById('pack').getElementsByTagName('a');
  rand.sort(ran); // randomize list
  // slowly move cards to new locations
  for(var x=0; x <= len; x++)
    var t = setTimeout("MoveCard("+x+")", x*20+Math.random()*800);
  clearTimeout(t);
}
function MoveCard(x)
{
  cards[x].style.left = rand[x]*10;
  cards[x].style.zIndex = rand[x];
}

CSS:

Code:

#pack a { position: absolute; }
#pack img { border: none; }

Snippet of HTML:

HTML:

<div id="pack">
<a href="louisehay1.htm" style="left:0px;">
<img src="../images/thoughtcard.jpg" width="156" height="197"></a>
<!-- 63 more -->
</div>

ac6789 · Mar 13, 2008

wow! thanks angelwatt.

I'll test this out once I get the rest of the cards converted to JPGs

Thanks again! you've been a huge help!

Search

Search

Javascript: Card shuffle game help/tutorial

ac6789

macrumors member

angelwatt

Moderator emeritus

ac6789

macrumors member

angelwatt

Moderator emeritus

ac6789

macrumors member

angelwatt

Moderator emeritus

ac6789

macrumors member

angelwatt

Moderator emeritus

ac6789

macrumors member

Our Staff