ผู้เขียนบทความ : นาย ณัฐวุฒิ ดวงทอง รหัส 167404130025
คณะวิศวะกรรมศาสตร์ : สาขาวิศวกรรมไฟฟ้า
วิชา : 04000104 การโปรแกรมคอมพิวเตอร์ 1/2567
1.ความเป็นมา
เนื่องจากปัจจุบัน การเรียนรู้และพัฒนาทักษะต่าง ๆ ด้วยรูปแบบของเกมเป็นวิธีที่ได้รับความนิยม โดยเฉพาะการพัฒนาความจำและการสังเกตผ่านเกมที่ออกแบบมาอย่างเหมาะสม ซึ่งนอกจากจะช่วยเพิ่มทักษะด้านการจดจำแล้ว ยังสร้างความบันเทิงและผ่อนคลายให้กับผู้เล่นด้วย ดังนั้นโปรเจกต์นี้จึงถูกพัฒนาขึ้นเพื่อสร้างเกมง่าย ๆ ที่ช่วยเสริมสร้างทักษะดังกล่าวโดยใช้รูปอิโมจิที่ผู้คนคุ้นเคย
2. วัตถุประสงค์
-เพื่อพัฒนาโปรแกรมเกมที่ช่วยเสริมสร้างความจำและความสามารถในการสังเกตของผู้ใช้งาน
-เพื่อทดสอบทักษะการเลือกสิ่งที่แตกต่างออกจากกลุ่มของผู้ใช้งาน
-เพื่อสร้างโปรแกรมที่มีการจับเวลาและเก็บสถิติ เพื่อให้ผู้เล่นสามารถติดตามความก้าวหน้าของตนเองได้
3.ขอบเขตการทำงาน
-เกมจะมีรอบการเล่นทั้งหมด 5 รอบ โดยในแต่ละรอบจะมีอิโมจิที่แตกต่างกันหนึ่งอันจากกลุ่ม 25 รูป
-ผู้เล่นต้องเลือกอิโมจิที่แตกต่างออกจากกลุ่มภายในเวลาอันรวดเร็ว
-โปรแกรมจะจับเวลาและแสดงผลลัพธ์เวลาสะสมทั้งหมดหลังจากเล่นครบ 5 รอบ
-โปรแกรมจะมีฟังก์ชันเริ่มใหม่และการเก็บสถิติ 5 ครั้งล่าสุด
4.ประโยชน์ที่คาดว่าจะได้รับ
-ผู้เล่นสามารถพัฒนาทักษะการสังเกตและความจำผ่านเกมที่สร้างความบันเทิง
-สามารถฝึกความรวดเร็วในการตัดสินใจและการสังเกตความแตกต่าง
-ผู้ใช้งานสามารถติดตามและเปรียบเทียบเวลาที่ใช้ในแต่ละรอบ ซึ่งอาจช่วยในการพัฒนาทักษะให้ดีขึ้น
5.ความรู้ที่เกี่ยวข้อง
-ความรู้พื้นฐานด้านการพัฒนาเว็บโดยใช้ HTML, CSS, และ JavaScript
-ทฤษฎีด้านความจำและการสังเกต รวมถึงวิธีการออกแบบ UI ที่ช่วยเสริมการฝึกทักษะเหล่านี้
-การจับเวลาและการเก็บสถิติในการพัฒนาเกม เพื่อให้ผู้เล่นสามารถวัดผลและเห็นความก้าวหน้า
6.การดำเนินงาน
-ขั้นตอนการวิเคราะห์และออกแบบ เพื่อกำหนดรูปแบบเกมและ UI ที่เหมาะสม
-การเขียนโค้ด HTML, CSS และ JavaScript เพื่อสร้างหน้าเว็บเกมและฟังก์ชันการทำงาน
-การทดสอบการทำงานของโปรแกรม โดยให้ผู้เล่นทดลองใช้งานและปรับปรุงตามผลตอบรับ
7.วิธีใช้งานโปรแกรม
-กดปุ่ม “เริ่มเกม” เพื่อเริ่มรอบการเล่นใหม่
-ในแต่ละรอบ ให้คลิกที่อิโมจิที่แตกต่างจากกลุ่มให้เร็วที่สุด
-เมื่อเล่นครบ 5 รอบ โปรแกรมจะแสดงเวลาที่ใช้รวมทั้งหมด
-กด “เริ่มเกม” ใหม่ เพื่อเล่นอีกครั้งและรีเซ็ตสถิติ
8. การทดลอง
-ทดลองใช้งานโปรแกรมเพื่อวัดความแม่นยำของการจับเวลาและความถูกต้องในการแสดงผลลัพธ์
-ทดสอบให้ผู้เล่นลองเล่นหลายรอบเพื่อประเมินความรวดเร็วในการสังเกตและเลือกอิโมจิที่แตกต่าง
-ตรวจสอบการเก็บสถิติ 5 ครั้งล่าสุดว่าถูกต้องและสามารถแสดงผลได้อย่างเหมาะสม
9.สรุปผลและข้อเสนอแนะนำ
-โปรแกรมสามารถทำงานได้ตามวัตถุประสงค์ โดยช่วยพัฒนาทักษะการสังเกตและความจำของผู้เล่นได้ดี
-ควรพิจารณาปรับปรุงในด้าน UI/UX เพิ่มเติม เช่น การปรับขนาดและสีของอิโมจิ เพื่อให้เหมาะกับกลุ่มผู้ใช้งานที่หลากหลายมากขึ้น
-อาจพิจารณาเพิ่มระดับความยากของเกมในเวอร์ชันถัดไป เพื่อสร้างความท้าทายให้กับผู้เล่น
Code Games
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>เกมจำผิดรูปอิโมจิ</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
#emoji-grid {
display: grid;
grid-template-columns: repeat(5, 60px);
gap: 10px;
margin-top: 20px;
}
.emoji {
font-size: 40px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
#result {
margin-top: 20px;
font-size: 1.2em;
color: green;
}
#score, #timer {
margin-top: 10px;
font-size: 1.1em;
}
#score {
color: blue;
}
#timer {
color: red;
}
#start-button {
padding: 10px 20px;
font-size: 1.1em;
margin-top: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>เกมจำผิดรูปอิโมจิ</h1>
<button id="start-button" onclick="startGame()">เริ่มเกม</button>
<div id="emoji-grid"></div>
<div id="result"></div>
<div id="score">รอบที่: 1/5</div>
<div id="timer">เวลา: 0.00 วินาที</div>
<script>
const emojiList = ["😀", "😁", "😂", "😃", "😄", "😆", "😉", "😊"];
const emojiGrid = document.getElementById("emoji-grid");
const resultText = document.getElementById("result");
const scoreText = document.getElementById("score");
const timerText = document.getElementById("timer");
const startButton = document.getElementById("start-button");
let round = 1;
const totalRounds = 5;
let startTime, timerInterval;
let totalElapsedTime = 0; // ตัวแปรสะสมเวลารวม
function startTimer() {
startTime = Date.now();
timerInterval = setInterval(() => {
const elapsedTime = (Date.now() - startTime) / 1000;
timerText.textContent = `เวลา: ${(totalElapsedTime + elapsedTime).toFixed(2)} วินาที`;
}, 100);
}
function stopTimer() {
clearInterval(timerInterval);
const roundElapsedTime = (Date.now() - startTime) / 1000;
totalElapsedTime += roundElapsedTime; // เพิ่มเวลาของรอบนี้เข้าเวลารวม
}
function generateEmojis() {
emojiGrid.innerHTML = "";
resultText.textContent = "";
scoreText.textContent = `รอบที่: ${round}/${totalRounds}`;
timerText.textContent = `เวลา: ${totalElapsedTime.toFixed(2)} วินาที`; // แสดงเวลารวม
const randomEmoji = emojiList[Math.floor(Math.random() * emojiList.length)];
const oddEmoji = emojiList[Math.floor(Math.random() * emojiList.length)];
const oddIndex = Math.floor(Math.random() * 25);
startTimer(); // เริ่มจับเวลาเมื่อเริ่มรอบใหม่
for (let i = 0; i < 25; i++) {
const emojiDiv = document.createElement("div");
emojiDiv.classList.add("emoji");
if (i === oddIndex) {
emojiDiv.textContent = oddEmoji;
emojiDiv.addEventListener("click", () => {
stopTimer(); // หยุดจับเวลาหากตอบถูก
resultText.textContent = "คุณเลือกถูกต้อง!";
if (round < totalRounds) {
round++;
setTimeout(generateEmojis, 1000);
} else {
resultText.textContent = `จบเกม! คุณใช้เวลารวมทั้งหมด: ${totalElapsedTime.toFixed(2)} วินาที`;
startButton.style.display = "block"; // แสดงปุ่มเริ่มเกมใหม่หลังจบเกม
}
});
} else {
emojiDiv.textContent = randomEmoji;
emojiDiv.addEventListener("click", () => {
resultText.textContent = "ลองใหม่อีกครั้ง!";
});
}
emojiGrid.appendChild(emojiDiv);
}
}
function startGame() {
round = 1; // รีเซ็ตจำนวนรอบ
totalElapsedTime = 0; // รีเซ็ตเวลารวม
timerText.textContent = `เวลา: 0.00 วินาที`; // รีเซ็ตแสดงผลเวลาเป็น 0
startButton.style.display = "none"; // ซ่อนปุ่มเริ่มเกม
generateEmojis();
}
</script>
</body>
</html>
