這篇文章主要為大家展示了“如何使用html5實(shí)現(xiàn)記憶翻牌游戲”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用html5實(shí)現(xiàn)記憶翻牌游戲”這篇文章吧。

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),常德企業(yè)網(wǎng)站建設(shè),常德品牌網(wǎng)站建設(shè),網(wǎng)站定制,常德網(wǎng)站建設(shè)報(bào)價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,常德網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

    翻開的2張牌如果配對將會消除，否則2張牌都會返回反向。需求分析怎么放置正的牌面和背的牌面及配對成功后如何消除牌面怎么生成牌組并確定每張牌的位置和對應(yīng)的圖片如何洗牌怎么記錄牌組的配對信息如何確定點(diǎn)擊事件是第一次點(diǎn)擊還是第二次點(diǎn)擊作弊事件的處理：兩次單擊相同張牌點(diǎn)擊已經(jīng)消除的牌面點(diǎn)擊牌面以外的區(qū)域牌翻開之后需要給一定時間讓玩家看清楚，怎么實(shí)現(xiàn)暫停鼠標(biāo)點(diǎn)擊事件的響應(yīng)及獲得鼠標(biāo)點(diǎn)擊位置的坐標(biāo)從而確定點(diǎn)擊的是哪一張牌MYCode：

    varctx;varcanvas;var卡；varfirst_pick=true;//第一次點(diǎn)擊的標(biāo)志varfirst_card=-1;varsecond_card;varback_color=“rgb（255,0,0）”;//卡片背面顏色vartable_color=“#FFF”;vardeck=[];//注意varfirst_x=10;varfirst_y=50;varmargin=30;varcard_width=50;varcard_height=50;變量對=[[“”1_a.jpg“，”1_b.jpg“]，[”2_a.jpg“，”2_b.jpg“]，

    [“5_a.jpg”，“5_b.jpg”]];functiondraw_back（）//放置卡片背面{ctx.fillStyle=back_color;ctx.fillRect（this.sx，this.sy，this.swidth，this.sheight）;}函數(shù)Card（sx，sy，swidth，sheeight，img，info）//構(gòu)造函數(shù){this.sx=sx;this.sy=sy;this.swidth=swidth;this.sheight=高度；this.info=info;this.img=img;this.draw=draw_back;}函數(shù)make_deck（）//生成卡組并進(jìn)行{vari;vara_card;varb_card;vara_pic;varb_pic;varcx=first_x;varcy=first_y;對于（i=0;i

    a_pic=newImage（）;a_pic.src=對[i][0];a_card=新的Card（cx，cy，card_width，card_height，a_pic，i）;deck.push（a_card）;b_pic=newImage（）;b_pic.src=對[i][1];b_card=新卡（cx，cy+card_height+保證金，card_width，card_height，b_pic，i）;deck.push（b_card）;cx=cx+card_width+保證金；//注意a_card.draw（）;b_card.draw（）;}}函數(shù)shuffle（）//洗牌{vari;varj;vartemp_info;vartemp_img;vardeck_length=deck.length;vark;for（k=0;k<3*deck_length;k++）{i=Math.floor（Math.random（）*deck_length）;

    j=Math.floor（Math.random（）*deck_length）;temp_info=deck[i].info;temp_img=甲板[i].img;卡牌[i].info=卡牌[j].info;卡牌[i].img=卡牌[j].img;deck[j].info=temp_info;卡牌[j].img=temp_img;}}functionselect（ev）{//varout;varmx;varmy;//varpick1;//varpick2;vari;////注意是否（ev.layerX||ev.layerX==0）{//Firefoxmx=ev.layerX;我=ev.layerY;}elseif（ev.offsetX||ev.offsetX==0）{//Operamx=ev.offsetX;my=ev.offsetY;}for（i=0;i

    卡=卡組[i];if（card.sx>=0）//牌重新消除{//判斷單擊的是哪一張牌if（mx>card.sx&&mxcard.sy&&我的

    }}}函數(shù)flip_back（）{if（card.info==deck[first_card].info）//配對成功{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;}else{deck[first_card].draw（）;卡牌[second_card].draw（）;first_card=-1;}}函數(shù)init（）{canvas=document.getElementById（'canvas'）;

    canvas.addEventListener（'click'，選擇，false）;ctx=canvas.getContext（'2d'）;make_deck（）;shuffle（）;}123142

以上是“如何使用html5實(shí)現(xiàn)記憶翻牌游戲”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！