เกมส์จับคู่สี

จัดทําโดย นายภาณุวัฒน์ มณี วฟ.สมทบ รหัสนักศึกษา 167204132018

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

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

1. ความเป็นมา

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

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

• วัตถุประสงค์หลักของโครงการนี้:
  • เพื่อพัฒนาเกมจับคู่สีโดยใช้เทคโนโลยีเว็บ (HTML, CSS, JavaScript) เพื่อให้ผู้เล่นสามารถเล่นเกมนี้ได้ทั้งบนคอมพิวเตอร์และมือถือ
  • เพื่อฝึกทักษะการจดจำและพัฒนาการคิดอย่างมีเหตุผลในเด็กและผู้ใหญ่
  • เพื่อสร้างเกมที่สนุกสนานและมีคุณค่าทางการศึกษาที่สามารถเล่นได้ทุกเพศทุกวัย

3. ขอบเขต

• ขอบเขตของโครงการ:
  • เกมจับคู่สีนี้จะประกอบด้วย 16 ช่องในรูปแบบ 4×4 โดยที่สีที่ใช้ในเกมจะมีทั้งหมด 8 สี ซึ่งแต่ละสีจะปรากฏสองครั้ง
  • เกมนี้จะเล่นผ่านเว็บเบราว์เซอร์ (Browser) และใช้เทคโนโลยี HTML, CSS, และ JavaScript
  • ไม่ได้รวมถึงการพัฒนาแอปพลิเคชันมือถือหรือเกมที่ต้องใช้แพลตฟอร์มอื่น ๆ เช่น Unity หรือ Android/iOS native apps

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

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

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

• ความรู้ที่เกี่ยวข้องกับเกมจับคู่สี:
  • ทฤษฎีการฝึกสมอง: การเล่นเกมจับคู่สีมีพื้นฐานจากทฤษฎีการฝึกสมอง (Cognitive Training) ที่เชื่อว่าการเล่นเกมประเภทนี้สามารถช่วยฝึกทักษะการจดจำระยะสั้นและเพิ่มประสิทธิภาพของสมอง
  • การพัฒนาเว็บ: การสร้างเกมจับคู่สีนี้เกี่ยวข้องกับการใช้เทคโนโลยีเว็บ เช่น HTML (สำหรับโครงสร้างของเว็บ), CSS (สำหรับการตกแต่งหน้าตา) และ JavaScript (สำหรับการทำงานเชิงโต้ตอบภายในเกม)
  • การออกแบบเกม: การออกแบบเกมเช่นนี้เกี่ยวข้องกับทฤษฎีการออกแบบเกม (Game Design Theory) ที่มุ่งเน้นให้เกมมีความท้าทายและความสนุกสนานไปพร้อมกับการฝึกฝนทักษะ

ผลการดำเนินการ:

โปรแกรมนี้เป็นเกมจับคู่สี (Memory Game) ที่ทำงานบนเว็บ โดยการดำเนินการจะเป็นไปตามลำดับต่อไปนี้:

