การสร้างเกมเรือกวาดทุ่นระเบิดโดยใช้ Javascript, HTML และ CSS

การสร้างเกมเรือกวาดทุ่นระเบิดโดยใช้ Javascript, HTML และ CSS

ในบทความนี้ คุณจะได้เรียนรู้วิธีสร้างเรือกวาดทุ่นระเบิดโดยใช้ JavaScript, HTML และ CSS ฉันยังใช้ jQuery ซึ่งเป็นไลบรารี JavaScript ที่เป็นประโยชน์สำหรับการโต้ตอบกับ html เมื่อใดก็ตามที่คุณเห็นการเรียกใช้ฟังก์ชันด้วยเครื่องหมายดอลลาร์ชั้นนำ นั่นคือ jQuery ในที่ทำงาน

หากคุณต้องการเรียนรู้วิธีสร้างเรือกวาดทุ่นระเบิดด้วย JavaScript ขั้นตอนแรกคือการทำความเข้าใจวิธีการทำงานของเกม มาเริ่มกันเลยดีกว่าและพูดคุยเกี่ยวกับกฎเกณฑ์

กฎของเกม

1. กระดานกวาดทุ่นระเบิดมีขนาด 10 x 10 ตร.ม. เราสามารถทำให้เป็นขนาดอื่นๆ ได้ เช่น เวอร์ชันคลาสสิกของ Windows แต่เพื่อจุดประสงค์ในการสาธิต เราจะใช้เกมเวอร์ชันเริ่มต้นที่เล็กกว่า
2. กระดานมีจำนวนทุ่นระเบิดแบบสุ่มที่กำหนดไว้ล่วงหน้า ผู้เล่นไม่สามารถมองเห็นได้
3. เซลล์สามารถอยู่ในสถานะใดสถานะหนึ่งจากสองสถานะ: เปิดหรือปิด การคลิกที่เซลล์จะเปิดขึ้น หากมีเหมืองซ่อนอยู่ เกมจะจบลงด้วยความล้มเหลว หากไม่มีทุ่นระเบิดอยู่ในเซลล์ แต่มีทุ่นระเบิดอยู่ในเซลล์ข้างเคียงอย่างน้อยหนึ่งเซลล์ เซลล์ที่เปิดจะแสดงจำนวนทุ่นระเบิดที่อยู่ใกล้เคียง เมื่อไม่มีการขุดเพื่อนบ้านของเซลล์ เซลล์เหล่านั้นแต่ละเซลล์จะถูกเปิดโดยอัตโนมัติ
4. คลิกขวาที่เซลล์ทำเครื่องหมายด้วยแฟล็ก ธงระบุว่าผู้เล่นรู้ว่ามีทุ่นระเบิดซ่อนอยู่ที่นั่น
5. การกดปุ่ม ctrl ค้างไว้ในขณะที่คลิกบนเซลล์ที่เปิดอยู่นั้นมีกฎเกณฑ์ที่ซับซ้อนเล็กน้อย หากจำนวนแฟล็กที่อยู่รอบๆ เซลล์ตรงกับจำนวนทุ่นระเบิดที่อยู่ใกล้เคียง และแต่ละเซลล์ที่ถูกตั้งค่าสถานะมีทุ่นระเบิดอยู่ เซลล์ใกล้เคียงที่ปิดและไม่มีแฟล็กทั้งหมดจะถูกเปิดโดยอัตโนมัติ อย่างไรก็ตาม หากแม้แต่ธงเหล่านี้ถูกวางผิดช่อง เกมก็จะจบลงด้วยความล้มเหลว
6. ผู้เล่นจะชนะเกมหากเปิดช่องทั้งหมดโดยไม่มีทุ่นระเบิด

โครงสร้างข้อมูล

เซลล์

รหัส JavaScript แสดงถึงเซลล์กวาดทุ่นระเบิด

แต่ละเซลล์เป็นวัตถุที่มีคุณสมบัติหลายประการ:

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

กระดาน

รหัส JavaScript แสดงถึงกระดานเกมของเรา

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

หลังจากสร้างกระดานแล้ว เราต้องทำภารกิจเพิ่มอีกสองอย่าง: สุ่มมอบหมายทุ่นระเบิดและคำนวณจำนวนทุ่นระเบิดที่อยู่ใกล้เคียง เราจะพูดถึงงานเหล่านี้เพิ่มเติมในหัวข้อถัดไป

อัลกอริทึม

สุ่มกำหนดเหมือง

รหัส JavaScript สำหรับการสุ่มกำหนดทุ่นระเบิดให้กับเซลล์

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

