تعليق: تدرك الوظيفة الرئيسية أن البطاقتين المفتوحتين سيتم القضاء عليهما إذا تم إقرانهما ، وإلا فإن البطاقتين ستعود إلى الخلف. فيما يلي وصف للمتطلبات ورموز العينة. يمكن للأصدقاء المهتمين تعلم ذلك.
سيتم القضاء على البطاقتين المفتوحتين إذا تم إقرانهما ، وإلا فإن البطاقتين ستعود إلى الخلف.
تحليل المتطلبات
كيفية رسم الوجه الوجه والبطاقة الظهر الإيجابية وكيفية التخلص من وجه البطاقة بعد الاقتران الناجح
كيفية إنشاء سطح السفينة وتحديد موضع كل بطاقة والصورة المقابلة
كيف تخلط
كيفية تسجيل معلومات الاقتران من سطح السفينة
كيفية تحديد ما إذا كان حدث النقر هو النقر الأول أو النقر الثاني
معالجة حوادث الغش: انقر فوق نفس البطاقة مرتين للنقر فوق وجه البطاقة المنسوبة وانقر فوق المنطقة خارج وجه البطاقة.
بعد تشغيل البطاقة ، تحتاج إلى إعطاء اللاعب وقتًا معينًا لمعرفة كيفية تحقيق التوقف.
الاستجابة لحدث النقر فوق الماوس والحصول على إحداثيات موضع النقر فوق الماوس لتحديد البطاقة التي يتم النقر عليها
mycode:
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta charset = "utf-8" />
<title> اختبار </title>
<script type = "text/javaScript">
var ctx ؛
var canvas.
بطاقة var ؛
var first_pick = true ؛ // علامة النقر الأولى
var first_card = -1 ؛
var second_card ؛
var back_color = "rgb (255،0،0)" ؛ // اللون على الجزء الخلفي من البطاقة
var table_color = "#fff" ؛
var deck = [] ؛ //ملحوظة
var first_x = 10 ؛
var first_y = 50 ؛
var margin = 30 ؛
var card_width = 50 ؛
var card_height = 50 ؛
أزواج var = [
["1_A.JPG" ، "1_B.JPG"] ،
["2_A.JPG" ، "2_B.JPG"] ،
["3_A.JPG" ، "3_B.JPG"] ،
["4_A.JPG" ، "4_B.JPG"] ،
["5_A.JPG" ، "5_B.JPG"]
] ؛
وظيفة draw_back () // ارسم الجزء الخلفي من البطاقة
{
ctx.fillstyle = back_color ؛
ctx.fillRect (this.sx ، this.sy ، this.swidth ، this.sheight) ؛
}
بطاقة الوظيفة (SX ، SY ، Swidth ، Snight ، IMG ، Info) // constructor
{
this.sx = sx ؛
this.sy = sy ؛
this.swidth = swidth ؛
هذا.
this.info = info ؛
this.img = img ؛
this.draw = draw_back ؛
}
وظيفة make_deck () // إنشاء سطح السفينة ورسم
{
var i ؛
var a_card ؛
var b_card ؛
var a_pic ؛
var b_pic ؛
var cx = first_x ؛
var cy = first_y ؛
لـ (i = 0 ؛ i <pairs.length ؛ i ++)
{
a_pic = new image () ؛
a_pic.src = أزواج [i] [0] ؛
a_card = بطاقة جديدة (cx ، cy ، card_width ، card_height ، a_pic ، i) ؛
deck.push (a_card) ؛
b_pic = new image () ؛
b_pic.src = أزواج [i] [1] ؛
b_card = بطاقة جديدة (cx ، cy + card_height + margin ، card_width ، card_height ، b_pic ، i) ؛
deck.push (b_card) ؛
CX = CX + CARD_WIDTH + MARGIN ؛ //ملحوظة
a_card.draw () ؛
b_card.draw () ؛
}
}
وظيفة Shuffle () // مغلقة
{
var i ؛
فار ي.
var temp_info ؛
var temp_img ؛
var deck_length = deck.length ؛
var k ؛
لـ (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 = deck [i] .img ؛
سطح السفينة [i] .info = deck [j] .info ؛
سطح السفينة [i] .img = deck [j] .img ؛
سطح السفينة [j] .info = temp_info ؛
Deck [j] .img = temp_img ؛
}
}
وظيفة اختيار (EV)
{
// var out ؛
var mx ؛
var my ؛
// var pick1 ؛
// var pick2 ؛
var i ؛
//ملحوظة
if (ev.layerx || ev.layerx == 0) {// firefox
mx = ev.layerx ؛
بلدي = ev.layery ؛
} آخر إذا (ev.offsetx || ev.offsetx == 0) {// Opera
mx = ev.offsetx ؛
بلدي = ev.offsety ؛
}
لـ (i = 0 ؛ i <deck.length ؛ i ++)
{
البطاقة = deck [i] ؛
if (card.sx> = 0) // لم يتم القضاء على البطاقة
{
// القاضي التي يتم النقر عليها البطاقة
if (mx> card.sx && mx <card.sx + card.swidth && my> card.sy && my <card.sy + card.sheight)
{
إذا (i! = first_card) // إذا قمت بالنقر فوق نفس البطاقة مرتين ، فلن يتم إجراء أي معالجة
استراحة؛
}
}
}
إذا (أنا <deck.length)
{
إذا (first_pick) // إذا كانت هذه هي المرة الأولى
{
first_card = i ؛
first_pick = false ؛ //ملحوظة
ctx.drawimage (card.img ، card.sx ، card.sy ، card.swidth ، card.sheeight) ؛
}
آخر
{
first_pick = true ؛ //ملحوظة
Second_card = i ؛
ctx.drawimage (card.img ، card.sx ، card.sy ، card.swidth ، card.sheeight) ؛
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]. sheeight) ؛
ctx.fillRect (deck [second_card] .SX ، deck [second_card] .sy ، deck [second_card] .swidth ، deck [second_card]. sheeight) ؛
Deck [first_card] .Sx = -1 ؛
deck [second_card] .sy = -1 ؛
first_card = -1 ؛
}
آخر
{
Deck [first_card] .draw () ؛
deck [second_card] .draw () ؛
first_card = -1 ؛
}
}
وظيفة init ()
{
canvas = document.getElementById ('canvas') ؛
canvas.addeventListener ("انقر" ، اختر ، خطأ) ؛
ctx = canvas.getContext ('2d') ؛
make_deck () ؛
خلط()؛
}
</script>
</head>
<body>
<canvas/>
123142
</body>
</html>