Making a random card game

**ryank** · 03-16-2015, 12:32 AM

Hello, I have a limited to basic understanding of coding and have come to the conclusion I need some help on a project for my site.

I currently have a card game as a printable, but would like to have a version playable in browser. I'm thinking javascript is the way to go here. PHP is not available to me, however I am able to insert code directly into the page. The game would consist of a "startup" image with rules etc. , and then click that image to randomly load one of roughly one hundred card images, then another round and so on. No ending round is needed for this type of game. Also the images will likely be hosted on a separate site so linked by url.

Any and all help is greatly appreciated!

**vwphillips** · 03-16-2015, 02:22 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<img id="img1" src="http://www.vicsjavascripts.org/StdImages/1.gif" onclick="zxcRandomImage.Random('img1');"/>

<script type="text/javascript">
/*<![CDATA[*/

var zxcRandomImage={

  Random:function(id){
   var o=this['zxc'+id],n,ni;
   if (o){
    n=Math.floor(Math.random()*o.ary.length);
    while (n==o.n){
     n=Math.floor(Math.random()*o.ary.length);
    }
    o.n=n;
    ni=new Image();
    ni.src=o.ary[n]
    this.load(o,ni);
   }
  },

  Init:function(o){
   var id=o.ImageID,ary=o.SRCArray,img=document.getElementById(id);
   if (img&&ary instanceof Array&&ary.length>1){
    o.img=img;
    o.ary=ary;
    o.n=-1;
    this['zxc'+id]=o;
   }
  },

  load:function(o,ni){
   var oop=this;
   clearTimeout(o.to);
   if (ni.width<40){
    return o.to=setTimeout(function(){  oop.load(o,ni); },200);
   }
   o.img.src=ni.src;
  }
}

zxcRandomImage.Init({
 ImageID:'img1',
 SRCArray:[
  'http://www.vicsjavascripts.org/StdImages/1.gif',
  'http://www.vicsjavascripts.org/StdImages/2.gif',
  'http://www.vicsjavascripts.org/StdImages/3.gif',
  'http://www.vicsjavascripts.org/StdImages/4.gif',
  'http://www.vicsjavascripts.org/StdImages/5.gif'  // no commer
 ]
});

/*]]>*/
</script>

</body>

</html>