Komentar: Fungsi utama menyadari bahwa dua kartu yang dibuka akan dihilangkan jika dipasangkan, jika tidak kedua kartu akan kembali ke belakang. Di bawah ini adalah deskripsi persyaratan dan kode sampel. Teman yang tertarik dapat mempelajarinya.
Dua kartu yang dibuka akan dihilangkan jika dipasangkan, jika tidak, kedua kartu akan kembali ke belakang.
Analisis persyaratan
Cara menggambar wajah kartu dan kartu belakang positif dan cara menghilangkan wajah kartu setelah pasangan yang berhasil
Cara menghasilkan dek dan menentukan posisi setiap kartu dan gambar yang sesuai
Cara mengocok
Cara merekam informasi pasangan dek
Cara menentukan apakah acara klik adalah klik pertama atau klik kedua
Penanganan insiden kecurangan: Klik kartu yang sama dua kali untuk mengklik wajah kartu yang dihilangkan dan klik area di luar wajah kartu.
Setelah kartu dihidupkan, Anda perlu memberi pemain waktu tertentu untuk melihat dengan jelas bagaimana mencapai jeda.
Respons terhadap acara klik mouse dan dapatkan koordinat posisi klik mouse untuk menentukan kartu mana yang diklik
MyCode:
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta charset = "UTF-8" />
<title> tes </iteme>
<type skrip = "Teks/JavaScript">
var ctx;
Var Canvas;
Kartu VAR;
var first_pick = true; // Bendera klik pertama
var first_card = -1;
var second_card;
var back_color = "rgb (255,0,0)"; // Warnanya di bagian belakang kartu
var table_color = "#fff";
var deck = []; //catatan
var first_x = 10;
var first_y = 50;
var margin = 30;
var card_width = 50;
var card_height = 50;
var pair = [
["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"]
];
function draw_back () // menggambar bagian belakang kartu
{
ctx.fillstyle = back_color;
ctx.fillrect (this.sx, this.sy, this.swidth, this.sheight);
}
Kartu Fungsi (SX, SY, Swidth, Sheight, IMG, Info) // Konstruktor
{
this.sx = sx;
this.sy = sy;
this.swidth = swidth;
this.sheight = shower;
this.info = info;
this.img = img;
this.draw = draw_back;
}
function make_deck () // menghasilkan dek dan menggambar
{
var i;
var a_card;
var b_card;
var a_pic;
var b_pic;
var cx = first_x;
var cy = first_y;
untuk (i = 0; i <pairs.length; i ++)
{
a_pic = gambar baru ();
a_pic.src = pasangan [i] [0];
A_CARD = kartu baru (CX, CY, CARD_WIDTH, CARD_HEIGHT, A_PIC, I);
deck.push (a_card);
b_pic = gambar baru ();
b_pic.src = pasangan [i] [1];
b_card = kartu baru (cx, cy + card_height + margin, card_width, card_height, b_pic, i);
deck.push (b_card);
cx = cx + card_width + margin; //catatan
a_card.draw ();
b_card.draw ();
}
}
fungsi shuffle () // tutup
{
var i;
var j;
var temp_info;
var temp_img;
var deck_length = deck.length;
var k;
untuk (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 = dek [i] .img;
Deck [i] .info = deck [j] .info;
dek [i] .img = dek [j] .img;
dek [j] .info = temp_info;
Deck [j] .img = temp_img;
}
}
Fungsi Pilih (EV)
{
// var out;
var mx;
var my;
// var pick1;
// var pick2;
var i;
//catatan
if (ev.layerx || ev.layerx == 0) {// firefox
mx = ev.layerx;
saya = ev.layery;
} else if (ev.offsetx || ev.offsetx == 0) {// opera
mx = ev.offsetx;
saya = ev.Offsety;
}
untuk (i = 0; i <deck.length; i ++)
{
kartu = dek [i];
if (card.sx> = 0) // Kartu belum dihilangkan
{
// menilai kartu mana yang diklik
if (mx> card.sx && mx <card.sx + card.swidth && my> card.sy && my <card.sy + card.sheight)
{
if (i! = first_card) // jika Anda mengklik kartu yang sama dua kali, tidak ada pemrosesan yang akan dilakukan
merusak;
}
}
}
if (i <deck.length)
{
if (first_pick) // Jika ini adalah klik pertama kali
{
first_card = i;
first_pick = false; //catatan
ctx.drawimage (card.img, card.sx, card.sy, card.swidth, card.sheight);
}
kalau tidak
{
first_pick = true; //catatan
Second_card = i;
ctx.drawimage (card.img, card.sx, card.sy, card.swidth, card.sheight);
tid = setTimeout (flip_back, 1000);
}
}
}
fungsi flip_back ()
{
if (card.info == deck [first_card] .info) // berpasangan berhasil
{
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 [decond_card] .swidth, deck [second_card] .sheight);
Deck [first_card] .sx = -1;
deck [second_card] .sy = -1;
first_card = -1;
}
kalau tidak
{
Deck [first_card] .draw ();
Deck [second_card] .draw ();
first_card = -1;
}
}
fungsi init ()
{
canvas = document.getElementById ('canvas');
canvas.addeventListener ('klik', pilih, false);
ctx = canvas.getContext ('2d');
make_deck ();
shuffle ();
}
</script>
</head>
<body>
<Canvas/>
123142
</body>
</html>