My Project 6 JS realization flop game __js

In my project I need to add a flop game, I studied it, here only to achieve the basic effect. Don't say much, share it with you.

Speaking of the flop game, the following steps are roughly divided:

Draw positive and negative card--------------> Shuffle-----------------------> Flop-------------------> Flop judgment

Here are some of the pictures,,,,,, the amount of,,, the number of people on their own two to try, here also can not provide ... Hey

1. Draw the positive and negative card

function Make_deck ()//Generate card group and draw {var i;//var a_card;//a group card container var b_card;//b group card container var a_pic;//a group card Picture var b_pic;//b Group Card picture var cx = first_x;//Initial coordinates x=50 var cy = first_y;//Initial coordinates y=10 for (i = 0; i < PAIRS.LENGTH/2 ; i++) {/*canvas draw picture * var C=document.getelementbyid ("MyCanvas"
                           );
                           var Cxt=c.getcontext ("2d");
                     
					var img=new Image () img.src= "Flower.png" Cxt.drawimage (img,0,0);
					A_pic = new Image ();
					A_PIC.SRC = pairs[i][0]; Draw Cards a group A_card = new Card (CX, CY, Card_width, Card_height, A_pic, i);//Give card property that card object generated, and draw the back of the Deck.push (A_card);
					/set a group card into an array deck[]//Draw the same group B b_pic = new Image () as the card with the A
					B_PIC.SRC = pairs[i][1];
					B_card = new Card (CX, CY + card_height + margin, card_width, card_height, B_pic, i); Deck.push (B_card)//Group B card CardsMount Array deck[] cx = cx + card_width + margin; 
					cy = cy + card_height + margin;
					Note A_card.draw ();
				B_card.draw ();
				///Draw the rear two rows of cx=first_x;
				cy=first_y+card_height*2+margin*2;
					for (i = 4; i < pairs.length i++) {a_pic = new Image ();
					A_PIC.SRC = pairs[i][0];
					Draw Card A group A_card = new cards (CX, CY, Card_width, Card_height, A_pic, i);
				
					Deck.push (A_card);
					Draw the same B group b_pic = new Image () as the card with the Group A.
					B_PIC.SRC = pairs[i][1];
					B_card = new Card (CX, CY + card_height + margin, card_width, card_height, B_pic, i);
					Deck.push (b_card)/cx = cx + card_width + margin; 
					cy = cy + card_height + margin;
					Note A_card.draw ();
				B_card.draw (); }
			}

2. Shuffle

function shuffle ()//Shuffle
			{
				var i;
				var J;
				var temp_info;
				var temp_img;
				var deck_length = deck.length;
				var k;
				for (k = 0; k < 9 * deck_length; k++) {
					i = Math.floor (Math.random () * deck_length);//0-16
					j = Math.floor (Math . Random () * deck_length);//0-16
					temp_info = deck[i].info;//1th
					temp_img = deck[i].img;//1th picture
					Deck[i] . info = deck[j].info;
					deck[i].img = deck[j].img;
					Deck[j].info = Temp_info;
					deck[j].img = temp_img;
				}
			

3. Flop judgment

function choose (EV) {//var out;
				var mx;
				var my;
				var pick1;
				var Pick2;
				var i;
					Note if (Ev.layerx | | ev.layerx = = 0) {//Firefox mx = Ev.layerx;
				my = Ev.layery;
					else if (Ev.offsetx | | ev.offsetx = = 0) {//Opera mx = ev.offsetx;
				my = ev.offsety;
					for (i = 0; i < deck.length. i++) {card = Deck[i]; if (card.sx >= 0)//card has not been eliminated {//judging which card is clicked if (mx > card.sx && mx < CARD.SX + card.swidth &
								amp;& me > Card.sy && my < Card.sy + card.sheight) {if (I!= first_card)//If two clicks the same card does not handle
						Break }} if (I < deck.length) {if (First_pick)//If it is the first time to click {window.addevent
                           Listener ("Load", function () {var myaudio=document.getelementbyidx_x ("A1");
                           myaudio.volume=0.5;//indicates that the playback volume is half myaudio.play (); Alert("Shengyin");
						});
						First_card = i;
						First_pick = false;
					Note Ctx.drawimage (card.img, CARD.SX, Card.sy, Card.swidth, card.sheight);
						else {First_pick = true;
						Note Second_card = i;
						Ctx.drawimage (card.img, CARD.SX, Card.sy, Card.swidth, card.sheight);
					Tid = settimeout (flip_back, 1000); }
				}
			}

function Flip_back () { 
				if (card.info==deck[first_card].info)//pair succeeded
				{
					ctx.fillstyle = Table_color;
					Ctx.fillrect (DECK[FIRST_CARD].SX, Deck[first_card].sy, Deck[first_card].swidth, deck[first_card].sheight);
					Ctx.fillrect (DECK[SECOND_CARD].SX, Deck[second_card].sy, Deck[second_card].swidth, deck[second_card].sheight);
					DECK[FIRST_CARD].SX =-1;
					Deck[second_card].sy =-1;
					First_card =-1;
					
				     GG ();					
				} else {
					deck[first_card].draw ();
					Deck[second_card].draw (); 
					First_card =-1;
				}
			}

All the code is as follows

<! DOCTYPE html> We can try, it's very interesting.