จัดทําโดย นายภาณุวัฒน์ มณี วฟ.สมทบ รหัสนักศึกษา 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) ที่ทำงานบนเว็บ โดยการดำเนินการจะเป็นไปตามลำดับต่อไปนี้:
- การเริ่มเกม:
- เมื่อเปิดหน้าเว็บ, ระบบจะสุ่มสีและแสดงกล่องสีในรูปแบบตาราง 4×4 (มีทั้งหมด 16 กล่อง) ซึ่งกล่องสีจะแสดงเป็นสีเทา (#eee) เพื่อไม่ให้ผู้เล่นเห็นสีที่ซ่อนอยู่
- ผู้เล่นต้องคลิกที่กล่องสีเพื่อเปิดสีที่ซ่อนอยู่ โดยกล่องที่เปิดแล้วจะเปลี่ยนสีตามสีที่ซ่อนอยู่ในตัวมัน
- การจับคู่สี:
- เมื่อผู้เล่นคลิกที่กล่องสีสองกล่อง สีของทั้งสองกล่องจะถูกเปิดออกเพื่อเปรียบเทียบกัน
- หากสีทั้งสองกล่องตรงกัน (เช่น กล่องสีแดงกับกล่องสีแดง) จะถือว่า “จับคู่สำเร็จ” และจำนวนคู่ที่จับได้จะเพิ่มขึ้น
- หากสีไม่ตรงกัน (เช่น กล่องสีแดงกับกล่องสีน้ำเงิน), กล่องทั้งสองจะกลับไปเป็นสีเทาอีกครั้งหลังจาก 1 วินาที (ทำให้ผู้เล่นสามารถพยายามจับคู่ใหม่ได้)
- การชนะเกม:
- เกมจะจบลงเมื่อผู้เล่นจับคู่สีได้ครบทั้งหมด (8 คู่) จะมีข้อความ “คุณชนะแล้ว!” แสดงขึ้น เพื่อแจ้งให้ผู้เล่นทราบว่าเกมสิ้นสุดลงและชนะแล้ว
- ข้อความ “จับคู่ได้ X คู่!” จะถูกอัปเดตตามจำนวนคู่ที่ผู้เล่นจับได้ในระหว่างเกม
- การเริ่มใหม่:
- ผู้เล่นสามารถคลิกที่ปุ่ม “เริ่มใหม่” เพื่อเริ่มเกมใหม่ได้ โดยจะทำการสุ่มสีใหม่และเคลียร์สถานะของเกม (จับคู่ได้, กล่องที่เปิดอยู่, ฯลฯ) พร้อมทั้งเริ่มเกมจากศูนย์
วิธีการใช้งานโปรแกรม:
- การเปิดโปรแกรม:
- เปิดไฟล์ HTML ในเว็บเบราว์เซอร์ (เช่น Google Chrome, Firefox, หรือ Microsoft Edge)
- หน้าเว็บจะโหลดและแสดงเกมจับคู่สีในตาราง 4×4 โดยกล่องสีทั้งหมดจะมีสีเทาเริ่มต้น
- การเล่นเกม:
- คลิกที่กล่องสีใดก็ได้เพื่อเปิดสีของกล่องนั้น
- คลิกที่กล่องสีอีกหนึ่งกล่องเพื่อเปิดดูสีที่ซ่อนอยู่
- หากทั้งสองกล่องสีตรงกัน (สีเหมือนกัน), ข้อความจะบอกว่า “จับคู่ได้ X คู่!” และจำนวนคู่ที่จับได้จะเพิ่มขึ้น
- หากสีไม่ตรงกัน, ระบบจะรีเซ็ตทั้งสองกล่องเป็นสีเทา และผู้เล่นต้องคลิกใหม่เพื่อจับคู่
- การเริ่มใหม่:
- เมื่อจับคู่ครบ 8 คู่แล้ว, ข้อความ “คุณชนะแล้ว!” จะแสดงขึ้น
- หากต้องการเริ่มเกมใหม่, คลิกที่ปุ่ม “เริ่มใหม่” ซึ่งจะสุ่มสีใหม่และเริ่มเกมตั้งแต่ต้น
- การสิ้นสุดเกม:
- เมื่อจับคู่ครบทั้งหมด (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 เริ่มเกม
สรุปผลและข้อเสนอแนะ
สรุปผล
โดยรวมแล้ว เกมแพดเดิลตีลูกบอลทำงานได้ดีและมีประสิทธิภาพที่ดีในการเล่น มีระบบการควบคุมที่ตอบสนองดี, การเคลื่อนที่ของลูกบอลราบรื่น, และระบบการให้คะแนนที่ทำงานได้ตามที่คาดหวัง
ข้อเสนอแนะ
- เพิ่มระดับความยาก:
- ปัจจุบันเกมนี้มีระดับความยากเดียว (4×4 = 16 กล่องสี) ซึ่งอาจจะง่ายไปสำหรับผู้เล่นบางคน สามารถเพิ่มความยากด้วยการใช้ กริดขนาด 5×5 หรือ 6×6 หรือเพิ่มจำนวนสีที่ใช้เพื่อเพิ่มความท้าทาย
- สามารถเพิ่มฟีเจอร์ให้เลือกความยากก่อนเริ่มเกม (ง่าย, ปานกลาง, ยาก)
- เพิ่มฟังก์ชันเวลา:
- การเพิ่มฟังก์ชันจับเวลา (Timer) จะช่วยเพิ่มความตื่นเต้นให้กับเกม เช่น จำกัดเวลาในการจับคู่ให้ครบทุกคู่
- สามารถแสดงผลคะแนนเวลาที่ใช้ในการเล่น หรือคะแนนที่ได้ตามจำนวนการคลิก
- เพิ่มการให้คะแนน (Leaderboard):
- การเพิ่มระบบคะแนน เช่น นับจำนวนครั้งที่คลิกในการจับคู่สีให้ครบทุกคู่ และเก็บข้อมูลคะแนนเพื่อนำไปแสดงในตาราง Leaderboard ของผู้เล่นที่ดีที่สุดในแต่ละรอบเกม
- ทำให้เกมรองรับการเล่นบนมือถือได้ดีขึ้น:
- สามารถเพิ่มการตอบสนองที่ดีกว่าเมื่อเล่นบนอุปกรณ์มือถือ โดยปรับขนาดของกล่องให้พอดีกับหน้าจอของมือถือ
- เพิ่มฟีเจอร์เสียง:
- การเพิ่มเสียงเมื่อจับคู่ถูกต้องหรือไม่ถูกต้อง จะทำให้เกมน่าสนุกมากขึ้น เช่น เสียงเมื่อจับคู่สำเร็จ หรือเสียงเมื่อเลือกกล่องผิด
- ปรับปรุงการจัดการเวลา:
- ปัจจุบันเกมจะเปลี่ยนสีกล่องกลับเป็นสีเทาใน 1 วินาทีหลังจากการเลือกผิด สามารถเพิ่มความเร็วในการเปลี่ยนกลับหรือทำให้มีเวลาที่ผู้เล่นรู้สึกยากขึ้น
วิดีโอการนำเสนอเกมส์
