Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Mar 12, 2008, 02:05 PM   #1
ac6789
macrumors member
 
Join Date: Jun 2007
Javascript: Card shuffle game help/tutorial

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/a...firmations.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!
ac6789 is offline   0 Reply With Quote
Old Mar 12, 2008, 04:59 PM   #2
angelwatt
Moderator emeritus
 
angelwatt's Avatar
 
Join Date: Aug 2005
Location: USA
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.

Last edited by angelwatt; Mar 12, 2008 at 05:46 PM. Reason: removed irrelevant link
angelwatt is offline   0 Reply With Quote
Old Mar 12, 2008, 05:29 PM   #3
ac6789
Thread Starter
macrumors member
 
Join Date: Jun 2007
@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.
ac6789 is offline   0 Reply With Quote
Old Mar 12, 2008, 05:42 PM   #4
angelwatt
Moderator emeritus
 
angelwatt's Avatar
 
Join Date: Aug 2005
Location: USA
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.

Last edited by angelwatt; Mar 12, 2008 at 06:39 PM.
angelwatt is offline   0 Reply With Quote
Old Mar 13, 2008, 12:40 AM   #5
ac6789
Thread Starter
macrumors member
 
Join Date: Jun 2007
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.
ac6789 is offline   0 Reply With Quote
Old Mar 13, 2008, 07:32 AM   #6
angelwatt
Moderator emeritus
 
angelwatt's Avatar
 
Join Date: Aug 2005
Location: USA
Quote:
Originally Posted by ac6789 View Post
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%.
angelwatt is offline   0 Reply With Quote
Old Mar 13, 2008, 02:00 PM   #7
ac6789
Thread Starter
macrumors member
 
Join Date: Jun 2007
Quote:
Originally Posted by angelwatt View Post
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...
ac6789 is offline   0 Reply With Quote
Old Mar 13, 2008, 10:15 PM   #8
angelwatt
Moderator emeritus
 
angelwatt's Avatar
 
Join Date: Aug 2005
Location: USA
Quote:
Originally Posted by ac6789 View Post
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>[/HTML]
angelwatt is offline   0 Reply With Quote
Old Mar 13, 2008, 11:07 PM   #9
ac6789
Thread Starter
macrumors member
 
Join Date: Jun 2007
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!
ac6789 is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
thread Thread Starter Forum Replies Last Post
iphone game dev tutorials ikillwindows iPhone/iPad Programming 5 Mar 18, 2011 10:37 AM
Having trouble with a Photoshop tutorial. Help pls?! idrewuk Community Discussion 0 Feb 16, 2011 12:52 AM
iPod shuffle 4th gen .. help !! john binary iPod 2 Nov 17, 2010 12:30 PM
Capture Card??? raddyator Buying Tips and Advice 7 Nov 10, 2010 05:26 PM
Mac Game Programming Tutorial robvas Mac Programming 8 Sep 10, 2010 11:13 PM


All times are GMT -5. The time now is 01:24 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC