แนวคิดการใช้งานเกมและรหัสของหน่วยความจำ HTML5

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-04-25 01:32:01

ความคิดเห็น: ฟังก์ชั่นหลักตระหนักว่าไพ่สองใบที่เปิดจะถูกกำจัดหากจับคู่มิฉะนั้นการ์ดทั้งสองจะกลับไปด้านหลัง ด้านล่างนี้เป็นคำอธิบายของข้อกำหนดและรหัสตัวอย่าง เพื่อนที่สนใจสามารถเรียนรู้ได้

ไพ่สองใบที่เปิดจะถูกกำจัดหากจับคู่มิฉะนั้นไพ่สองใบจะกลับไปด้านหลัง

การวิเคราะห์ข้อกำหนด

วิธีการวาดหน้าการ์ดบวกและหน้าการ์ดและวิธีกำจัดหน้าการ์ดหลังจากการจับคู่ที่ประสบความสำเร็จ

วิธีสร้างเด็คและกำหนดตำแหน่งของการ์ดแต่ละใบและภาพที่เกี่ยวข้อง

วิธีการสับเปลี่ยน

วิธีบันทึกข้อมูลการจับคู่ของเด็ค

วิธีการพิจารณาว่าเหตุการณ์การคลิกเป็นคลิกครั้งแรกหรือคลิกครั้งที่สอง

การจัดการเหตุการณ์การโกง: คลิกการ์ดใบเดียวกันสองครั้งเพื่อคลิกที่หน้าการ์ดที่ถูกกำจัดและคลิกที่พื้นที่ด้านนอกหน้าการ์ด

หลังจากเปิดการ์ดแล้วคุณจะต้องให้เวลาผู้เล่นเห็นอย่างชัดเจนถึงวิธีการหยุดชั่วคราว

การตอบสนองต่อเหตุการณ์การคลิกเมาส์และรับพิกัดตำแหน่งคลิกเมาส์เพื่อกำหนดว่าคลิกการ์ดใด

MyCode:

<head>

<title> ทดสอบ </title>

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>

123142

</body>

</html>