เกมจับคู่ตัวเลข(Number Matching Game)

จัดทำโดย นาย ศิวกร ตั้นหุ้ย วฟ.สมทบ รหัสนักศึกษา 167204132027

คณะวิศวกรรมศาสตร์/สาขาวิศวกรรมไฟฟ้า

รายวิชา 04000104 การโปรแกรมคอมพิวเตอร์1/2567

1. ความเป็นมา(Background)

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

2. วัตถุประสงค์(Objective)

  • พัฒนาทักษะการสังเกต: ผู้เล่นต้องสังเกตภาพหรือตัวเลขที่ปรากฏบนหน้าจอ เพื่อหาคู่ที่เหมือนกัน
  • พัฒนาทักษะความจำ: ผู้เล่นต้องจำตำแหน่งของภาพหรือตัวเลขที่พลิกขึ้นมา เพื่อหาคู่ที่ตรงกัน
  • เพิ่มความสนุกสนาน: เกมนี้ถูกออกแบบมาเพื่อให้ผู้เล่นได้ผ่อนคลายและสนุกสนาน
  • ฝึกสมาธิ: การเล่นเกมจับคู่ช่วยให้ผู้เล่นสามารถฝึกสมาธิและความอดทนได้ดีขึ้น

3. ขอบเขต(Scope)

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

4.ประโยชน์ที่คาดว่าจะได้รับ(Benefits)

  • พัฒนาทักษะการจดจำ: การเล่นเกมจับคู่ตัวเลขจะช่วยฝึกให้ผู้เล่นจดจำตำแหน่งของตัวเลข รูปภาพ หรือสัญลักษณ์ต่างๆ ได้ดีขึ้น
  • เพิ่มความสามารถในการสังเกต: ผู้เล่นต้องสังเกตรายละเอียดของตัวเลขหรือภาพที่ปรากฏบนหน้าจออย่างละเอียด เพื่อหาคู่ที่ตรงกัน
  • ฝึกสมาธิ: การเล่นเกมจับคู่ตัวเลขต้องใช้สมาธิในการค้นหาคู่ที่ตรงกัน ทำให้ผู้เล่นสามารถฝึกสมาธิได้ดีขึ้น
  • เพิ่มความสนุกสนาน: เกมจับคู่ตัวเลขถูกออกแบบมาให้เล่นได้อย่างสนุกสนาน ทำให้ผู้เล่นรู้สึกผ่อนคลายและเพลิดเพลิน

5. ความรู้ที่เกี่ยวข้อง(Related Knowledge)

พื้นฐาน HTML

  • การสร้างโครงสร้าง: HTML ใช้ในการสร้างโครงสร้างพื้นฐานของเกม เช่น การใช้แท็ก <div> สำหรับการ์ด, <h1>สำหรับหัวข้อ, และ <button> สำหรับปุ่มเริ่มต้น.
  • การจัดกลุ่มองค์ประกอบ: การใช้ <div> และ <span> เพื่อจัดกลุ่มและแสดงข้อมูลต่างๆ เช่น คะแนนและระดับ.

CSS และการออกแบบ UI

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

JavaScript และการโต้ตอบ

  • การจัดการเหตุการณ์: JavaScript ใช้ในการจัดการเหตุการณ์เมื่อผู้ใช้คลิกการ์ด และตรวจสอบว่าการจับคู่ถูกต้องหรือไม่.
  • การติดตามสถานะ: การใช้ตัวแปรเพื่อเก็บสถานะของเกม เช่น คะแนน, การ์ดที่ถูกเปิด, และระดับของเกม.

ตรรกะและการวางแผน

  • การพัฒนาเกม: การสร้างเกมช่วยพัฒนาทักษะการคิดเชิงตรรกะ โดยต้องวางแผนว่าจะเปิดการ์ดไหนก่อน และเมื่อไหร่ที่จะจับคู่.
  • การจัดการสถานะ: การตรวจสอบว่าเมื่อใดควรรีเซ็ตตัวแปรหรืออัปเดตคะแนน.

 การทดสอบและการปรับปรุง

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

