ชื่อ:นายภูตะวัน จันทสุริวงค์ วฟ.1/1 1674040130015
คณะวิศวกรรมศาสตร์:สาขาวิศวกรรมไฟฟ้า
วิชา: 04000104 การโปรแกรมคอมพิวเตอร์ 1/2567
1.ความเป็นมา
ความเป็นมาของเกมตกปลา HTML
- ต้นกำเนิดของเกมตกปลา: เกมตกปลาในรูปแบบดั้งเดิมมักจะมาจากเกมตู้ที่มีอยู่ในสถานบันเทิงหรือสวนสนุก ซึ่งเป็นที่นิยมมากในยุค 80 และ 90 แต่ด้วยการพัฒนาของเทคโนโลยีและอินเทอร์เน็ต ทำให้เกมตกปลาเริ่มถูกสร้างขึ้นในรูปแบบดิจิทัลและสามารถเล่นได้ในเบราว์เซอร์
- การพัฒนาด้วย HTML และ JavaScript: การใช้ HTML ทำให้สามารถสร้างโครงสร้างของเกมได้ ส่วน CSS ใช้ในการออกแบบและตกแต่งหน้าตาเกมให้สวยงาม ในขณะที่ JavaScript ใช้ในการสร้างการโต้ตอบของเกม เช่น การเคลื่อนที่ของปลา การจับปลา และการนับคะแนน
- ความนิยมของเกมตกปลา: เกมตกปลา HTML ได้รับความนิยมในกลุ่มผู้เล่นที่ต้องการเล่นเกมแบบง่าย ๆ และรวดเร็ว โดยเฉพาะในช่วงเวลาว่าง หรือในระหว่างการพักเบรกจากการทำงานหรือเรียน นอกจากนี้ยังสามารถนำไปประยุกต์ใช้ในการเรียนการสอนเพื่อสร้างความสนุกสนานและกระตุ้นการเรียนรู้
- การพัฒนาต่อเนื่อง: ปัจจุบันมีการพัฒนาเกมตกปลาในรูปแบบที่หลากหลายมากขึ้น เช่น การเพิ่มกราฟิก 3D, การสร้างโลกเสมือนจริง, หรือการเพิ่มฟีเจอร์ใหม่ ๆ เช่น การแข่งขันกับผู้เล่นคนอื่น หรือการจับปลาในสภาพแวดล้อมที่แตกต่างกัน
เกมตกปลา HTML จึงเป็นตัวอย่างที่ดีของการผสมผสานระหว่างความบันเทิงและเทคโนโลยีในยุคดิจิทัลที่ให้ผู้เล่นได้
2.วัตถุประสงค์
2.1ความบันเทิงความสนุกสนาน: เกมตกปลาถูกออกแบบมาเพื่อให้ผู้เล่นมีความสนุกสนานและเพลิดเพลินไปกับการจับปลา และได้เรียนรู้เกี่ยวกับโปรแกรม
2.2การผ่อนคลาย: เกมตกปลาเป็นกิจกรรมที่สามารถช่วยให้ผู้เล่นผ่อนคลายจากความเครียดในชีวิตประจำวัน โดยเฉพาะเมื่อมีเวลาว่าง
3.ขอบเขต
กลไกของเกม
ระบบการจับปลา: กำหนดวิธีการที่ผู้เล่นจะจับปลา โดยใช้การคลิก
ประเภทของปลา: มีการออกแบบให้มีชนิดของปลาหลากหลาย เช่น ปลาตัวเล็ก ปลาตัวใหญ่ ซึ่งอาจมีค่าคะแนนที่แตกต่างกัน
ระบบคะแนน: ผู้เล่นจะได้รับคะแนนตามประเภทของปลาและจำนวนปลาที่จับได้ โดยอาจมีระบบการเก็บคะแนนสะสมหรือระดับที่ต้องทำให้ครบ
การออกแบบกราฟิก
ภาพและกราฟิก: การออกแบบตัวละครและปลา เพื่อให้มีความสวยงามและดึงดูดผู้เล่น
ระดับความยาก
การเพิ่มระดับ: เกมสามารถออกแบบให้มีหลายระดับความยาก โดยการเพิ่มจำนวนปลา ความเร็วในการจับปลา หรือการเพิ่มอุปสรรคที่ทำให้การจับปลาเป็นเรื่องที่ท้าทายขึ้น
เวลาในการเล่น: อาจมีการกำหนดเวลาที่ผู้เล่นจะต้องจับปลาให้ได้ในเวลาที่จำกัด ซึ่งช่วยเพิ่มความตื่นเต้น
ฟีเจอร์พิเศษ
การใช้พาวเวอร์อัพ: ผู้เล่นอาจสามารถใช้พาวเวอร์อัพต่าง ๆ เพื่อช่วยในการจับปลา เช่น การเพิ่มเวลา การเพิ่มคะแนน หรือการทำให้ปลาเคลื่อนที่ช้าลง
ภารกิจและเป้าหมาย: การตั้งเป้าหมายในการเล่น เช่น การจับปลาชนิดพิเศษเฉพาะที่ให้รางวัลเพิ่มเติม
การพัฒนาทางเทคนิค
การเขียนโค้ด: ใช้ HTML, CSS, และ JavaScript เพื่อสร้างฟังก์ชันการเล่น กราฟิก และการโต้ตอบของเกม
การทดสอบและปรับปรุง: การทดสอบเกมเพื่อหาจุดบกพร่องและปรับปรุงประสบการณ์การเล่นให้ดียิ่งขึ้น
การเข้าถึงและแพลตฟอร์ม
การเข้าถึงผ่านเบราว์เซอร์: เกมสามารถเล่นได้ผ่านเบราว์เซอร์โดยไม่จำเป็นต้องติดตั้งซอฟต์แวร์เพิ่มเติม ทำให้สามารถเข้าถึงได้ง่าย
รองรับหลายอุปกรณ์: ออกแบบให้รองรับการเล่นบนอุปกรณ์ที่หลากหลาย เช่น คอมพิวเตอร์ แท็บเล็ต หรือโทรศัพท์มือถือ
4.ประโยชน์ที่ขาดว่าจะได้รับ
การฝึกฝนสมาธิและความอดทน
การเล่นเกมที่ต้องมีการจับปลาในเวลาที่กำหนดช่วยฝึกสมาธิและความตั้งใจ
การคลายเครียดการเล่นเกมตกปลาเป็นวิธีที่ดีในการผ่อนคลายหลังจากวันที่เครียด ทำให้ผู้เล่นรู้สึกสนุกสนานและลดความเครียด
การใช้งานคอมพิวเตอร์ การเล่นเกมออนไลน์ช่วยให้ผู้เล่นได้ฝึกใช้คอมพิวเตอร์และอุปกรณ์ต่าง ๆ
การพัฒนาโปรแกรม สำหรับผู้ที่สนใจสร้างเกมตกปลา HTML เอง จะได้เรียนรู้เกี่ยวกับการเขียนโปรแกรม การออกแบบเกม และการทำงานกับกราฟิก
การจัดการเวลา ผู้เล่นจะได้เรียนรู้การจัดการเวลาในขณะที่ต้องจับปลาให้ได้ในเวลาที่กำหนด
5.ความรู้ที่คาดว่าจะได้รับ
5.1 Visual Studio Code
เป็นโปรแกรมแก้ไขซอร์สโค้ดที่พัฒนาโดยไมโครซอฟท์สำหรับ Windows, Linux และ macOS มีการสนับสนุนสำหรับการดีบัก การควบคุม Git ในตัวและ GitHub การเน้นไวยากรณ์ การเติมโค้ดอัจฉริยะ ตัวอย่าง และ code refactoring มันสามารถปรับแต่งได้หลายอย่าง ให้ผู้ใช้สามารถเปลี่ยนธีม แป้นพิมพ์ลัด การตั้งค่า และติดตั้งส่วนขยายที่เพิ่มฟังก์ชันการทำงานเพิ่มเติม ซอร์สโค้ดนั้นฟรีและโอเพนซอร์สและเผยแพร่ภายใต้สิทธิ์การใช้งาน MIT[ไบนารีที่คอมไพล์แล้วเป็นฟรีแวร์และฟรีสำหรับการใช้ส่วนตัวหรือเพื่อการค้า
5.2 HTML
เป็นภาษาคอมพิวเตอร์ที่ใช้ในการแสดงผลของเอกสารบน website หรือที่เราเรียกกันว่าเว็บเพจ ถูกพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C) และจากการพัฒนาทางด้าน Software ของ Microsoft ทำให้ภาษา HTML เป็นอีกภาษาหนึ่งที่ใช้เขียนโปรแกรมได้ หรือที่เรียกว่า HTML Application HTML เป็นภาษาประเภท Markup สำหรับการการสร้างเว็บเพจ โดยใช้ภาษา HTML สามารถทำโดยใช้โปรแกรม Text Editor ต่างๆ เช่น Notepad, Editplus หรือจะอาศัยโปรแกรมที่เป็นเครื่องมือช่วยสร้างเว็บเพจ
5.3 CSS
เป็นภาษาโปรแกรมที่ใช้สำหรับการตกแต่งและจัดรูปแบบเอกสาร HTML โดย CSS ช่วยให้คุณสามารถกำหนดลักษณะต่างๆ ขององค์ประกอบในเว็บ เช่น สี ฟอนต์ ขนาด ขอบ เส้นขอบ ระยะห่าง และการจัดตำแหน่ง
5.4 JavaScript
เป็นภาษาคอมพิวเตอร์สำหรับการเขียนโปรแกรมบนระบบอินเทอร์เน็ต ที่กำลังได้รับความนิยมอย่างสูง Java JavaScript เป็น ภาษาสคริปต์เชิงวัตถุ (ที่เรียกกันว่า “สคริปต์” (script) ซึ่งในการสร้างและพัฒนาเว็บไซต์ (ใช่ร่วมกับ HTML) เพื่อให้เว็บไซต์ของเราดูมีการเคลื่อนไหว สามารถตอบสนองผู้ใช้งานได้มากขึ้น
6.ผลการนำเนินการ
โครงสร้าง HTML
<html lang="th">: ระบุว่าภาษาของเอกสารเป็นภาษาไทย<meta charset="UTF-8">: ตั้งค่าการเข้ารหัสเป็น UTF-8 (รองรับภาษาไทย)<meta name="viewport">: ตั้งค่าการแสดงผลให้เหมาะสมกับอุปกรณ์มือถือ<title>: กำหนดชื่อเอกสารที่จะปรากฏในแท็บของเบราว์เซอร์<link>: เชื่อมโยงกับฟอนต์ที่ใช้ในเกม<h1>เกมตกปลา</h1>:แสดงชื่อเกม “เกมตกปลา” ด้วยฟอนต์ขนาดใหญ่ เป็นหัวข้อหลักของหน้าเว็บ<div id="score">คะแนน: 0</div>:ส่วนนี้แสดงคะแนนของผู้เล่น โดยมีค่าตั้งต้นเป็น 0 คะแนน<div id="timer">เวลาถอยหลัง: 30 วินาที</div>:แสดงเวลาที่เหลือในการเล่นเกม โดยตั้งค่าเริ่มต้นเป็น 30 วินาที<div id="gameArea"></div>:พื้นที่เล่นเกม ซึ่งเป็นส่วนที่แสดงปลาหรือวัตถุอื่น ๆ ขึ้นมาในตำแหน่งแบบสุ่ม<div id="gameOverMessage"></div>:แสดงข้อความเมื่อจบเกม (แพ้หรือชนะ) แต่เริ่มต้นจะซ่อนอยู่จนกว่าจะจบเกม<button id="startButton">เริ่มเกม</button>:ปุ่มเริ่มเกม เมื่อผู้เล่นคลิกจะเริ่มเกมและสร้างปลา ขยะ และฉลาม<button id="stopButton">หยุดเกม</button>:ปุ่มหยุดเกม เมื่อคลิกจะหยุดเกมทันที (ถูกซ่อนอยู่ในช่วงเริ่มต้นเกม)<button id="newGameButton">เริ่มเกมใหม่</button>:ปุ่มเริ่มเกมใหม่ หลังจากเกมจบแล้วจะแสดงปุ่มนี้เพื่อเริ่มเกมใหม่<script>:ส่วนนี้บรรจุ JavaScript ที่ควบคุมการทำงานของเกม เช่น การจัดการคะแนน การจับเวลา การสร้างปลา และการตรวจสอบว่าผู้เล่นชนะหรือแพ้
โครงสร้างcss
พื้นหลังและฟอนต์: ใช้ฟอนต์สไตล์สบายๆ จาก Google Fonts (Pacifico) และกำหนดพื้นหลังแบบไล่สีฟ้าเพื่อสร้างบรรยากาศเย็นสบายพื้นที่เกม: จัดวางพื้นที่เกม (#gameArea) ขนาด 600x400px ให้มีขอบมน มีเงา และจัดกึ่งกลางหน้าเว็บ พร้อมกำหนดเอฟเฟกต์ hover สำหรับอีโมจิ (ปลา, ขยะ, ฉลาม) ให้ขยายขึ้นเมื่อเลื่อนเมาส์ข้อความแสดงผล: แสดงคะแนนและเวลาที่ขนาดตัวอักษร 24px และใช้สีแดงสำหรับตัวนับเวลาถอยหลังเพื่อเน้นความสำคัญปุ่ม: ปุ่มควบคุมมีขนาดใหญ่, มีขอบมน, เงา, และเปลี่ยนสีเมื่อวางเมาส์เพื่อให้ผู้ใช้เห็นได้ชัดเจน และตอบสนองต่อการใช้งานข้อความจบเกม: ข้อความ “จบเกม” ถูกซ่อนอยู่ในตอนแรก และจะแสดงขึ้นพร้อมขนาดใหญ่และสีแดงเมื่อเกมจบโดยรวม CSS นี้เน้นการออกแบบให้มีสีสันสดใส มองเห็นง่าย และมีการตอบสนองที่ดีต่อการกระทำของผู้ใช้
โครงสร้างJavaScript
ตัวแปรและการตั้งค่าเริ่มต้น:ตัวแปรหลัก: score (คะแนน), gameInterval (ตัวจับเวลาสำหรับการสร้างปลา/ขยะ/ฉลาม), countdownInterval (จับเวลาถอยหลัง)การตั้งค่า: จำนวนปลาที่ต้องจับ (totalFishToCatch = 20) และเวลาจำกัดของเกม (timeLimit = 30 วินาที)
ฟังก์ชันหลัก:createFishOrTrashOrShark(): สร้างอีโมจิปลา, ขยะ, หรือฉลามในตำแหน่งแบบสุ่มในพื้นที่เกม พร้อมตั้งค่าคลิกเพื่อลบและเพิ่ม/ลดคะแนน (ปลาบวกคะแนน, ขยะลบคะแนน, ฉลามบวกคะแนนสองเท่า)startGame(): รีเซ็ตคะแนน, เริ่มการสร้างปลา/ขยะ/ฉลามทุก ๆ วินาที, เริ่มจับเวลาถอยหลัง และตั้งค่าปุ่มการควบคุมเกมstopGame(won): หยุดเกมเมื่อเวลาหมดหรือทำคะแนนครบตามที่กำหนด พร้อมแสดงข้อความจบเกมว่าผู้เล่นชนะหรือแพ้resetGame(): รีเซ็ตทุกอย่างและเริ่มเกมใหม่stopCurrentGame(): หยุดเกมปัจจุบันทันที โดยถือว่าผู้เล่นแพ้
การเชื่อมต่อกับองค์ประกอบใน HTML:มีการเชื่อมโยงปุ่มต่าง ๆ เช่น ปุ่มเริ่มเกม (startButton), ปุ่มหยุด (stopButton), และปุ่มเริ่มใหม่ (newGameButton) กับฟังก์ชันที่เหมาะสม (เริ่มเกม, หยุดเกม, เริ่มใหม่)
7.วิธีการใช้งานโปรแกรม
เมื่อคลิกปุ่มเริ่มเกม (startButton), เกมจะเริ่มจับเวลา และสุ่มแสดง ปลา (🐟), ขยะ (🗑️), และ ฉลาม (🦈) ขึ้นมาบนพื้นที่เล่นเกม (gameArea)
ปลา 🐟: เมื่อคลิกจะได้ 1 คะแนน
ขยะ 🗑️: เมื่อคลิกจะโดน หัก 1 คะแนน
ฉลาม 🦈: เมื่อคลิกจะได้ 2 คะแนน
คะแนนเป้าหมายคือ 20 คะแนน โดยผู้เล่นต้องจับปลาและฉลามให้ได้เพียงพอก่อนเวลาหมด ซึ่งเวลาจะถอยหลังจาก 30 วินาที
จบเกม ชนะ: เมื่อผู้เล่นได้คะแนนถึง 20 คะแนนก่อนเวลาหมด เกมจะแสดงข้อความว่า “คุณชนะ!”แพ้: เมื่อเวลาหมดก่อนที่จะได้คะแนนครบ 20 คะแนน เกมจะแสดงข้อความว่า “คุณแพ้! เวลาหมดแล้ว!”
8.การทดลองและข้อเสนอแนะ
การเพิ่มระดับความยาก: เริ่มต้นจากระดับง่ายและเพิ่มความยากขึ้นเมื่อผู้เล่นทำคะแนนได้มากขึ้น เช่น ปลาและฉลามจะเคลื่อนที่เร็วขึ้นหรือลดเวลาในการแสดงผลลงเมื่อผู้เล่นไปถึงระดับสูงๆ
การจำกัดเวลา: สามารถลดเวลาจับปลาเมื่อคะแนนเพิ่มขึ้น ทำให้ผู้เล่นต้องตัดสินใจรวดเร็วขึ้น
เพิ่มชนิดของปลา: นอกจากปลาทั่วไปและฉลาม อาจเพิ่มปลาแบบพิเศษที่มีคะแนนแตกต่างกัน เช่น ปลาทองที่ให้ 3 คะแนน หรือปลาปักเป้าที่อาจลดคะแนน 1-2 แต้ม
การปรับดีไซน์ของปลาปรับแต่งขนาดหรือรูปร่างของปลาและฉลามให้มีความแตกต่างชัดเจนเพื่อเพิ่มมิติในการเล่นเกม
9.อ้างอิง
https://chatgpt.com/c/6707a6b6-2238-8011-893e-2054607c12d6
10.สรุปผล
โค้ดในการสร้างเกม
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>เกมตกปลา</title>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Pacifico', cursive;
text-align: center;
background: linear-gradient(to bottom, #b3e0ff, #cceeff);
margin: 0;
padding: 20px;
}
h1 {
color: #004080;
}
#gameArea {
position: relative;
width: 600px;
height: 400px;
border: 5px solid #004080;
border-radius: 15px;
overflow: hidden;
background-color: #cceeff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
margin: 0 auto; /* จัดกึ่งกลาง */
}
.ish,f .trash, .shark {
position: absolute;
font-size: 40px; /* ขนาดของอีโมจิปลา */
display: none;
transition: transform 0.3s; /* เอฟเฟกต์การเคลื่อนไหว */
}
.fish:hover, .trash:hover, .shark:hover {
transform: scale(1.2); /* ขยายเมื่อเอาเมาส์ไปวาง */
}
#score {
font-size: 24px;
margin: 10px 0;
color: #004080;
}
#timer {
font-size: 24px;
margin: 10px 0;
color: #ff0000; /* สีแดงสำหรับเวลา */
}
button {
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
background-color: #004080;
color: white;
border: none;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
transition: background-color 0.3s;
margin: 5px; /* เพิ่มระยะห่างระหว่างปุ่ม */
}
button:hover {
background-color: #0066cc; /* เปลี่ยนสีเมื่อวางเมาส์ */
}
#newGameButton, #stopButton {
display: none; /* ซ่อนปุ่มเริ่มเกมใหม่และหยุดเริ่มต้น */
}
#gameOverMessage {
display: none; /* ซ่อนข้อความจบเกมเริ่มต้น */
font-size: 32px;
color: #ff0000; /* สีแดงสำหรับข้อความ */
margin: 20px 0;
}
</style>
</head>
<body>
<h1>เกมตกปลา</h1>
<div id="score">คะแนน: 0</div>
<div id="timer">เวลาถอยหลัง: 30 วินาที</div>
<div id="gameArea"></div>
<div id="gameOverMessage"></div> <!-- Div for game over message -->
<button id="startButton">เริ่มเกม</button>
<button id="stopButton">หยุดเกม</button> <!-- ปุ่มหยุดเกม -->
<button id="newGameButton">เริ่มเกมใหม่</button> <!-- ปุ่มเริ่มเกมใหม่ -->
<script>
let score = 0;
let gameInterval;
let countdownInterval;
const totalFishToCatch = 20; // จำนวนปลาที่ต้องจับ
const timeLimit = 30; // เวลาจำกัดในการจับปลา (วินาที)
const gameArea = document.getElementById('gameArea');
const scoreDisplay = document.getElementById('score');
const timerDisplay = document.getElementById('timer');
const startButton = document.getElementById('startButton');
const stopButton = document.getElementById('stopButton'); // ปุ่มหยุดเกม
const newGameButton = document.getElementById('newGameButton'); // ปุ่มเริ่มเกมใหม่
const gameOverMessage = document.getElementById('gameOverMessage'); // Div สำหรับข้อความจบเกม
function createFishOrTrashOrShark() {
const randomValue = Math.random(); // Generate a random value to determine what to create
const element = document.createElement('span');
if (randomValue < 0.7) {
element.className = 'fish'; // 70% chance to create a fish
element.innerText = '🐟'; // Fish emoji
} else if (randomValue < 0.9) {
element.className = 'trash'; // 20% chance to create trash
element.innerText = '🗑️'; // Trash emoji
} else {
element.className = 'shark'; // 10% chance to create a shark
element.innerText = '🦈'; // Shark emoji
}
element.style.left = Math.random() * (gameArea.clientWidth - 50) + 'px';
element.style.top = Math.random() * (gameArea.clientHeight - 30) + 'px';
element.style.display = 'block';
element.onclick = function() {
if (element.className === 'fish') {
score++;
scoreDisplay.innerText = 'คะแนน: ' + score;
} else if (element.className === 'trash') {
score--; // Reduce score for trash
scoreDisplay.innerText = 'คะแนน: ' + score;
} else if (element.className === 'shark') {
score += 2; // Increase score by 2 for shark
scoreDisplay.innerText = 'คะแนน: ' + score;
}
gameArea.removeChild(element);
// Check if the target score has been reached
if (score >= totalFishToCatch) {
stopGame(true); // Player wins
}
};
gameArea.appendChild(element);
setTimeout(() => {
if (element.parentNode) {
gameArea.removeChild(element);
}
}, 2000); // Element stays for 2 seconds
}
function startGame() {
score = 0;
scoreDisplay.innerText = 'คะแนน: ' + score;
timerDisplay.innerText = 'เวลาถอยหลัง: ' + timeLimit + ' วินาที'; // Reset time
gameInterval = setInterval(createFishOrTrashOrShark, 1000); // Create fish, trash, or shark every 1 second
startButton.disabled = true; // Disable the start button
newGameButton.style.display = 'none'; // Hide the new game button
stopButton.style.display = 'inline-block'; // Show the stop button
gameOverMessage.style.display = 'none'; // Hide the game over message
// Start countdown timer
let timeLeft = timeLimit;
countdownInterval = setInterval(() => {
timeLeft--;
timerDisplay.innerText = 'เวลาถอยหลัง: ' + timeLeft + ' วินาที';
if (timeLeft <= 0) {
stopGame(false); // End game if time runs out
}
}, 1000); // Countdown every second
}
function stopGame(won) {
clearInterval(gameInterval);
clearInterval(countdownInterval);
startButton.disabled = false; // Enable the start button again
stopButton.style.display = 'none'; // Hide the stop button
newGameButton.style.display = 'inline-block'; // Show the new game button
gameOverMessage.style.display = 'block'; // Show the game over message
// Set the message based on whether the player won or lost
if (won) {
gameOverMessage.innerText = 'จบเกม! คะแนนของคุณคือ: ' + score + '\nคุณชนะ!';
} else {
gameOverMessage.innerText = 'จบเกม! คะแนนของคุณคือ: ' + score + '\nคุณแพ้! เวลาหมดแล้ว!';
}
}
function resetGame() {
score = 0; // Reset score
scoreDisplay.innerText = 'คะแนน: ' + score; // Reset score display
timerDisplay.innerText = 'เวลาถอยหลัง: ' + timeLimit + ' วินาที'; // Reset timer display
startGame(); // Start the game
}
function stopCurrentGame() {
stopGame(false); // Stop the game without winning
}
startButton.onclick = startGame;
stopButton.onclick = stopCurrentGame; // Set up the stop button to stop the game
newGameButton.onclick = resetGame; // Set up the new game button to reset the game
</script>
</body>
</html>