สำหรับทุก ๆ เหมืองที่เราวาง เราจะต้องสร้างแถวและคอลัมน์แบบสุ่ม นอกจากนี้ ชุดค่าผสมของแถวและคอลัมน์เดียวกันไม่ควรปรากฏมากกว่าหนึ่งครั้ง มิฉะนั้นเราจะจบลงด้วยจำนวนทุ่นระเบิดที่น้อยกว่าที่เราต้องการ เราต้องทำซ้ำการสร้างตัวเลขสุ่มหากมีซ้ำปรากฏขึ้น

เมื่อมีการสร้างพิกัดเซลล์แบบสุ่ม เราจะตั้งค่าคุณสมบัติ *ขุด * เป็นจริงของเซลล์ที่เกี่ยวข้องในกระดานของเรา

ฉันได้สร้างฟังก์ชันตัวช่วยเพื่อช่วยในการสร้างตัวเลขสุ่มภายในช่วงที่ต้องการ ดูด้านล่าง:

ฟังก์ชัน Helper สำหรับการสร้างจำนวนเต็มแบบสุ่ม

คำนวณจำนวนเพื่อนบ้านของฉัน

รหัส JavaScript สำหรับคำนวณจำนวนทุ่นระเบิดที่อยู่ใกล้เคียงของแต่ละเซลล์

ทีนี้มาดูสิ่งที่ต้องใช้ในการคำนวณจำนวนทุ่นระเบิดที่อยู่ใกล้เคียงของแต่ละเซลล์ในกระดานของเรา

คุณจะสังเกตเห็นว่าเราเริ่มต้นด้วยการวนซ้ำแต่ละแถวและคอลัมน์บนกระดาน ซึ่งเป็นรูปแบบทั่วไป ซึ่งจะทำให้เราสามารถรันโค้ดเดียวกันในแต่ละเซลล์ของเราได้

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

หากเซลล์นั้นไม่ได้ถูกขุด เราต้องดูว่ามีทุ่นระเบิดอยู่กี่ตัวที่อยู่รอบๆ สิ่งแรกที่เราทำคือเรียกฟังก์ชันตัวช่วย **getNeighbors ** ซึ่งส่งคืนรายการรหัสของเซลล์ข้างเคียง จากนั้นเราจะวนรอบรายการนี้ เพิ่มจำนวนทุ่นระเบิด และอัปเดตคุณสมบัติ *neighborMineCount * ของเซลล์อย่างเหมาะสม

คุณจะไม่เป็นเพื่อนบ้านของฉัน?

มาดูกันดีกว่าว่าฟังก์ชัน **getNeighbors ** จะถูกใช้งานหลายครั้งในโค้ด ฉันได้กล่าวไว้ก่อนหน้านี้ว่าตัวเลือกการออกแบบบางอย่างของฉันจะไม่ปรับขนาดเป็นบอร์ดที่ใหญ่ขึ้น ตอนนี้เป็นเวลาที่ดีที่จะลองค้นหาพวกเขา

รหัส JavaScript สำหรับรับรหัสที่อยู่ใกล้เคียงทั้งหมดของเซลล์กวาดทุ่นระเบิด

ฟังก์ชันใช้รหัสเซลล์เป็นพารามิเตอร์ จากนั้นเราแบ่งมันออกเป็นสองส่วนทันทีเพื่อให้เรามีตัวแปรสำหรับแถวและคอลัมน์ เราใช้ฟังก์ชัน **parseInt ** ซึ่งสร้างในภาษา JavaScript เพื่อเปลี่ยนตัวแปรเหล่านี้เป็นจำนวนเต็ม ตอนนี้เราสามารถดำเนินการทางคณิตศาสตร์กับพวกมันได้

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

เซลล์กวาดทุ่นระเบิดและเพื่อนบ้าน

แม้ว่าสิ่งนี้จะดีสำหรับกรณีทั่วไป แต่ก็มีบางกรณีพิเศษที่เราจำเป็นต้องกังวล กล่าวคือเซลล์ตามแนวชายแดนของกระดานเกมของเรา เซลล์เหล่านี้จะมีเพื่อนบ้านน้อยกว่าแปดคน

เพื่อดูแลสิ่งนี้ เราวนซ้ำรายการรหัสเพื่อนบ้านและลบรหัสใด ๆ ที่มีความยาวมากกว่า 2 เพื่อนบ้านที่ไม่ถูกต้องทั้งหมดอาจเป็น -1 หรือ 10 ดังนั้นการตรวจสอบเพียงเล็กน้อยนี้จึงแก้ปัญหาได้อย่างดี