การใช้เอฟเฟกต์และแอนิเมชัน

  • การสร้างประสบการณ์ที่น่าสนใจ: การเพิ่มเอฟเฟกต์ CSS เพื่อทำให้การเปิดการ์ดและการจับคู่มีความน่าสนใจมากขึ้น.
  • การใช้แอนิเมชัน: การใช้ @keyframes ใน CSS เพื่อสร้างการกระเด้งหรือการเปลี่ยนสีเมื่อจับคู่ได้.

 การพัฒนาอย่างยั่งยืน

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

6. การดำเนินงาน(Implementation)

6.1. โครงสร้าง HTML

  • โค้ดเริ่มต้นด้วยการประกาศ <!DOCTYPE html> และการเปิด <html> พร้อมตั้งค่าภาษาเป็นอังกฤษ (lang="en").
  • มีการใช้ <head> สำหรับส่วนของเมตาและสไตล์:
    • <meta charset="UTF-8">: กำหนดการเข้ารหัสเป็น UTF-8
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: ปรับขนาดหน้าจอให้เหมาะสมกับอุปกรณ์
    • <title>: ตั้งชื่อหน้าเป็น “Number Matching Game”

6.2. CSS สำหรับการออกแบบ

  • มีการตั้งค่าสไตล์สำหรับ:
    • body: ใช้ฟอนต์, ตั้งค่าพื้นหลัง, และจัดกลางข้อความ
    • h1: ตั้งค่าขนาดตัวอักษรและสีสำหรับชื่อเกม
    • .scoreboard: สำหรับแสดงคะแนนและระดับ
    • .game-board: ตั้งค่าการจัดเรียงการ์ดในรูปแบบกริด (grid) โดยมี 4 คอลัมน์
    • .card: ใช้เพื่อแสดงการ์ดแต่ละใบ, มีการทำให้สามารถหมุนได้เมื่อคลิก
    • .card-front และ .card-back: กำหนดลักษณะของด้านหน้าและด้านหลังของการ์ด
    • button: การออกแบบปุ่มรีสตาร์ทเกม

6.3. JavaScript สำหรับการทำงานของเกม

–ตัวแปร

  • const numbers: กำหนดตัวเลขที่ใช้ในเกม (1 ถึง 8)
  • let firstCard, secondCard: ตัวแปรที่เก็บการ์ดที่ถูกเปิด
  • let lockBoard: ป้องกันไม่ให้ผู้เล่นคลิกการ์ดในขณะที่กำลังตรวจสอบการจับคู่
  • let matchedPairs: นับจำนวนคู่การ์ดที่ผู้เล่นจับคู่ได้
  • let score และ let level: เก็บคะแนนและระดับของเกม

–ฟังก์ชันหลัก

generateCards
  • ฟังก์ชันนี้ทำหน้าที่สร้างการ์ดขึ้นมาใหม่:
    • สร้างการ์ด: สร้างการ์ดสองใบสำหรับตัวเลขแต่ละตัว (1-8), จัดเรียงตัวเลขแบบสุ่ม
    • สร้าง DOM: ใช้ document.createElement เพื่อสร้างการ์ดใหม่และเพิ่มลงใน gameBoard
flipCard
  • ฟังก์ชันนี้จะถูกเรียกเมื่อผู้เล่นคลิกการ์ด:
    • ตรวจสอบสถานะ: ถ้าการ์ดถูกล็อกหรือการ์ดนี้ถูกคลิกไปแล้ว จะไม่ทำงาน
    • หมุนการ์ด: ใช้ classList.add('is-flipped') เพื่อทำให้การ์ดหมุน
    • ตรวจสอบการจับคู่: ถ้ามีการเปิดการ์ดสองใบ จะเช็คว่าตัวเลขเหมือนกันหรือไม่
      • ถ้า เหมือนกัน: จะเพิ่มคะแนนและตรวจสอบว่าจับคู่ครบทุกคู่หรือยัง
      • ถ้า ไม่เหมือนกัน: จะเรียกใช้ฟังก์ชัน unflipCards เพื่อลบการ์ดที่ไม่ตรงกัน
