Javascript: Card shuffle game help/tutorial

Discussion in 'Web Design and Development' started by ac6789, Mar 12, 2008.

  1. macrumors member

    Joined:
    Jun 28, 2007
    #1
    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!
     
  2. Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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.
     
  3. thread starter macrumors member

    Joined:
    Jun 28, 2007
    #3
    @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 :confused:

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

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    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.
     
  5. thread starter macrumors member

    Joined:
    Jun 28, 2007
    #5
    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. :)
     
  6. Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    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%.
     
  7. thread starter macrumors member

    Joined:
    Jun 28, 2007
    #7
    Cool, how would you go about doing that?

    I figured it was as small as it can get...
     
  8. Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    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>
     
  9. thread starter macrumors member

    Joined:
    Jun 28, 2007
    #9
    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!
     

Share This Page