1. การเริ่มเกม:
   • เมื่อเปิดหน้าเว็บ, ระบบจะสุ่มสีและแสดงกล่องสีในรูปแบบตาราง 4×4 (มีทั้งหมด 16 กล่อง) ซึ่งกล่องสีจะแสดงเป็นสีเทา (#eee) เพื่อไม่ให้ผู้เล่นเห็นสีที่ซ่อนอยู่
   • ผู้เล่นต้องคลิกที่กล่องสีเพื่อเปิดสีที่ซ่อนอยู่ โดยกล่องที่เปิดแล้วจะเปลี่ยนสีตามสีที่ซ่อนอยู่ในตัวมัน
2. การจับคู่สี:
   • เมื่อผู้เล่นคลิกที่กล่องสีสองกล่อง สีของทั้งสองกล่องจะถูกเปิดออกเพื่อเปรียบเทียบกัน
   • หากสีทั้งสองกล่องตรงกัน (เช่น กล่องสีแดงกับกล่องสีแดง) จะถือว่า “จับคู่สำเร็จ” และจำนวนคู่ที่จับได้จะเพิ่มขึ้น
   • หากสีไม่ตรงกัน (เช่น กล่องสีแดงกับกล่องสีน้ำเงิน), กล่องทั้งสองจะกลับไปเป็นสีเทาอีกครั้งหลังจาก 1 วินาที (ทำให้ผู้เล่นสามารถพยายามจับคู่ใหม่ได้)
3. การชนะเกม:
   • เกมจะจบลงเมื่อผู้เล่นจับคู่สีได้ครบทั้งหมด (8 คู่) จะมีข้อความ “คุณชนะแล้ว!” แสดงขึ้น เพื่อแจ้งให้ผู้เล่นทราบว่าเกมสิ้นสุดลงและชนะแล้ว
   • ข้อความ “จับคู่ได้ X คู่!” จะถูกอัปเดตตามจำนวนคู่ที่ผู้เล่นจับได้ในระหว่างเกม
4. การเริ่มใหม่:
   • ผู้เล่นสามารถคลิกที่ปุ่ม “เริ่มใหม่” เพื่อเริ่มเกมใหม่ได้ โดยจะทำการสุ่มสีใหม่และเคลียร์สถานะของเกม (จับคู่ได้, กล่องที่เปิดอยู่, ฯลฯ) พร้อมทั้งเริ่มเกมจากศูนย์

---

วิธีการใช้งานโปรแกรม:

1. การเปิดโปรแกรม:
   • เปิดไฟล์ HTML ในเว็บเบราว์เซอร์ (เช่น Google Chrome, Firefox, หรือ Microsoft Edge)
   • หน้าเว็บจะโหลดและแสดงเกมจับคู่สีในตาราง 4×4 โดยกล่องสีทั้งหมดจะมีสีเทาเริ่มต้น
2. การเล่นเกม:
   • คลิกที่กล่องสีใดก็ได้เพื่อเปิดสีของกล่องนั้น
   • คลิกที่กล่องสีอีกหนึ่งกล่องเพื่อเปิดดูสีที่ซ่อนอยู่
   • หากทั้งสองกล่องสีตรงกัน (สีเหมือนกัน), ข้อความจะบอกว่า “จับคู่ได้ X คู่!” และจำนวนคู่ที่จับได้จะเพิ่มขึ้น
   • หากสีไม่ตรงกัน, ระบบจะรีเซ็ตทั้งสองกล่องเป็นสีเทา และผู้เล่นต้องคลิกใหม่เพื่อจับคู่
3. การเริ่มใหม่:
   • เมื่อจับคู่ครบ 8 คู่แล้ว, ข้อความ “คุณชนะแล้ว!” จะแสดงขึ้น
   • หากต้องการเริ่มเกมใหม่, คลิกที่ปุ่ม “เริ่มใหม่” ซึ่งจะสุ่มสีใหม่และเริ่มเกมตั้งแต่ต้น
4. การสิ้นสุดเกม:
   • เมื่อจับคู่ครบทั้งหมด (8 คู่), เกมจะจบลง และคุณสามารถเริ่มใหม่ได้ทุกเมื่อโดยการคลิกปุ่ม “เริ่มใหม่”

1. HTML (ส่วนของโครงสร้าง

• <h1>: ใช้เพื่อแสดงชื่อเกม “เกมจับคู่สี”.
• <div id=”game-container”>: ใช้เป็นที่สำหรับเก็บกล่องสีที่ผู้เล่นจะเลือก.
• <p id=”message”>: ใช้เพื่อแสดงข้อความต่าง ๆ เช่น “จับคู่สีให้ครบทั้งหมด!” หรือ “คุณชนะแล้ว!”.
• <button id=”reset”>: ใช้สำหรับรีเซ็ตเกมเพื่อให้เริ่มใหม่.

2. CSS (การตกแต่งหน้าเว็บ)

อธิบาย:

• body: ใช้ flexbox เพื่อจัดเนื้อหาทั้งหมดให้อยู่กลางหน้า (center) และจัดเรียงในแนวตั้ง (flex-direction: column).
• #game-container: ใช้ grid layout เพื่อจัดกล่องสีในรูปแบบตาราง 4×4 โดยมีช่องว่าง (gap: 10px) ระหว่างแต่ละกล่อง.
• .color-box: กำหนดขนาดของกล่องสี (100px x 100px), ให้เส้นขอบหนา 2px สีดำ, และให้สามารถคลิกได้ (cursor: pointer).
• #message: ข้อความที่แสดงสถานะเกม มีขนาดตัวอักษร 20px และหนา (font-weight: bold).
• #reset: ปุ่มที่ใช้เริ่มใหม่, ใช้สีพื้นหลังสีน้ำเงินและเปลี่ยนสีเข้มขึ้นเมื่อ hover (background-color: #005f7f).

3. JavaScript (การควบคุมเกม)

3.1 ตัวแปรและการกำหนดค่าเริ่มต้น

colors: อาร์เรย์ที่เก็บสีทั้งหมด (16 สี, แบ่งเป็นคู่) สำหรับเกม.

selectedColors: เก็บสีที่ผู้เล่นเลือกในแต่ละครั้ง (สูงสุด 2 สี).

selectedBoxes: เก็บกล่องที่ผู้เล่นคลิก (สูงสุด 2 กล่อง).

matchesFound: เก็บจำนวนคู่ที่จับได้แล้ว.

gameContainer และ message: ใช้เข้าถึง DOM สำหรับการแสดงกล่องสีและข้อความ.

3.2 ฟังก์ชั่นสุ่มสีและแสดงกล่อง

shuffleAndDisplayColors(): ฟังก์ชั่นนี้ใช้ sort() เพื่อสุ่มลำดับสีจากอาร์เรย์ colors. หลังจากนั้นจะสร้างกล่องสี (<div>) ขึ้นใน gameContainer โดยมีคลาส .color-box และตั้งค่า data-color ให้เป็นสีจริง.

เมื่อคลิกที่กล่องสี, ฟังก์ชั่น onColorBoxClick() จะถูกเรียก.

3.3 ฟังก์ชั่นเมื่อคลิกกล่องสี

onColorBoxClick(box): เมื่อผู้เล่นคลิกที่กล่องสี:

• ฟังก์ชั่นจะเปลี่ยนพื้นหลังของกล่องเป็นสีจริงที่เก็บใน data-color.
• สีที่คลิกจะถูกเก็บใน selectedColors และกล่องที่คลิกจะถูกเก็บใน selectedBoxes.
• หากเลือกครบ 2 กล่องแล้ว:
  • ถ้าสีตรงกัน, จะเพิ่มจำนวนคู่ที่จับได้ (matchesFound++) และแสดงข้อความว่า “จับคู่ได้ X คู่”.
  • ถ้าจับคู่ครบทั้งหมด, จะแสดงข้อความว่า “คุณชนะแล้ว!”.
  • ถ้าสีไม่ตรงกัน, จะเปลี่ยนสีของทั้ง 2 กล่องกลับเป็นสีพื้น (#eee) หลังจาก 1 วินาที.

3.4 ฟังก์ชั่นรีเซ็ตการเลือก

• resetSelection(): ใช้เพื่อรีเซ็ตตัวแปร selectedColors และ selectedBoxes เมื่อผู้เล่นเลือกกล่องสีเสร็จแล้ว หรือเมื่อต้องการเริ่มการเลือกใหม่.

3.5 ฟังก์ชั่นรีเซ็ตเกม

เมื่อคลิกปุ่ม “เริ่มใหม่”, เกมจะถูกรีเซ็ต:

• ล้างข้อมูลการเลือก (selectedColors, selectedBoxes) และการนับคู่ที่จับได้ (matchesFound).
• แสดงข้อความเริ่มต้น: “จับคู่สีให้ครบทั้งหมด!”.
• เรียกฟังก์ชั่น shuffleAndDisplayColors() เพื่อสุ่มและแสดงกล่องสีใหม่.

3.6 เริ่มเกม

สรุปผลและข้อเสนอแนะ

 สรุปผล

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

ข้อเสนอแนะ

1. เพิ่มระดับความยาก:
   • ปัจจุบันเกมนี้มีระดับความยากเดียว (4×4 = 16 กล่องสี) ซึ่งอาจจะง่ายไปสำหรับผู้เล่นบางคน สามารถเพิ่มความยากด้วยการใช้ กริดขนาด 5×5 หรือ 6×6 หรือเพิ่มจำนวนสีที่ใช้เพื่อเพิ่มความท้าทาย
   • สามารถเพิ่มฟีเจอร์ให้เลือกความยากก่อนเริ่มเกม (ง่าย, ปานกลาง, ยาก)
2. เพิ่มฟังก์ชันเวลา:
   • การเพิ่มฟังก์ชันจับเวลา (Timer) จะช่วยเพิ่มความตื่นเต้นให้กับเกม เช่น จำกัดเวลาในการจับคู่ให้ครบทุกคู่
   • สามารถแสดงผลคะแนนเวลาที่ใช้ในการเล่น หรือคะแนนที่ได้ตามจำนวนการคลิก
3. เพิ่มการให้คะแนน (Leaderboard):
   • การเพิ่มระบบคะแนน เช่น นับจำนวนครั้งที่คลิกในการจับคู่สีให้ครบทุกคู่ และเก็บข้อมูลคะแนนเพื่อนำไปแสดงในตาราง Leaderboard ของผู้เล่นที่ดีที่สุดในแต่ละรอบเกม
4. ทำให้เกมรองรับการเล่นบนมือถือได้ดีขึ้น:
   • สามารถเพิ่มการตอบสนองที่ดีกว่าเมื่อเล่นบนอุปกรณ์มือถือ โดยปรับขนาดของกล่องให้พอดีกับหน้าจอของมือถือ
5. เพิ่มฟีเจอร์เสียง:
   • การเพิ่มเสียงเมื่อจับคู่ถูกต้องหรือไม่ถูกต้อง จะทำให้เกมน่าสนุกมากขึ้น เช่น เสียงเมื่อจับคู่สำเร็จ หรือเสียงเมื่อเลือกกล่องผิด
6. ปรับปรุงการจัดการเวลา:
   • ปัจจุบันเกมจะเปลี่ยนสีกล่องกลับเป็นสีเทาใน 1 วินาทีหลังจากการเลือกผิด สามารถเพิ่มความเร็วในการเปลี่ยนกลับหรือทำให้มีเวลาที่ผู้เล่นรู้สึกยากขึ้น

วิดีโอการนำเสนอเกมส์