My project 6 js implements flop games

My project 6 js implements flop games

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:

 Test<Script type = "text/javascript" src = ". /js/jquery. min. js "> </script> <script type =" text/javascript "> var I = 0; // time-based var ctx; var canvas; var card; // card var first_pick = true; // The flag var first_card =-1; var second_card; var back_color = "rgb (, 0 )"; // The Color of the back of the card var table_color = "# FFF"; var deck = []; // card array // notevar first_x = 50; // The initial coordinate Xvar first_y = 10; // initial coordinate Yvar margin = 30; // interval between cards remaining card var card_width = 100; // Card width var card_height = 100; // card height // define the card front image var pairs = [["img/g0a.png", "img/g0b.png"], ["img/2_a.png", "img/2_ B .png"], ["img/3_a.png", "img/3_ B .png"], ["img/4_a.png ", "img/4_ B .png"], ["img/5_a.png", "img/5_ B .png"], ["img/6_a.png", "img/6_ B .png"], ["img/7_a.png", "img/7_ B .png"], ["img/8_a.png", "img/8_ B .png"]; // function draw_back () {ctx. fillStyle = back_color; ctx. fillRect (this. sx, this. sy, t His. swidth, this. sheight);} // defines the attributes of the Card: x, y coordinate, length and width, background image, information function Card (sx, sy, swidth, sheight, img, info) // constructor {this. sx = sx; this. sy = sy; this. swidth = swidth; this. sheight = sheight; this.info = info; this. img = img; this. draw = draw_back; // draw back} function make_deck () // generate a card group and draw {var I; // var a_card; // var B _card of group a card container; // group B card container var a_pic; // group a card image var B _pic; // group B card image var cx = first_x; // initial coordinate X = 50var cy = first_y; // initial Start 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 Im with the same card surface as group Age (); 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 = n Ew 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 ();}} 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;} function choose (ev) {// var out; var mx; var my; // var pick1; // var p Ick2; 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 <card. 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 ;}} function init () {canvas = document. getElementById ('canvas '); canvas. addEventListener ('click', choose, false); ctx = canvas. getContext ('2d '); make_deck (); // generate a card group and draw shuffle (); // shuffling} function jishi () {// alert ("----------") I ++; // alert (I) document. getElementById ("p1 "). innerHTML = I // alert ("----------") if (I> 60) {init (); document. getElementById ("p1 "). innerHTML = "time to" }}$ (window ). ready (function () {init (); $ ("# start "). click (function () {setInterval ("jishi ()", 1000) ;}); </script> 
                 Start timing        
Dddddddddddd
        
  
   
  
  
 
 

You can try it. It's interesting.