นอกจากนี้เรายังต้องลดตัวแปรดัชนีของเราทุกครั้งที่เราลบ id ออกจากรายการของเราเพื่อให้ซิงค์กัน

มันขุด?

เอาล่ะ เรามีฟังก์ชันสุดท้ายที่จะพูดถึงในส่วนนี้: isMined .

ฟังก์ชัน JavaScript ที่ตรวจสอบว่าเซลล์ถูกขุดหรือไม่

ฟังก์ชัน **isMined ** ค่อนข้างเรียบง่าย มันแค่ตรวจสอบว่าเซลล์ถูกขุดหรือไม่ ฟังก์ชันจะคืนค่า 1 หากขุดได้ และเป็น 0 หากไม่ได้ขุด คุณลักษณะนี้ช่วยให้เราสามารถสรุปค่าที่ส่งกลับของฟังก์ชันได้ในขณะที่เราเรียกมันซ้ำๆ ในลูป

นั่นเป็นการสรุปอัลกอริธึมสำหรับการตั้งค่ากระดานเกมเรือกวาดทุ่นระเบิดของเรา ไปที่การเล่นเกมจริงกัน

การเปิดเซลล์

โค้ด JavaScript ที่ทำงานเมื่อมีการเปิดเซลล์กวาดทุ่นระเบิด

เอาล่ะมาดำดิ่งลงไปในเด็กเลวคนนี้ เราดำเนินการฟังก์ชันนี้ทุกครั้งที่ผู้เล่นคลิกที่เซลล์ มันไม่ มาก ของงาน และยังใช้สิ่งที่เรียกว่า การเรียกซ้ำ หากคุณไม่คุ้นเคยกับแนวคิดนี้ โปรดดูคำจำกัดความด้านล่าง:

การเรียกซ้ำ : ดู การเรียกซ้ำ .

อ่า เรื่องตลกวิทยาการคอมพิวเตอร์ พวกเขามักจะไปได้ดีที่บาร์และร้านกาแฟ คุณควรลองใช้พวกเขากับคนน่ารักที่คุณเคยสนใจ

ยังไงก็ได้ ฟังก์ชันแบบเรียกซ้ำ เป็นเพียงฟังก์ชันที่เรียกตัวเอง ฟังดูเหมือน stack overflow ที่รอให้เกิดขึ้นใช่ไหม? นั่นเป็นเหตุผลที่คุณต้องการกรณีฐานที่ส่งกลับค่าโดยไม่ต้องทำการเรียกซ้ำในครั้งต่อไป

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

จัดการคลิกอธิบาย

ฟังก์ชัน **handleClick ** ใช้ id เซลล์เป็นพารามิเตอร์ เราจำเป็นต้องจัดการกับกรณีที่ผู้เล่นกดปุ่ม ctrl ขณะคลิกที่เซลล์ แต่เราจะพูดถึงเรื่องนี้ในหัวข้อต่อไป

สมมติว่าเกมยังไม่จบและเรากำลังจัดการเหตุการณ์คลิกซ้ายแบบพื้นฐาน เราต้องตรวจสอบสองสามอย่าง เราต้องการละเว้นการคลิกหากผู้เล่นเปิดหรือตั้งค่าสถานะเซลล์แล้ว มันจะน่าผิดหวังสำหรับผู้เล่นหากการคลิกที่ไม่ถูกต้องบนเซลล์ที่ถูกตั้งค่าสถานะแล้วจบเกม

หากทั้งสองไม่เป็นความจริงเราจะดำเนินการต่อ หากมีทุ่นระเบิดอยู่ในเซลล์ เราจำเป็นต้องเริ่มเกมด้วยตรรกะและแสดงทุ่นระเบิดที่ระเบิดเป็นสีแดง มิฉะนั้นเราจะเปิดเซลล์

หากช่องที่เปิดอยู่มีทุ่นระเบิดอยู่รอบๆ เราจะแสดงจำนวนทุ่นระเบิดที่อยู่ใกล้เคียงให้ผู้เล่นเห็นด้วยสีแบบอักษรที่เหมาะสม หากไม่มีเหมืองอยู่รอบๆ เซลล์ ก็ถึงเวลาที่การเรียกซ้ำของเราจะเริ่มต้นขึ้น หลังจากตั้งค่าสีพื้นหลังของเซลล์เป็นสีเทาเข้มขึ้นเล็กน้อย เราจะเรียก **handleClick **ในแต่ละเซลล์ข้างเคียงที่ยังไม่ได้เปิดโดยไม่มี a ธง.

ฟังก์ชั่นตัวช่วย

