2 kad yang diserahkan akan dihapuskan jika sepadan, jika tidak 2 kad akan dikembalikan ke belakang.
Analisis Keperluan
Cara melukis kad hadapan dan belakang dan cara menghapuskan kad selepas berjaya memadankan
Cara menjana dek dan menentukan setiap kad kedudukan kad dan gambar yang sepadan
Cara mengocok kad
Cara merekod maklumat berpasangan dek
Cara menentukan sama ada acara klik ialah klik pertama atau klik kedua
Pengendalian Acara Menipu: Klik pada kad yang sama dua kali Klik pada kawasan di luar kad
Selepas kad diserahkan, anda perlu memberikan masa tertentu pemain untuk melihat dengan jelas. Bagaimana untuk mencapai jeda
Klik tetikus Respons kepada acara dan dapatkan koordinat kedudukan klik tetikus untuk menentukan kad yang telah diklik
MYCode:
;
test <br><script type="text/javascript"> var first_pick = true; //Das Vorzeichen des ersten Klicks<br>var first_card = -1; <br>var back_color = "rgb(255,0,0)"; die Rückseite der Karte <br>var table_color = "#FFF"; //note <br>var first_x = 10; <br>var margin = 30; <br> var card_width = 50; <br>var card_height = 50; <br>varpairs = [ <br>["1_a.jpg"], <br>["2_a.jpg ", "2_b. jpg"], <br>["3_a.jpg", "3_b.jpg"], <br>["4_a.jpg", "4_b.jpg"], <br>["5_a. jpg", "5_b .jpg"] <br>]; <br>function draw_back()//Zeichne die Rückseite der Karte<br>{ <br>ctx.fillStyle = back_color; <br>ctx.fillRect(this .sx, this.sy, this .swidth, this.sheight); <br>} <br>function Card(sx, sy, swidth, sheight, img, info)//Constructor <br>{ <br>this. sx = sx; <br>this.swidth = swidth; <br>this.img = img; 🎜>this.draw = draw_back ; <br>} <br>function make_deck()//Erzeuge das Deck und zeichne es <br>{ <br>var i; <br>var b_card <br>var a_pic; <br>var b_pic; <br>var cy = first_y; <br>for (i = 0; i < pairs.length; i ) <br />{ 🎜>a_pic = new Image() ; <br />a_pic.src =pairs[i][0]; <br />a_card = new Card(cx, cy, card_height, a_pic, i); push(a_card) i); <br />deck.<br />cx = cx card_width margin; //note <br />b_card.draw(); } <br />function shuffle() //Shuffle <br />{ <br />var j; <br />var deck_length = deck.length; 🎜>var k; <br />for (k = 0; k < 3 * deck_length; k ) <br />{ <br />i = Math.floor(Math.random() * deck_length); Math.floor(Math.random () * deck_length); <br />temp_info = deck[i].info; <br />temp_img = deck[i].img; ].info; <br /> deck[i].img = deck[j].img; <br />deck[j].info = temp_info; 🎜>} <br />function Choose(ev) <br />//var out; ; <br />var i; <br />/note <br />if (ev.layerX || ev.layerX == 0) { // Firefox <br />mx = ev.layerX; LayerY; <br />} else if (ev.offsetX || ev.offsetX == 0) { // Opera <br />mx = ev.offsetX; <br />my = ev.offsetY; for (i = 0; i < deck.length; i ) <br />{ <br />card = deck[i]; <br />if (card.sx >= 0)//Die Karte wurde nicht eliminiert <br>{ <br>// Bestimmen Sie, auf welche Karte geklickt wird<br>if (mx > card.sx && mx < card.sx card.swidth && my > card.sy && my < card.sy card .sheight) <br /> { <br />if (i != first_card)//Keine Verarbeitung, wenn dieselbe Karte zweimal angeklickt wird <br />break <br />} <br />} <br />} <br />if ( i < Deck. Länge) <br />{ <br />if (first_pick)//Wenn es der erste Klick ist<br />{ <br />first_card = i; <br />first_pick = false; ctx.drawImage(card .img, card.sx, card.sy, card.swidth, card.sheight); <br />} <br />else <br />{ <br />first_pick = true; //note <br /> second_card = i; <br />ctx.drawImage(card.img, card.sx, card.sy, card.swidth, card.sheight); <br />tid=setTimeout(flip_back,1000); >} <br /> } <br />function flip_back() <br />{ <br />if (card.info == deck[first_card].info)//Pairing erfolgreich <br />{ <br />ctx.fillStyle = table_color ; <br />ctx .fillRect(deck[first_card].sx, deck[first_card].sy, deck[first_card].swidth, deck[first_card].sheight); <br />ctx.fillRect(deck[second_card].sx , deck[second_card] .sy, deck[second_card].swidth, deck[second_card].sx = -1; <br />deck[second_card].sy = -1; 🎜>first_card=- 1; <br />} <br />else <br />{ <br />deck[first_card].draw(); <br />first_card=-1 ; <br />} <br />} <br />function init() <br />{ <br />canvas = document.getElementById('canvas'); <br />ctx = canvas.getContext('2d'); <br />shuffle(); <br /></script> ><body onLoad="init();"><canvas id="canvas" width="400" height="400"/> <br>< /html> <br><br><br>
</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Kenyataan：</span><div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya：<a class="dBlack" title="Pengenalan kepada 5 antara muka HTML5 yang anda tidak tahu_html5 kemahiran tutorial" href="https://m.php.cn/ms/faq/6219.html">Pengenalan kepada 5 antara muka HTML5 yang anda tidak tahu_html5 kemahiran tutorial</a></span><span>Artikel seterusnya：<a class="dBlack" title="Pengenalan kepada 5 antara muka HTML5 yang anda tidak tahu_html5 kemahiran tutorial" href="https://m.php.cn/ms/faq/6223.html">Pengenalan kepada 5 antara muka HTML5 yang anda tidak tahu_html5 kemahiran tutorial</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="https://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ms/faq/348281.html" title="AlloyTouch全屏滚动插件 30秒搞定顺滑H5页" class="aBlack">AlloyTouch全屏滚动插件 30秒搞定顺滑H5页</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/348372.html" title="HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)" class="aBlack">HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/348373.html" title="HTML5 canvas 9绘制图片实例详解" class="aBlack">HTML5 canvas 9绘制图片实例详解</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/348374.html" title="正则表达式与HTML5新元素" class="aBlack">正则表达式与HTML5新元素</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/348469.html" title="NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法" class="aBlack">NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p></div><div class="footermid"><a href="https://m.php.cn/ms/about/us.html">Tentang kita</a><a href="https://m.php.cn/ms/about/disclaimer.html">Penafian</a><a href="https://m.php.cn/ms/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>