disableCards
  • ปิดการคลิกการ์ดที่จับคู่ได้แล้ว โดยใช้ removeEventListener เพื่อลบการฟังค์ชันคลิก
unflipCards
  • จะถูกเรียกเมื่อการ์ดสองใบไม่ตรงกัน:
    • ใช้ setTimeout เพื่อทำให้การ์ดกลับไปที่ด้านหน้า (unflip) หลังจาก 1 วินาที
resetBoard
  • รีเซ็ตตัวแปรเพื่อเตรียมสำหรับการคลิกการ์ดใบใหม่
nextLevel
  • ฟังก์ชันนี้จะถูกเรียกเมื่อผู้เล่นจับคู่การ์ดครบ:
    • แจ้งผู้เล่นเกี่ยวกับการเลื่อนไปยังด่านถัดไป และอัปเดตระดับและคะแนน
updateScoreboard
  • ฟังก์ชันนี้ใช้เพื่ออัปเดตคะแนนและระดับบนหน้าจอทุกครั้งที่มีการเปลี่ยนแปลง
Restart Game
  • มีการเชื่อมต่อปุ่ม “Restart Game” กับฟังก์ชันที่รีเซ็ตคะแนนและระดับกลับไปที่เริ่มต้น

6.4. การเริ่มเกม

เมื่อโหลดหน้าเว็บครั้งแรก, ฟังก์ชัน generateCards จะถูกเรียกเพื่อสร้างการ์ดและเริ่มเกม

7.วิธีการใช้งานโปรแกรม (How to Use)

  1. การเข้าถึงเกม:
    • เปิดเว็บเบราว์เซอร์ (เช่น Chrome, Firefox, Edge) บนอุปกรณ์ของคุณ
    • คัดลอกโค้ด HTML ที่คุณให้มาและวางลงในไฟล์ใหม่ที่มีนามสกุล .html (เช่น number_matching_game.html)
  2. เปิดไฟล์:
    • เปิดไฟล์นี้ในเว็บเบราว์เซอร์ของคุณ โดยคลิกขวาที่ไฟล์แล้วเลือก “Open with” และเลือกเบราว์เซอร์ที่ต้องการ
  3. เริ่มเกม:
    • เมื่อเปิดไฟล์แล้ว คุณจะเห็นหน้าจอที่มีชื่อเกม “Number Matching Game”, แถบคะแนน (Scoreboard) ที่แสดงคะแนนและระดับ, และกริดของการ์ด
    • คลิกที่การ์ดใด ๆ เพื่อเริ่มเล่น
  4. วิธีการเล่น:
    • เมื่อคุณคลิกการ์ดหนึ่งใบ การ์ดจะหมุนเพื่อแสดงตัวเลขที่อยู่ด้านหลัง
    • คลิกการ์ดที่สอง หลังจากนั้นเกมจะตรวจสอบว่าตัวเลขบนการ์ดทั้งสองใบตรงกันหรือไม่
      • ถ้าตรงกัน:
        • การ์ดทั้งสองใบจะยังคงหันหน้าแสดงตัวเลข
        • คะแนนจะเพิ่มขึ้น 10 คะแนน
        • หากจับคู่ได้ครบทุกคู่ จะมีการแจ้งเตือนว่า “You completed the level! Moving to the next level.” และเริ่มด่านใหม่
      • ถ้าไม่ตรงกัน:
        • การ์ดทั้งสองใบจะกลับไปที่ด้านหน้า (unflip) หลังจาก 1 วินาที
        • คุณจะต้องพยายามจับคู่การ์ดอีกครั้ง
  5. รีสตาร์ทเกม:
    • หากคุณต้องการเริ่มเกมใหม่ สามารถคลิกปุ่ม “Restart Game” ที่ด้านล่างของหน้าจอ
    • คะแนนและระดับจะถูกตั้งค่าเป็น 0 และ 1 ตามลำดับ และเกมจะเริ่มใหม่

