Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to use html5 to achieve memory flipping game", the content is easy to understand, clear, hope to help you solve your doubts, the following let Xiaobian lead you to study and learn "how to use html5 to achieve memory flipping game" this article.

The pairing of the opened 2 cards will be eliminated, otherwise both cards will be reversed. Demand analysis of how to place the front and back of the card and how to eliminate the card face after successful pairing, how to generate the card group and how to determine the position of each card and how to shuffle the corresponding picture, how to record the pairing information of the card group, how to determine whether the click event is the first click or the second click to deal with the cheating event: click the same card twice and click on the area outside the card face that has been eliminated. After the card is opened, it needs to be given some time for the player to see it clearly. How to respond to the pause mouse click event and obtain the coordinates of the mouse click location to determine which card is clicked MYCode:

Testvarctx;varcanvas; varcard; varfirst_pick=true;// 's first click on the logo varfirst_card=-1;varsecond_card;varback_color= "rgb"; / / the color on the back of the card vartable_color= "# FFF"; vardeck= []; / Note the varfirst_x=10;varfirst_y=50;varmargin=30;varcard_width=50;varcard_height=50; variable pair = ["" 1_a.jpg "," 1_b.jpg "], [" 2_a.jpg "," 2_b.jpg "]

["5_a.jpg", "5_b.jpg"]]; functiondraw_back () / / place the back of the card {ctx.fillStyle=back_color;ctx.fillRect (this.sx,this.sy,this.swidth,this.sheight);} function Card (sx,sy,swidth,sheeight,img,info) / / constructor {this.sx=sx;this.sy=sy;this.swidth=swidth;this.sheight= height The this.info=info;this.img=img;this.draw=draw_back;} function make_deck () / / generates the card deck and performs {vari;vara_card;varb_card;vara_pic;varb_pic;varcx=first_x;varcy=first_y; for (iTuno _ I)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.