My project 6 js implements a flop game and js flop

My project 6 js implements a flop game and js flop

In my project, I need to add a ticker board game in it. I have studied it and only achieved the basic effect here. Let's just share it with you.

When it comes to flop games, there are roughly the following steps:

Draw front and back cards --------------> shuffling -----------------------> flop -------------------> flop judgment

Here we will try to apply some images, and the forehead, and you will try them two by yourself. We cannot provide them here... Hey

1. Draw front and back cards

Function make_deck () // generate a card group and draw {var I; // var a_card; // var B _card of group a card container; // var a_pic of group B card container; // group a card image var B _pic; // group B card image var cx = first_x; // initial coordinate X = 50var cy = first_y; // initial coordinate Y = 10for (I = 0; I <pairs. length/2; I ++) {/* Canvas draw image * 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 a Card group a_card = new Card (cx, cy, card_width, card_height, a_pic, I); // The card attribute is generated for the card object, and deck is drawn on the back. push (a_card); // pack group a cards into the array deck [] // draw group B B _pic = new Image () with the same card surface as group (); 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); // pack group B cards into the array deck [] cx = cx + card_width + margin; // cy = cy + card_height + margin; // notea_card.draw (); B _card.draw ();} // The second row after painting 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 a Card group a_card = new Card (cx, cy, card_width, card_height, a_pic, I); deck. push (a_card); // draw B group B _pic = new Image (); B _pic.src = pairs [I] [1] with the same card surface as group a; 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; // notea_card.draw (); B _card.draw ();}}

2. Shuffling

Function shuffle () // shuffling {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-16j = Math. floor (Math. random () * deck_length); // 0-16temp_info = deck [I]. info; // 1st temp_img = deck [I]. img; // 1st images 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; // noteif (ev. layerX | ev. layerX = 0) {// Firefoxmx = ev. layerX; my = ev. layerY;} else if (ev. offsetX | ev. offsetX = 0) {// Operamx = ev. offsetX; my = ev. offsetY;} for (I = 0; I <deck. length; I ++) {card = deck [I]; if (card. sx> = 0) // The card is not eliminated {// determine which card is clicked if (mx> card. sx & mx <card. sx + card. swidth & my> card. sy & my <car D. sy + card. sheight) {if (I! = First_card) // if you click the same card twice, do not process break; }}} if (I <deck. length) {if (first_pick) // if it is the first time you click {window. addEventListener ("load", function () {var myaudio = document. getElementByIdx_x ("a1"); myaudio. volume = 0.5; // indicates that the playback volume is half of myaudio. play (); alert ("shengyin") ;}); first_card = I; first_pick = false; // notectx. drawImage (card. img, card. sx, card. sy, card. swidth, card. sheight);} else {first_pick = true; // notesecond_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) // paired {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 ;}}

The Code is as follows:

<! DOCTYPE html> You can try it. It's interesting.













A flop js
This .....
 
I want to help you make a PPT flop game with six pictures. The front is sorted by one to six, and the back is what I want to add myself, which is not helpful online.
An example has been provided. Please download it. This feature is to open this card when you click an English word to see what it is.
 
The main idea is to create a Custom Animation "disappear" animation + trigger.