8.การทดลอง(Testing)

  1. เปิดโปรแกรม:
    • เริ่มต้นโดยการเปิดไฟล์ HTML ในเบราว์เซอร์ที่คุณเลือก
  2. ทดสอบการเริ่มเกม:
    • เมื่อเปิดโปรแกรม คุณควรเห็นหัวข้อ “Number Matching Game” และแถบคะแนนที่แสดง “Score: 0” และ “Level: 1”
    • การ์ดต่างๆ จะถูกสร้างขึ้นและแสดงอยู่ในกริด
  3. ทดสอบการจับคู่:
    • คลิกการ์ดใบแรกแล้วคลิกการ์ดใบที่สอง:
      • กรณีที่จับคู่สำเร็จ:
        • ตรวจสอบว่าการ์ดทั้งสองใบแสดงหมายเลขที่ตรงกัน
        • ควรมีการเพิ่มคะแนน 10 คะแนน
        • ตรวจสอบว่าแถบคะแนนได้รับการอัปเดตอย่างถูกต้อง
        • หากคุณจับคู่ครบทุกคู่ จะมีการแจ้งเตือนว่าคุณทำสำเร็จและระดับถัดไปจะเริ่มขึ้น
      • กรณีที่ไม่จับคู่:
        • ตรวจสอบว่าการ์ดทั้งสองใบจะกลับไปที่ด้านหน้า (unflip) หลังจาก 1 วินาที
  4. ทดสอบการเลื่อนระดับ:
    • หลังจากจับคู่ตัวเลขครบทุกคู่ในระดับแรก คุณควรได้รับการแจ้งเตือนให้ไปยังระดับถัดไป
    • คะแนนควรเพิ่มขึ้น 50 คะแนนเมื่อเริ่มระดับใหม่
    • จำนวนการ์ดในระดับถัดไปควรมีการเพิ่มขึ้น (ถ้าคุณตั้งโปรแกรมให้เพิ่มจำนวนการ์ดในแต่ละระดับ)
  5. ทดสอบการรีสตาร์ทเกม:
    • คลิกที่ปุ่ม “Restart Game”:
      • ตรวจสอบว่าคะแนนและระดับกลับไปที่ 0 และ 1 ตามลำดับ
      • ตรวจสอบว่าการ์ดถูกสร้างใหม่และแสดงในกริดอีกครั้ง
  6. การทดสอบการใช้งาน:
    • ตรวจสอบว่าผู้เล่นสามารถคลิกที่การ์ดได้หลายครั้งในระหว่างการเล่น
    • ตรวจสอบว่าผู้เล่นไม่สามารถคลิกการ์ดที่จับคู่ได้แล้วอีกครั้ง
    • ทดสอบว่าเกมยังทำงานได้ตามปกติเมื่อทำซ้ำการเล่นหลายครั้ง
  7. ทดสอบความรู้สึกของผู้เล่น:
    • ตรวจสอบว่าเกมดูดีและเล่นได้ง่าย
    • สังเกตว่าความล่าช้าในการหมุนการ์ดและข้อความแจ้งเตือนมีความน่าพอใจหรือไม่

9. เทคนิคการประยุกต์เพื่อเพิ่มประสิทธิภาพมากขึ้น(Improvement )

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

10. สรุปผลและข้อเสนอแนะ(Conclusion and Recommendations)

  • เกมจับคู่ตัวเลขเป็นเกมที่พัฒนาได้ง่าย และสามารถนำไปประยุกต์ใช้ได้หลากหลายรูปแบบ
  • การพัฒนาเกมนี้ช่วยให้ผู้พัฒนาได้ฝึกทักษะด้านการเขียนโปรแกรมและการออกแบบเกม
  • เกมนี้มีประโยชน์ต่อผู้เล่นในการพัฒนาทักษะด้านความจำและการสังเกต

11.อ้างอิง

“HTML: Elements.” MDN Web Docs. (n.d.). , https://developer.mozilla.org/en-US/docs/Web/HTML/Element. Accessed 03 Oct 2024.

โค้ดสำหรับการทดลองใช้





You may also like...

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *