เรือกวาดทุ่นระเบิด
Minesweeper... ใช่ เกมคลาสสิกเก่าๆ ที่คุณจำได้ว่าเคยเล่นบน Windows '95 รุ่นเก่าๆ (จริงๆ แล้วมันถูกนำไปใช้ในการอัปเดตซอฟต์แวร์ของ Microsoft จนถึง Windows 8) Minesweeper มีต้นกำเนิดมาจากเกมเมนเฟรมที่เก่าแก่ที่สุดในทศวรรษ 1960 และ 1970 บรรพบุรุษที่เก่าแก่ที่สุดของ Minesweeper คือ Cube ของ Jerimac Ratliff รูปแบบการเล่นขั้นพื้นฐานกลายเป็นส่วนยอดนิยมของเกมประเภทไขปริศนาในช่วงทศวรรษ 1980
ทบทวนประวัติเรือกวาดทุ่นระเบิดของคุณที่นี่
คุณรู้หรือไม่ว่าเรือกวาดทุ่นระเบิดที่แท้จริงคืออะไร? ฉันไม่ได้อย่างใดอย่างหนึ่งจนกว่าฉันจะอ่านเรื่องนี้
ฉันจำประสบการณ์ครั้งแรกของฉันกับคอมพิวเตอร์ในยุค 90 ที่เกี่ยวข้องกับการเล่นเกมนี้ได้มาก ดังนั้นฉันจึงคิดว่าจะมีเกมใดที่จะดีไปกว่านี้อีก?
เวอร์ชันของฉัน
เริ่มต้นใช้งาน
เล่นเกมที่นี่!
การเล่นเกมขั้นพื้นฐาน
- เลือกระดับความยากของคุณ
- ง่าย = 9x9, 10 ทุ่นระเบิด
- กลาง = 16x16, 40 ทุ่นระเบิด
- ยาก = 30x30, 160 เหมือง
- คลิกที่ใดก็ได้บนกระดานเพื่อเริ่มและเริ่มจับเวลา *ตัวเลขแสดงถึงจำนวนทุ่นระเบิดที่อยู่ติดกับเซลล์ที่กำหนด
- ใช้ "Shift + คลิก" เพื่อเพิ่มธงลงในเซลล์หากคุณคิดว่าเป็นของฉัน
ชนะ/แพ้
- ถ้าคุณโดนทุ่นระเบิด... จบเกมนะเพื่อน
- ชนะโดยการเปิดเผยเซลล์ทั้งหมดที่ไม่มีทุ่นระเบิด!
(เข้าใจแล้ว... ของฉัน... เครื่องกวาด...?)
เทคโนโลยีที่ใช้
สาม Amigos เก่าที่ดี:
- HTML
- ซีเอสเอส
- จาวาสคริปต์
HTML
อย่างที่คุณเห็นจากซอร์สโค้ด HTML นั้นกระชับมาก เนื่องจากการกระทำส่วนใหญ่เกิดขึ้นใน JavaScript ไม่ต้องพูดถึง ตัวเกมบอร์ดเองก็เป็นเพียงโต๊ะธรรมดาๆ เท่านั้น
ซีเอสเอส
ฉันสนุกมากกับการจัดสไตล์นี้ให้เข้ากับรูปลักษณ์เก่าของมุมมองเดสก์ท็อป Windows '95 ฉันยังอยากจะยุ่งกับมันสักหน่อยเพื่อให้มันสมบูรณ์แบบ (ไม่พบแบบอักษรที่แน่นอนที่ MS ใช้)
ความท้าทายที่ยิ่งใหญ่ที่สุดของฉันกับ CSS คือการค้นหาสไตล์ตาราง (เส้นขอบ ขนาด td ฯลฯ)
จาวาสคริปต์
เนื่องจากนี่เป็นครั้งแรกของฉันในการเขียนเว็บแอปที่ใช้งานได้โดยใช้ JavaScript จึงไม่น่าแปลกใจเลยที่ส่วนนี้จะเป็นความท้าทายที่ยิ่งใหญ่ที่สุดของโปรเจ็กต์สำหรับฉัน
นี่คือไฮไลท์บางส่วน:
- การปรับขนาดตารางแบบไดนามิกเมื่อคลิกระดับความยาก
- ฉันสร้างฟังก์ชัน (ด้วยความช่วยเหลือของจิมแน่นอน) ซึ่งแยกวิเคราะห์ตัวเลขจาก ID บนตารางซึ่งจะแปลงเป็นตัวแปร ${size} ซึ่งโดยทั่วไปจะต่อท้ายแถว/คอลัมน์ตามหมายเลขที่คว้ามา แนวคิดนี้ทำให้ฉันทึ่ง
- ในทางกลับกัน การสร้างอาร์เรย์ของอาร์เรย์แบบไดนามิกเพื่อให้ตรงกับตารางภาพ
- การสร้างคลาส "เซลล์" ที่ฉันใช้ในการสร้าง "วัตถุเซลล์" แต่ละรายการ ซึ่งฉันกำหนดคุณสมบัติมากมายให้กับ: row#, col#, Bomb t/f, # ของระเบิดที่อยู่ติดกัน (ความท้าทายอีกอย่างในตัวมันเอง btw) เปิดเผย t/f และตั้งค่าสถานะ t/f
- แนวทางนี้ช่วยให้เขียนโค้ดที่กระชับได้ง่ายขึ้นมาก และไม่ทำซ้ำซ้ำแล้วซ้ำอีก รวมถึงสร้างวิธีการในคลาสที่จะเรียกใช้กับทุกอ็อบเจ็กต์ของเซลล์
- การสร้างตัวจับเวลาการทำงานที่แสดงวินาทีที่ผ่านไป
- การสุ่มวางระเบิดบนอาเรย์
- แสดงผลทุกอย่างใน DOM
- การกำหนดตัวจัดการการคลิกให้กับเหตุการณ์ต่างๆ
- การสร้างตรรกะชนะ/แพ้
- การหาโฟลว์การควบคุมว่าฟังก์ชันทั้งหมดเชื่อมโยงกันแบบซิงโครนัสอย่างไร
- เรียนรู้เกี่ยวกับ การเรียกซ้ำ และวิธีเขียนฟังก์ชันที่สร้างเอฟเฟกต์ดังกล่าวอย่างเหมาะสม
ตัวเลือกการออกแบบของฉัน
ฉันตัดสินใจเลือกใช้รูปลักษณ์ OG Windows '95 ฉันเชื่อมั่นในแนวคิด "เลียนแบบ ซึมซับ สร้างสรรค์สิ่งใหม่ๆ" รูปแบบของการเรียนรู้ ดังนั้นในโครงการแรกของฉัน ฉันจึงต้องเดินก่อนจึงจะสามารถวิ่งได้ และเริ่มต้นด้วยขั้นตอนการเลียนแบบกระบวนการเรียนรู้
ฉันดีใจมากที่เลือกเส้นทางนี้ เพราะฉันได้เรียนรู้มากมายจากการพยายามจับคู่สไตล์จากเกมต้นฉบับ
ด้วยเหตุนี้ ฉันจะสร้างเวอร์ชันที่ทันสมัยขึ้นในเร็วๆ นี้อย่างแน่นอน
ก้าวต่อไป!
โปรเจ็กต์นี้สนุกมากสำหรับฉันจริงๆ ฉันวางแผนที่จะปรับปรุงมันต่อไปและย้อนกลับไปดูบทเรียนมากมายที่ได้เรียนรู้ในปีต่อๆ ไป
- อย่างที่ฉันได้กล่าวไว้ก่อนหน้านี้ ฉันอยากจะสร้าง "สลับการแสดงผล" ซึ่งจะพลิก CSS ให้เป็น UI ที่ทันสมัย สะอาดตา แบนราบ และเรียบง่าย
- มีข้อบกพร่องด้านสุนทรียศาสตร์เล็กๆ น้อยๆ ที่ทำให้ฉันดึงผมออก เช่น ความกว้าง/ความสูงของเซลล์ถูกปรับแต่งไม่กี่พิกเซลเมื่อบอร์ดถูกเปิดเผยทั้งหมด ฉันจำเป็นต้องแก้ไขเรื่องนั้น
- นอกจากนี้ ฉันยังอยากจะเพิ่มเติมรายละเอียดเกี่ยวกับ Windows 95 ให้มากขึ้น โดยทำให้ปุ่ม Start ทำงานบางอย่าง เพิ่มนาฬิกาที่มุมขวาล่าง และไอคอนเดสก์ท็อปที่ใช้งานได้
- คุณลักษณะที่ยากจริงๆ ที่ฉันต้องการแก้ไขคือการสร้างคุณลักษณะที่ผู้ใช้สามารถเลือกความยากได้โดยการป้อนตัวเลข (หมายเลขแถว/คอลัมน์/เหมือง)
นั่นคงเป็นวันที่ฝนตก
ขอบคุณสำหรับการอ่าน! ฉันหวังว่าคุณจะสนุกกับเกม :)