มาดูฟังก์ชันตัวช่วยที่เราใช้อยู่ในฟังก์ชัน **handleClick ** กัน เราเคยคุยกันแล้วเกี่ยวกับ รับเพื่อนบ้าน ดังนั้นเราจะข้ามอันนั้นไป มาเริ่มกันที่ฟังก์ชัน **การสูญเสีย**

รหัส JavaScript ที่ถูกเรียกเมื่อใดก็ตามที่ผู้เล่นแพ้เกม

เมื่อการสูญเสียเกิดขึ้น เราจะตั้งค่าตัวแปรที่ติดตามสิ่งนี้ จากนั้นแสดงข้อความแจ้งให้ผู้เล่นทราบว่าเกมจบลงแล้ว นอกจากนี้เรายังวนรอบแต่ละเซลล์และแสดงตำแหน่งของทุ่นระเบิด แล้วเราก็หยุดนาฬิกา

ประการที่สอง เรามีฟังก์ชัน **getNumberColor ** ฟังก์ชันนี้มีหน้าที่ในการให้สีที่สอดคล้องกับจำนวนทุ่นระเบิดที่อยู่ใกล้เคียง

รหัส JavaScript ที่ส่งผ่านตัวเลขและส่งคืนสี

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

ตั้งค่าสถานะเซลล์

รหัส JavaScript สำหรับวางแฟล็กบนเซลล์กวาดทุ่นระเบิด

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

การเปิดเซลล์เพื่อนบ้าน

รหัส JavaScript สำหรับจัดการ ctrl + คลิกซ้าย

เราได้ครอบคลุมการกระทำของการเปิดช่องและทำเครื่องหมายด้วยธง ดังนั้นเรามาพูดถึงการกระทำสุดท้ายที่ผู้เล่นสามารถทำได้: การเปิดเซลล์ที่อยู่ใกล้เคียงของเซลล์ที่เปิดอยู่แล้ว ฟังก์ชัน **handleCtrlClick ** มีตรรกะสำหรับสิ่งนี้ ผู้เล่นนี้สามารถดำเนินการนี้ได้โดยกด ctrl ค้างไว้แล้วคลิกซ้ายที่ช่องเปิดที่มีทุ่นระเบิดที่อยู่ใกล้เคียง

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

หากเราสามารถดำเนินการต่อได้ สิ่งต่อไปที่เราทำคือตรวจสอบว่ามีเซลล์ที่ถูกตั้งค่าสถานะไม่มีเหมืองอยู่หรือไม่ หากเป็นเช่นนี้ เราทราบดีว่าผู้เล่นคาดการณ์ตำแหน่งของทุ่นระเบิดไม่ถูกต้อง และการคลิกที่เซลล์ข้างเคียงที่ไม่ได้ตั้งค่าสถานะทั้งหมดจะจบลงด้วยการสูญเสีย เราจะต้องตั้งค่าตัวแปร *lost * ในพื้นที่และเรียกใช้ฟังก์ชัน **loss ** เราได้พูดถึงฟังก์ชัน **การสูญเสีย** ก่อนหน้านี้ในบทความ

หากผู้เล่นไม่แพ้ เราจะต้องเปิดช่องข้างๆ ที่ไม่ได้ติดธง เราเพียงแค่ต้องวนซ้ำและเรียกใช้ฟังก์ชัน **handleClick ** ในแต่ละอัน อย่างไรก็ตาม ก่อนอื่นเราต้องตั้งค่าตัวแปร *ctrlIsPressed *เป็นเท็จ เพื่อป้องกันการตกลงไปในฟังก์ชัน **handleCtrlClick **โดยไม่ได้ตั้งใจ

เริ่มเกมใหม่

เราวิเคราะห์ JavaScript ที่จำเป็นต่อการสร้างเรือกวาดทุ่นระเบิดเกือบเสร็จแล้ว! ทั้งหมดที่เราเหลือไว้คือขั้นตอนการเริ่มต้นที่จำเป็นสำหรับการเริ่มเกมใหม่

จาวาสคริปต์กับ c++

รหัส JavaScript สำหรับการเริ่มต้นเรือกวาดทุ่นระเบิด

สิ่งแรกที่เราทำคือเริ่มต้นตัวแปรสองสามตัว เราต้องการค่าคงที่ในการจัดเก็บรหัส html สำหรับไอคอนธงและเหมือง เรายังต้องการค่าคงที่ในการจัดเก็บขนาดกระดาน จำนวนทุ่นระเบิด ค่าจับเวลา และจำนวนทุ่นระเบิดที่เหลืออยู่

