这篇文章主要为大家展示了“如何使用html5实现记忆翻牌游戏”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用html5实现记忆翻牌游戏”这篇文章吧。
翻开的2张牌如果配对将会消除，否则2张牌都会返回反向。需求分析怎么放置正的牌面和背的牌面及配对成功后如何消除牌面怎么生成牌组并确定每张牌的位置和对应的图片如何洗牌怎么记录牌组的配对信息如何确定点击事件是第一次点击还是第二次点击作弊事件的处理：两次单击相同张牌点击已经消除的牌面点击牌面以外的区域牌翻开之后需要给一定时间让玩家看清楚，怎么实现暂停鼠标点击事件的响应及获得鼠标点击位置的坐标从而确定点击的是哪一张牌MYCode：
<htmlxmlns=“http://www.w3.org/1999/xhtml”><head><metacharset=“utf-8”/><title>test</title><scripttype=“text/javascript“>varctx;varcanvas;var卡；varfirst_pick=true;//第一次点击的标志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）;}函数Card（sx，sy，swidth，sheeight，img，info）//构造函数{this.sx=sx;this.sy=sy;this.swidth=swidth;this.sheight=高度；this.info=info;this.img=img;this.draw=draw_back;}函数make_deck（）//生成卡组并进行{vari;vara_card;varb_card;vara_pic;varb_pic;varcx=first_x;varcy=first_y;对于（i=0;i<pair.length;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（）;}}函数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<deck.length;i++）{
卡=卡组[i];if（card.sx>=0）//牌重新消除{//判断单击的是哪一张牌if（mx>card.sx&&mx<card.sx+card.swidth&&my>card.sy&&我的<card.sy+card.sheight）{如果（i！=first_card）//如果两次单击同一张牌不做处理；}}}if（i<deck.length）{if（first_pick）//如果是第一次点击{first_card=i;first_pick=false;//注意ctx.drawImage（card.img，card.sx，card.sy，card.swidth，card.sheight）;}else{first_pick=true;//注意second_card=i;ctx.drawImage（card.img，card.sx，card.sy，card.swidth，card.sheight）;tid=setTimeout（flip_back，1000）;
}}}函数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;}}函数init（）{canvas=document.getElementById（'canvas'）;
canvas.addEventListener（'click'，选择，false）;ctx=canvas.getContext（'2d'）;make_deck（）;shuffle（）;}</script></head><bodyonLoad=“init（）;”><canvasid=“canvas”width=“400”height=“400”/>123142</body></html>
以上是“如何使用html5实现记忆翻牌游戏”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
