ผู้เขียนบทความ : นางสาวสุวรินทร์ สงอุ่น 167404130085
คณะวิศวกรรมศาสตร์ : สาขาวิศวกรรมไฟฟ้า
วิชา: 04000104 การโปรแกรมคอมพิวเตอร์
1.ความเป็นมาของเกม (Background)
เกม “Remember Num” หรือเกมจำตัวเลข เป็นเกมที่สร้างขึ้นเพื่อทดสอบความจำและกจดจำลำดับของตัวเลขในระยะเวลาที่กำหนด เกมนี้ออกแบบมาให้ท้าทายความสามารถในการจดจำและการคิดวิเคราะห์อย่างรวดเร็ว เกมนี้เน้นการพัฒนาความสามารถของผู้เล่นในเรื่องการจำตัวเลขในช่วงเวลาที่กำหนด โดยค่อย ๆ เพิ่มระดับความยากตามเลเวลที่สูงขึ้น
2.วัตถุประสงค์ (Objectives)
พัฒนาทักษะการเขียนโปรแกรมและการพัฒนาเกม
การสร้างเกมนี้จะช่วยให้ผู้พัฒนาได้ฝึกฝนและพัฒนาทักษะการเขียนโปรแกรม เช่น การใช้ JavaScript, HTML, CSS รวมถึงการจัดการตรรกะเกม (Game Logic) ที่เกี่ยวข้องกับการแสดงผล การจัดการลำดับตัวเลข และการตรวจสอบการทำงานของฟังก์ชันต่าง ๆ ซึ่งเป็นทักษะที่มีความสำคัญในการพัฒนาเกมหรือแอปพลิเคชันในอนาคต
เสริมสร้างความคิดเชิงระบบ (Systematic Thinking)
การพัฒนาเกมที่มีหลายองค์ประกอบ เช่น ระบบจับเวลา ระบบตรวจสอบลำดับตัวเลข และระบบชีวิต (Lives System) ทำให้ผู้สร้างต้องคิดและออกแบบการทำงานของเกมอย่างเป็นระบบ ตั้งแต่การจัดการฟีเจอร์ต่าง ๆ ไปจนถึงการจัดการข้อผิดพลาดที่อาจเกิดขึ้น
เรียนรู้การออกแบบ UX/UI
ผู้สร้างจะได้รับประสบการณ์ในการออกแบบอินเทอร์เฟซที่ใช้งานง่ายและประสบการณ์การเล่นเกมที่ดีสำหรับผู้ใช้ ซึ่งเป็นทักษะสำคัญในการพัฒนาเว็บไซต์และแอปพลิเคชัน เพื่อให้ผู้เล่นรู้สึกสนุกและมีส่วนร่วมในเกมอย่างต่อเนื่อง
ทดสอบและพัฒนาความคิดสร้างสรรค์
การออกแบบเกมต้องใช้ความคิดสร้างสรรค์ในการสร้างกติกา เลเวลการเล่น และรูปแบบการท้าทายเพื่อให้เกมสนุกและไม่ซ้ำซาก การพัฒนาเกมนี้ช่วยให้ผู้สร้างได้ทดลองความคิดใหม่ ๆ และพัฒนาแนวทางการสร้างเกมในรูปแบบอื่น ๆ ต่อไป
สร้างผลงานเพื่อใช้เป็น Portfolio
การสร้างเกมนี้สามารถเป็นตัวอย่างผลงาน (Portfolio) ที่สำคัญสำหรับผู้พัฒนา โดยเฉพาะอย่างยิ่งหากผู้สร้างต้องการทำงานในสายงานพัฒนาเกมหรือซอฟต์แวร์ การมีผลงานที่แสดงให้เห็นถึงความสามารถในการพัฒนาเกมตั้งแต่ต้นจนจบจะเพิ่มโอกาสในการหางานหรือรับงานโครงการใหม่ ๆ
3.ขอบเขตของเกม (Scope)
3.1เกมแบ่งออกเป็น 10 เลเวล โดยเริ่มจากเลเวลที่ง่าย (2×2 ปุ่ม) และค่อยๆ เพิ่มความยากขึ้นเรื่อยๆ โดยเพิ่มจำนวนปุ่มและระยะเวลาการแสดงผลของตัวเลข
3.2เกมจะจำกัดเวลาให้ผู้เล่นเรียงตัวเลขภายในเวลาที่กำหนดในแต่ละเลเวล และหากไม่สำเร็จภายในเวลาที่กำหนด จะต้องเริ่มเล่นใหม่ในเลเวลนั้นจนกว่าจะสำเร็จ
3.3มีการจำกัดจำนวนความผิดพลาดได้ 3 ครั้งในแต่ละเลเวล
3.4เมื่อผู้เล่นผ่านทุกเลเวลได้สำเร็จ จะได้รับการแสดงผลแสดงความยินดี
4.ประโยชน์ที่คาดว่าจะได้รับ (Expected Benefits)
4.1ผู้เล่นจะได้พัฒนาทักษะความจำระยะสั้นที่ดีขึ้นจากการเล่นเกม
4.2การเรียนรู้วิธีจัดการกับเวลาและความกดดันที่มากขึ้นเมื่อระดับเลเวลเพิ่มขึ้น
4.3พัฒนาทักษะการสังเกตและการจดจำลำดับข้อมูลในระยะเวลาสั้น
4.4เพิ่มความมั่นใจในความสามารถในการคิดวิเคราะห์อย่างรวดเร็ว
4.5สร้างความบันเทิงและความสนุกในการเล่นเกมพร้อมกับความท้าทายที่เหมาะสม
5.ความรู้ที่เกี่ยวข้อง (Related Knowledge)
การออกแบบเกม (Game Design)
-การออกแบบอินเทอร์เฟซผู้ใช้ (User Interface Design – UI): การออกแบบหน้าเว็บไซต์ให้ผู้ใช้สามารถใช้งานได้ง่าย เช่น การออกแบบให้มีช่องใส่ชื่อผู้เล่น ปุ่ม Start สีเขียว ปุ่มสี่เหลี่ยมที่แสดงตัวเลข และส่วนการแสดงเวลา การออกแบบที่ดีควรให้ผู้เล่นเข้าใจการใช้งานได้ทันที
-การออกแบบประสบการณ์ผู้ใช้ (User Experience Design – UX): การวางโครงสร้างของเกมให้ผู้เล่นมีประสบการณ์ที่ดี เช่น การเพิ่มระดับความยากที่ค่อย ๆ เพิ่มขึ้น ความท้าทายที่เหมาะสม และระบบรางวัลหลังจากผ่านแต่ละด่าน จะช่วยให้ผู้เล่นรู้สึกสนุกและท้าทาย
การพัฒนาเกม (Game Development)
-การพัฒนาเว็บไซต์ (Web Development): เกมนี้เป็นเกมที่ทำงานผ่านเว็บไซต์ ดังนั้นจึงต้องมีความรู้เกี่ยวกับ HTML, CSS และ JavaScript ในการสร้างหน้าเว็บและการโต้ตอบของผู้ใช้
-การเขียนโปรแกรมเกม (Game Programming): จำเป็นต้องมีการเขียนโค้ดเพื่อให้เกมทำงานตามลำดับเหตุการณ์ เช่น การแสดงตัวเลขบนปุ่ม การล่องหนของตัวเลข การจับเวลาของแต่ละเลเวล และการคำนวณการตอบสนองของผู้เล่น ต้องใช้ความรู้ในด้านการเขียนโปรแกรมเชิงโต้ตอบ (Interactive Programming)
-การใช้ JavaScript Framework หรือ Library: เกมประเภทนี้สามารถใช้ JavaScript Framework เช่น React หรือ Vue.js เพื่อจัดการการแสดงผลและการโต้ตอบ รวมถึงใช้ไลบรารีต่าง ๆ เช่น jQuery หรือ Three.js เพื่อเพิ่มความสามารถของเกม
การจัดการตรรกะเกม (Game Logic)
-การจัดการระดับความยาก (Difficulty Scaling): ความรู้ในการสร้างตรรกะที่เพิ่มระดับความยากในแต่ละเลเวล เช่น การเพิ่มจำนวนปุ่มสี่เหลี่ยมจาก 2×2 ไปจนถึง 4×4 การเพิ่มเวลาการแสดงตัวเลข และการจัดการเวลาในการตอบกลับของผู้เล่น
-การสร้างและตรวจสอบลำดับตัวเลข (Sequence Generation and Validation): ความรู้ในการสร้างลำดับตัวเลขแบบสุ่มและการตรวจสอบว่าผู้เล่นกดปุ่มในลำดับที่ถูกต้อง
การพัฒนา Front-end และ Back-end
-การพัฒนา Front-end: คือการจัดการกับการแสดงผลที่ผู้เล่นเห็น การออกแบบปุ่มต่าง ๆ เช่นปุ่มตัวเลข ปุ่ม Start ปุ่ม Try Again และการจับเวลาของแต่ละเลเวล
-การพัฒนา Back-end: หากมีการจัดเก็บข้อมูลผู้เล่นหรือคะแนนสูงสุด (High Score) ต้องมีการใช้ Back-end ในการเก็บข้อมูล เช่น การใช้ภาษา Python, Node.js หรือ PHP ควบคู่กับฐานข้อมูล (Database) อย่าง MySQL หรือ MongoDB
การจัดการเวลา (Time Management)
การเขียนฟังก์ชันจับเวลา (Timer Function): การสร้างตัวจับเวลาที่นับถอยหลังสำหรับแต่ละเลเวล และการแสดงผลให้ผู้เล่นเห็นเวลาที่เหลือ
การพัฒนาระบบการจัดการชีวิตผู้เล่น (Lives System)
ความรู้ในการเขียนระบบเพื่อจำกัดจำนวนการผิดพลาด เช่น การสร้างดวง❤️ 3 ดวงให้แสดงผลบนหน้าจอ และเปลี่ยนสีเมื่อผู้เล่นทำผิดพลาด
การทดสอบและดีบักเกม (Game Testing & Debugging)
-การทดสอบความถูกต้องของการทำงานในแต่ละฟีเจอร์ เช่น การล่องหนของตัวเลข การกดปุ่มในลำดับที่ถูกต้อง การจัดการกับเวลา และการแสดงผลของข้อความต่าง ๆ เช่น “Game Over” หรือ “Time Up”
-การดีบักโค้ดเพื่อแก้ไขปัญหาที่เกิดขึ้นในระหว่างการพัฒนา เช่น ข้อผิดพลาดที่เกิดขึ้นจากการคำนวณเวลาหรือการแสดงผล
ทฤษฎีเกม (Game Theory)
-Flow Theory: การสร้างสมดุลระหว่างความยากของเกมกับทักษะของผู้เล่น เพื่อให้ผู้เล่นรู้สึกสนุก ไม่ง่ายเกินไปและไม่ยากเกินไป
-Reward Systems: การออกแบบระบบรางวัลเพื่อให้ผู้เล่นมีแรงจูงใจ เช่น แสดงข้อความว่า “is smart” หรือ “is winner” เมื่อผ่านด่านได้
6. การดำเนินงาน (Implementation)
การวางแผนและออกแบบเกม
-กำหนดโครงสร้างของเกม เช่น จำนวนเลเวล กติกา วิธีการเล่น ระบบชีวิต และการแสดงผลลัพธ์
-ออกแบบอินเทอร์เฟซผู้ใช้ (UI) เช่น หน้าต่างสำหรับใส่ชื่อผู้เล่น ปุ่มเริ่มเกม ปุ่มตัวเลข ปุ่มลองใหม่ (Try Again) และการแสดงเวลาที่เหลือ
-วางแผนลำดับการแสดงตัวเลขในแต่ละเลเวล รวมถึงการล่องหนของตัวเลขเมื่อครบเวลา
การพัฒนาโปรแกรม
-ใช้ HTML, CSS และ JavaScript ในการพัฒนาโครงสร้างพื้นฐานของเกมและฟังก์ชันกทำงานต่าง ๆ
-สร้างฟังก์ชันในการสุ่มตัวเลขและแสดงตัวเลขบนปุ่มสี่เหลี่ยมจัตุรัส
-เขียนโค้ดเพื่อจับเวลาในการเล่นและเวลาในการแสดงผลของตัวเลข
-สร้างฟังก์ชันตรวจสอบลำดับการกดปุ่มของผู้เล่นว่าถูกต้องตามลำดับที่แสดงไว้หรือไม่
การทดสอบและดีบัก
ทดสอบเกมในสภาพแวดล้อมเบราว์เซอร์ต่าง ๆ เพื่อให้แน่ใจว่าเกมสามารถทำงานได้อย่างถูกต้อง ตรวจสอบการจับเวลา การลบตัวเลข การกดปุ่มตามลำดับ และการแสดงผลเมื่อผู้เล่นชนะหรือแพ้ในแต่ละเลเวล
7. วิธีใช้โปรแกรม (How to Use the Program)
7.1เมื่อเข้าสู่หน้าเว็บไซต์ จะมีช่องให้ผู้เล่นกรอกชื่อ (Please Enter Your Name:)
7.2หลังจากกรอกชื่อแล้ว ให้กดปุ่ม “Start” เพื่อเริ่มเกม
7.3ตัวเลขจะปรากฏบนปุ่มสี่เหลี่ยมจัตุรัสตามเลเวลที่กำหนด โดยผู้เล่นต้องจดจำลำดับตัวเลข
7.4เมื่อหมดเวลา ตัวเลขบนปุ่มสี่เหลี่ยมจัตุรัสจะหายไป ให้ผู้เล่นกดปุ่มตามลำดับตัวเลขที่แสดงไว้ก่อนหน้านี้
7.5หากกดถูกตามลำดับครบถ้วนและในเวลาที่กำหนด จะสามารถไปเลเวลถัดไปได้โดยกดปุ่ม “Next Level”
7.6ผู้เล่นจะมี❤️ 3 ดวง ซึ่งหมายถึงโอกาสที่จะผิดพลาดได้ 3 ครั้ง หากหมดเกมจะสิ้นสุดและแสดงข้อความ “Game Over”
7.7เมื่อผ่านครบทุกเลเวลแล้ว ระบบจะขึ้นข้อความแสดงความยินดี
8. การทดลอง (Testing)
ในการทดสอบเกม “Remember Num” ได้ทำการทดสอบผ่านเบราว์เซอร์หลายตัว เช่น Google Chrome, Firefox และ Microsoft Edge เพื่อให้แน่ใจว่าเกมสามารถทำงานได้บนแพลตฟอร์มต่าง ๆ ผลการทดสอบแสดงให้เห็นว่าเกมสามารถทำงานได้อย่างถูกต้องในทุกเบราว์เซอร์ที่ทำการทดสอบ เวลาที่กำหนดและการแสดงตัวเลขทำงานได้ตรงตามที่วางแผนไว้และระบบชีวิต (❤️) ทำงานได้อย่างถูกต้องและแสดงผลเมื่อผู้เล่นทำผิดพลาด
9. เทคนิคการประยุกต์เพื่อเพิ่มประสิทธิภาพ (Techniques for Optimization)
การลดจำนวน DOM elements
ในการแสดงผลปุ่มและตัวเลขบนหน้าจอ มีการลดจำนวนองค์ประกอบที่ต้องเรนเดอร์ใน DOM (Document Object Model) ของ HTML เพื่อให้การแสดงผลรวดเร็วขึ้น
การจัดการเวลา (Timer Management)
ใช้เทคนิคการเขียนฟังก์ชันการจับเวลาโดยใช้ setTimeout() และ setInterval() อย่างมีประสิทธิภาพ เพื่อลดภาระการประมวลผลของเครื่อง
10. สรุปผลและข้อเสนอแนะ (Conclusion and Recommendations)
เกมสามารถฝึกทักษะความจำและการคิดวิเคราะห์ของผู้เล่นได้ในระดับที่ท้าทายและสนุกสนาน ระบบเกมทำงานได้อย่างเสถียรและไม่มีข้อบกพร่องสำคัญที่พบในระหว่างการทดสอบ แต่ควรเพิ่มเติมในด้านของการเพิ่มเสียงและภาพเคลื่อนไหวเพื่อให้เกมมีความน่าสนใจมากยิ่งขึ้น
11. ข้อมูลอ้างอิง (References)
- การเขียนHTML Javascript และCSS. สืบค้นจาก https://www.w3schools.com/html/default.asp
- ปูพื้นฐานการสร้างเว็บไซต์ด้วยHTML. สืบค้นจาก https://www.youtubeeducation.com/watch?v=0hfeNPM7piw
- ศึกษาโครงงานในส่วนของรายงาน. สืบค้นจาก https://dp.rmutsv.ac.th/
โค้ดHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memory Num Game</title>
<!-- <link rel="stylesheet" href="css/styles.css"> -->
<body background="https://scontent.xx.fbcdn.net/v/t1.15752-9/460171648_560254373179694_339715814435296655_n.jpg?_nc_cat=108&ccb=1-7&_nc_sid=0024fc&_nc_ohc=TLS17RURDNcQ7kNvgHr5-Gv&_nc_ad=z-m&_nc_cid=0&_nc_ht=scontent.xx&_nc_gid=A7ZNop021pp50JVhHiZ5kek&oh=03_Q7cD1QFmp2lDh5lGabTk1weblcSaCXrBcIw-bUrALDHK5UkjSg&oe=672907F9">
</body>
<style>
#game-container {
margin: 20px auto;
max-width: 500px;
}
#start-screen, #game-screen {
display: none;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.grid-container {
display: grid;
gap: 10px;
margin: 20px 0;
}
.grid-cell {
background-color: rgba(255, 255, 255, 0.8);
color: black;
font-size: 24px;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 5px;
height: 44px;
}
#hearts {
font-size: 30px;
margin: 10px;
display: flex;
}
#message {
font-size: 18px;
margin-top: 20px;
}
.btn {
padding: 10px 20px;
border: none;
cursor: pointer;
color: white;
margin-top: 10px;
transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.btn:hover {
background-color: #0f8c0f;
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
transform: translateY(-3px);
}
.btn:active {
transform: translateY(2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.hidden {
font-size:0px;
/* visibility: hidden; ซ่อนเฉพาะตัวเลข */
}
.show-num {
font-size:24px;
/* visibility: hidden; ซ่อนเฉพาะตัวเลข */
}
</style>
</head>
<body>
<div id="game-container">
<!-- Start Screen -->
<div id="start-screen" style="display: block;">
<p>Memory Game</p>
<input type="text" id="player-name" placeholder="Your Name">
<button id="start-btn" class="btn green">Start</button>
</div>
<!-- Game Screen -->
<div id="game-screen">
<p id="level-display">Level: 1</p>
<div id="hearts">
<span id="heart-1">❤️</span>
<span id="heart-2">❤️</span>
<span id="heart-3">❤️</span>
</div>
<p id="timer">Time Left: <span id="time-left">10</span> seconds</p>
<div id="grid-container" class="grid-container"></div>
<div id="message"></div>
<button id="next-btn" class="btn green" style="display:none;">Next Level</button>
<button id="retry-btn" class="btn red" style="display:none;">Try Again</button>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const startScreen = document.getElementById('start-screen');
const gameScreen = document.getElementById('game-screen');
const startBtn = document.getElementById('start-btn');
const nextBtn = document.getElementById('next-btn');
const retryBtn = document.getElementById('retry-btn');
const playerNameInput = document.getElementById('player-name');
const gridContainer = document.getElementById('grid-container');
const levelDisplay = document.getElementById('level-display');
const timeLeftDisplay = document.getElementById('time-left');
const messageDisplay = document.getElementById('message');
const hearts = [
document.getElementById('heart-1'),
document.getElementById('heart-2'),
document.getElementById('heart-3')
];
let level = 1;
let timer;
let timeLeft;
let mistakes = 0;
const maxMistakes = 3;
let gridSize, numbers, currentSequence;
let gameActive = false;
const levels = [
{ grid: 2, timeToShow: 1, timeLimit: 10 }, // Level 1-3
{ grid: 3, timeToShow: 20, timeLimit: 25 }, // Level 4-6
{ grid: 4, timeToShow: 50, timeLimit: 40 }, // Level 7-9
{ grid: 4, timeToShow: 90, timeLimit: 60 } // Level 10
];
startBtn.addEventListener('click', function () {
const playerName = playerNameInput.value.trim();
if (playerName) {
startScreen.style.display = 'none';
gameScreen.style.display = 'block';
startGame();
} else {
alert("Please enter your name.");
}
});
function startGame() {
mistakes = 0;
level = 1;
updateHearts();
startLevel();
}
function startLevel() {
let currentLevel;
if (level>=1 && level <=3) {
currentLevel = levels[0];
} else if(level>=4 && level <=6){
currentLevel = levels[1];
} else if(level>=7 && level <=9){
currentLevel = levels[2];
} else {
currentLevel = levels[3];
}
// currentLevel = levels[Math.min(level - 1, levels.length - 1)];
gridSize = currentLevel.grid;
timeLeft = currentLevel.timeLimit;
timeLeftDisplay.textContent = timeLeft;
levelDisplay.textContent = `Level: ${level}`;
generateGrid(gridSize);
showNumbers(currentLevel.timeToShow);
}
function generateGrid(size) {
gridContainer.innerHTML = '';
gridContainer.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
if (level>=7 && level <=9) {
numbers = Array.from({ length: size * 3 }, (_, i) => i + 1);
} else {
numbers = Array.from({ length: size * size }, (_, i) => i + 1);
}
currentSequence = [...numbers];
numbers = shuffle(numbers);
numbers.forEach(number => {
const cell = document.createElement('button');
cell.classList.add('grid-cell');
cell.textContent = number;
cell.dataset.number = number;
cell.addEventListener('click', onCellClick);
gridContainer.appendChild(cell);
});
}
function onCellClick(e) {
if (!gameActive) return;
const numberClicked = Number(e.target.dataset.number);
if (numberClicked === currentSequence[0]) {
currentSequence.shift();
e.target.classList.add('show-num');
if (currentSequence.length === 0) {
clearInterval(timer);
if (level<10) {
messageDisplay.textContent = `${playerNameInput.value} is smart!`;
nextBtn.style.display = 'block';
} else {
messageDisplay.textContent = `Congratulation ${playerNameInput.value} is winner!`;
}
gameActive = false;
}
} else {
mistakes++;
updateHearts();
if (mistakes >= maxMistakes) {
gameOver();
}
}
}
function updateHearts() {
hearts.forEach((heart, index) => {
heart.textContent = index < (maxMistakes - mistakes) ? '❤️' : '🖤';
});
}
function gameOver() {
clearInterval(timer);
messageDisplay.textContent = "Game Over!";
retryBtn.style.display = 'block';
gameActive = false;
}
function showNumbers(timeToShow) {
gameActive = false;
setTimeout(() => {
document.querySelectorAll('.grid-cell').forEach(cell => {
cell.classList.add('hidden');
});
startTimer();
gameActive = true;
}, timeToShow * 1000);
}
function startTimer() {
timer = setInterval(() => {
timeLeft--;
timeLeftDisplay.textContent = timeLeft;
if (timeLeft <= 0) {
clearInterval(timer);
messageDisplay.textContent = "Time Up!";
retryBtn.style.display = 'block';
gameActive = false;
}
}, 1000);
}
nextBtn.addEventListener('click', () => {
if (level < 10) {
level++;
nextBtn.style.display = 'none';
messageDisplay.textContent = '';
startLevel();
}
});
retryBtn.addEventListener('click', () => {
retryBtn.style.display = 'none';
messageDisplay.textContent = '';
mistakes = 0;
updateHearts();
startLevel();
});
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
});
</script>
</body>
</html>