นอกจากนี้ เราจำเป็นต้องมีตัวแปรสำหรับจัดเก็บหากผู้เล่นกดปุ่ม ctrl เราใช้ jQuery เพื่อเพิ่มตัวจัดการเหตุการณ์ลงในเอกสาร และตัวจัดการเหล่านี้มีหน้าที่ในการตั้งค่าตัวแปร *ctrlIsPressed *

สุดท้าย เราเรียกฟังก์ชัน **เกมใหม่** และผูกฟังก์ชันนี้กับปุ่มเกมใหม่

ฟังก์ชั่นตัวช่วย

รหัส JavaScript สำหรับเริ่มเกมใหม่ของการกวาดทุ่นระเบิด

ฟังก์ชั่น **เกมใหม่** มีหน้าที่ในการรีเซ็ตตัวแปรของเรา เพื่อให้เกมของเราอยู่ในสถานะพร้อมเล่น ซึ่งรวมถึงการรีเซ็ตค่าที่แสดงต่อผู้เล่น การโทร initializeCells และสร้างกระดานสุ่มใหม่ นอกจากนี้ยังรวมถึงการรีเซ็ตนาฬิกา ซึ่งจะอัปเดตทุกวินาที

มาปิดท้ายด้วยการดูกัน initializeCells .

รหัส JavaScript สำหรับแนบตัวจัดการการคลิกกับเซลล์และตรวจสอบเงื่อนไขชัยชนะ

วัตถุประสงค์หลักของฟังก์ชันนี้คือการเพิ่มคุณสมบัติเพิ่มเติมให้กับเซลล์เกม html ของเรา แต่ละเซลล์ต้องการ id ที่เหมาะสมที่เพิ่มเข้ามา เพื่อให้เราสามารถเข้าถึงได้ง่ายจากตรรกะของเกม ทุกเซลล์ยังต้องการภาพพื้นหลังที่ใช้สำหรับเหตุผลด้านโวหาร

นอกจากนี้เรายังต้องแนบตัวจัดการการคลิกกับทุกเซลล์เพื่อให้เราสามารถตรวจจับการคลิกซ้ายและขวาได้

ฟังก์ชั่นที่จัดการการโทรคลิกซ้าย ที่จับคลิก , ผ่าน id ที่เหมาะสม จากนั้นจะตรวจสอบเพื่อดูว่าทุกเซลล์ที่ไม่มีเหมืองเปิดอยู่หรือไม่ หากสิ่งนี้เป็นจริง แสดงว่าผู้เล่นชนะเกม และเราสามารถแสดงความยินดีกับเขา/เธอได้อย่างเหมาะสม

ฟังก์ชันที่จัดการการเรียกคลิกขวา จัดการคลิกขวา , ผ่าน id ที่เหมาะสม จากนั้นมันก็คืนค่าเท็จ ทำให้เมนูบริบทไม่ปรากฏขึ้น ซึ่งเป็นลักษณะการทำงานเริ่มต้นของการคลิกขวาบนหน้าเว็บ คุณคงไม่ต้องการทำสิ่งนี้สำหรับธุรกิจมาตรฐาน แอปพลิเคชัน CRUD แต่สำหรับเรือกวาดทุ่นระเบิดก็เหมาะสม

บทสรุป

ขอแสดงความยินดีกับการเรียนรู้วิธีการสร้างเรือกวาดทุ่นระเบิดด้วย JavaScript! นั่นเป็นรหัสจำนวนมาก แต่หวังว่าจะสมเหตุสมผลหลังจากแยกออกเป็นโมดูลเช่นนี้ เราสามารถปรับปรุงความสามารถในการใช้ซ้ำ การขยาย และความสามารถในการอ่านของโปรแกรมนี้ได้มากขึ้นอย่างแน่นอน เราไม่ได้ครอบคลุมถึงรายละเอียด HTML หรือ CSS หากคุณมีคำถามหรือเห็นวิธีปรับปรุงโค้ด เรายินดีรับฟังความคิดเห็นจากคุณ!

#javascript #html #css #jquery #game-development

ดูสิ่งนี้ด้วย:

• เรียนรู้สาเหตุต่างๆ ของข้อผิดพลาดเราเตอร์ TP-Link 404
• Soakmont คืออะไร (SOAK) | โทเค็น Soakmont คืออะไร | โทเค็น SOAK คืออะไร
• SOAR.FI (SOAR) ซื้อได้ที่ไหนและอย่างไร – คำแนะนำทีละขั้นตอนง่าย ๆ
• Plasm Network (PLM) คืออะไร | โทเค็นเครือข่าย Plasm คืออะไร | เหรียญ PLM คืออะไร
• วิธีสร้างส่วนท้ายโดยใช้ Material UI