ความคิดเห็น: ฟังก์ชั่นหลักตระหนักว่าไพ่สองใบที่เปิดจะถูกกำจัดหากจับคู่มิฉะนั้นการ์ดทั้งสองจะกลับไปด้านหลัง ด้านล่างนี้เป็นคำอธิบายของข้อกำหนดและรหัสตัวอย่าง เพื่อนที่สนใจสามารถเรียนรู้ได้
ไพ่สองใบที่เปิดจะถูกกำจัดหากจับคู่มิฉะนั้นไพ่สองใบจะกลับไปด้านหลัง
การวิเคราะห์ข้อกำหนด
วิธีการวาดหน้าการ์ดบวกและหน้าการ์ดและวิธีกำจัดหน้าการ์ดหลังจากการจับคู่ที่ประสบความสำเร็จ
วิธีสร้างเด็คและกำหนดตำแหน่งของการ์ดแต่ละใบและภาพที่เกี่ยวข้อง
วิธีการสับเปลี่ยน
วิธีบันทึกข้อมูลการจับคู่ของเด็ค
วิธีการพิจารณาว่าเหตุการณ์การคลิกเป็นคลิกครั้งแรกหรือคลิกครั้งที่สอง
การจัดการเหตุการณ์การโกง: คลิกการ์ดใบเดียวกันสองครั้งเพื่อคลิกที่หน้าการ์ดที่ถูกกำจัดและคลิกที่พื้นที่ด้านนอกหน้าการ์ด
หลังจากเปิดการ์ดแล้วคุณจะต้องให้เวลาผู้เล่นเห็นอย่างชัดเจนถึงวิธีการหยุดชั่วคราว
การตอบสนองต่อเหตุการณ์การคลิกเมาส์และรับพิกัดตำแหน่งคลิกเมาส์เพื่อกำหนดว่าคลิกการ์ดใด
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.height);
-
การ์ดฟังก์ชั่น (SX, SY, Swidth, Sheight, IMG, INFO) // Constructor
-
this.sx = sx;
this.sy = sy;
this.swidth = swidth;
this.height = อาบน้ำ;
this.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 = ภาพใหม่ ();
a_pic.src = คู่ [i] [0];
a_card = การ์ดใหม่ (cx, cy, card_width, card_height, a_pic, i);
Deck.push (a_card);
b_pic = ภาพใหม่ ();
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 J;
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 = เด็ค [i] .info;
temp_img = เด็ค [i] .img;
ดาดฟ้า [i] .info = เด็ค [j] .info;
ดาดฟ้า [i] .img = เด็ค [j] .img;
เด็ค [j] .info = temp_info;
เด็ค [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;
my = ev.layery;
} อื่นถ้า (ev.offsetx || ev.offsetx == 0) {// opera
mx = ev.offsetx;
my = ev.offsety;
-
สำหรับ (i = 0; i <deck.length; i ++)
-
การ์ด = เด็ค [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) // ถ้าคุณคลิกการ์ดใบเดียวกันสองครั้งจะไม่ดำเนินการประมวลผล
หยุดพัก;
-
-
-
ถ้า (i <deck.length)
-
ถ้า (first_pick) // ถ้าเป็นครั้งแรกคลิก
-
first_card = i;
first_pick = false; //บันทึก
ctx.drawimage (card.img, card.sx, card.sy, card.swidth, card.sheight);
-
อื่น
-
first_pick = true; //บันทึก
second_card = i;
ctx.drawimage (card.img, card.sx, card.sy, card.swidth, card.sheight);
tid = settimeout (flip_back, 1,000);
-
-
-
ฟังก์ชั่น flip_back ()
-
if (card.info == deck [first_card] .info) // การจับคู่สำเร็จ
-
ctx.fillstyle = table_color;
ctx.fillrect (เด็ค [first_card] .sx, deck [first_card] .sy, deck [first_card] .swidth, deck [first_card] .height);
ctx.fillrect (เด็ค [second_card] .sx, deck [second_card] .sy, deck [second_card] .swidth, deck [second_card] .height);
เด็ค [first_card] .sx = -1;
เด็ค [second_card] .sy = -1;
first_card = -1;
-
อื่น
-
เด็ค [first_card] .draw ();
เด็ค [second_card] .draw ();
first_card = -1;
-
-
ฟังก์ชั่น init ()
-
canvas = document.getElementById ('Canvas');
canvas.addeventListener ('คลิก', เลือก, เท็จ);
ctx = canvas.getContext ('2d');
make_deck ();
Shuffle ();
-
</script>
</head>
<body>
<Canvas/>
123142
</body>
</html>