โครงงานคอมพิวเตอร์

เรื่อง เว็บไซต์เกม 4 in row

โดย
นายพูลธวัช โกวิทานนท์
นายศุภวัตร์ จิตต์จานงค์
นายเนติ เสียงเสนาะ

รายงานนี้เป็นส่วนหนึ่งของรายวิชา ง30299 โครงงานคอมพิวเตอร์ 2

ตามหลักสูตรห้องเรียนพิเศษวิทยาศาสตร์ของ สสวท.
โรงเรียนศรัทธาสมุทร
ภาคเรียนที่ 2 ชั้นมัธยมศึกษาปีที่ 4 ปีการศึกษา 2564
 โครงงานคอมพิวเตอร์
เรื่อง เว็บไซต์เกม 4 in row

โดย
นายพูลธวัช โกวิทานนท์
นายศุภวัตร์ จิตต์จานงค์
นายเนติ เสียงเสนาะ

ครูที่ปรึกษา
นางสาวมณฑารพ สิงโตเกษม

รายงานนี้เป็นส่วนหนึ่งของรายวิชา ง30299 โครงงานคอมพิวเตอร์ 2

ตามหลักสูตรห้องเรียนพิเศษวิทยาศาสตร์ของ สสวท.
โรงเรียนศรัทธาสมุทร
ภาคเรียนที่ 2 ชั้นมัธยมศึกษาปีที่ 4 ปีการศึกษา 2564
 ก

บทคัดย่อ

โครงงานคอมพิวเตอร์ เรื่อง เว็บไซต์เกม 4 in row มีวัตถุประสงค์เพื่อให้ผู้เล่นได้มีการพัฒนาการเล่น

เกม 4 in row เพื่อให้ผู้เล่นรู้จักเกม 4 in row และเพื่อพัฒนาทักษาทางการวางแผน โดยศึกษาจากความ
พึงพอใจของผู้เล่นจากผู้ที่ทดลองเล่นเว็บไซต์เกม 4 in row จานวน 50 คน ซึ่งมีขั้นตอนการศึกษา 5 ข้อ ดังนี้
โดการเริ่มจากการศึกษาภาษาที่ใช้ในการเขียน ได้แก่ CSS JavaScript HTML หลังจากนั้นออกแบบ
เว็บไซต์เกม 4 in row และดาเนินการเขียนเว็บไซต์เกม 4 in row ตามที่ออกแบบไว้ ทดลองใช้และทาการ
ประเมินเว็บไซต์เกม 4 in row สุดท้ายสรุปผลและอภิปรายผลการทดลอง
จากผลการหาความพึงพอใจของผู้เล่นที่มีต่อเว็บไซต์ 4 in row พบว่า ผู้เล่นจานวน 54 คน มีความพึง
พอใจต่อเว็บไซต์ 4 in row โดยรวมอยู่ในระดับมาก เมื่อพิจารณารายข้อพบว่า ระดับที่ผู้เล่นมีความพึงพอใจ
มากที่สุด คือ กติกาอ่านแล้วทาความเข้าใจได้ง่าย ( =4.54, S.D.=0.64) รองลงมาคือ โปรแกรมอัตโนมัติมี
ความเหมาะสม ( =4.52, S.D.=0.54) และความเสถียรของเว็บไซต์ ( =4.50, S.D.=0.75) ตามลาดับ
 ข

กิตติกรรมประกาศ

โครงงาน เรื่อง เว็บไซต์เกม 4 in row ตลอดระยะเวลาการทาโครงงาน คณะผู้จัดทาโครงงานได้รับ

คาแนะนาปรึกษาข้อบกพร่อง คาสั่งสอนต่างๆตลอดจนได้รับประสบการณ์จากการทาโครงงาน จนสาเร็จลุล่วง
ไปได้ด้วยดี คณะผู้จัดทาตระหนักและซาบซึ่งในความกรุณาจากทุกๆท่านเป็นอย่างยิ่ง ณ โอกาสนี้ ขอขอบคุณ
ทุกๆท่าน
คณะผู้จัดทากราบขอบพระคุณผู้อานวยการโรงเรียนศรัทธาสมุทร นางวิไล ออกกิจวัตร ผู้เมตตา
เอื้อเฟื้อสถานที่ให้ความช่วยเหลือในทุกๆด้าน
ตลอดจนเอื้อเฟื้อห้องปฏิบัติการเเละเครื่องมือต่างๆในการทาโครงงานนี้ จนประสบความสาเร็จ
กราบขอบพระคุณ นางสาวมณฑารพ สิงโตเกษม คุณครูที่ปรึกษาโครงงานที่คอยให้คาเเนะนาการทา
โครงงานครั้งนี้ คอยตรวจทาน เเละเเก้ไขข้อบกพร่องต่างๆให้กับโครงงานของพวกเรามาโดยตลอด
กราบขอบพระคุณ ผู้ร่วมทดสอบที่ค่อยช่วยทดสอบเว็บไซต์เเละให้ความช่วยเหลือในด้านต่างๆ ทั้ง
ปัญหา ข้อเสนอแนะ เเก่พวกเราเพื่อนาไปพัฒนาต่อในอนาคต
กราบขอบพระคุณคุณพ่อ คุณเเม่ เเละครูที่โรงเรียนศรัทธาสมุทรทุกท่านที่ไม่ได้กล่าวนามจากข้างต้น
ที่คอยอยู่เบื้องหลังความสาเร็จในการทาโครงงานครั้งนี้คอยให้ความช่วยเหลือเเละให้การสนับสนุนของข้าพเจ้า
มาตลอด
 ค

สารบัญ

หน้า

บทคัดย่อ ก
กิตติกรรมประกาศ ข
สารบัญ ค

บทที่ 1 บทนา
ที่มาและความสาคัญ 1
วัตถุประสงค์ของโครงงาน 1
ของเขตของโครงงาน 1
ตัวแปรที่ศึกษา 2
นิยามเชิงปฏิบัติการ 2
บทที่ 2 เอกสารและงานวิจัยที่เกี่ยวข้อง 3-4
บทที่ 3 วิธีการดาเนินการทดลอง 5-6
บทที่ 4 ผลการทดลอง 7-8
บทที่ 5 สรุป อภิปราย และข้อเสนอแนะ 9
เอกสารอ้างอิง 10
ภาคผนวก
ภาคผนวกที่ 1 : หน้าเว็บไซต์ 11-12
ภาคผนวกที่ 2 : โปรแกรม 12-13
 1

บทที่ 1
บทนา

1.1 ที่มาและความสาคัญ

โลกในยุคปัจจุบันแทบจะเรียกได้ว่าเกมเป็นส่วนหนึ่งของชีวิตในหมู่เด็กๆรวมทั้งเยาวชนเลยทีเดียวเนื่องจากเกม
เป็นสิ่งที่หาเล่นได้ไม่ยากจึงเป็นเรื่องที่สาคัญที่เราจะต้องเลือกสรรเล่นเกมที่มีดีและให้ประโยชน์กับผู้เล่นเกม
ผู้จัดทาในโครงงานได้เห็นถึงความสาคัญในจุดนี้จึงมีความคิดที่จะพัฒนาเกมที่สร้างสรรค์และเป็นประโยชน์กับ
เยาวชนนอกจากนี้เนื่องจากมีสมาชิกในกลุ่มหลายคนมีความสนใจในการเล่นเกมที่มีลักษณะความคิดและ
ทักษะในการแก้ไขปัญหาและมีความตั้งใจพัฒนาเกมที่สร้างสรรค์ และทั้งนี้ เราจะทางานได้อย่างเสร็จสิ้น ตาม
ระยะเวลาที่มีได้อย่างเหมาะสม

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

1.2.1 เพื่อให้ผู้เล่นได้มีการพัฒนาฝีมือการเล่นเกม 4 in row

1.2.2 เพื่อให้ผู้เล่นรู้จักเกม 4 in row
1.2.3 เพื่อพัฒนาฝีมือ และทักษะทางการวางแผน

1.3 ขอบเขตของการศึกษา

สามารถเล่นได้ทุกแพลตฟอร์ม เเละสามารถเล่นกับผู้เล่นท่านอื่นเเบบออฟไลน์ มีระบบลอกอินเพื่อ

จดจาจานวนครั้งที่เล่น จานวนครั้งที่ชนะกับโปรเเกรมของเรา เเละนามาจัดลาดับเพื่อให้ก่อให้เกิดเเรงจูงใจใน
การเล่นต่อไป
 2
1.4 ตัวแปรที่ศึกษา

ตัวแปรต้น คือ เกม 4 in row

ตัวแปรตาม คือ ความพึงพอใจของผู้เล่น

1.5 นิยามศัพท์เฉพาะ

เกม หมายถึง กิจกรรมเพื่อความสนุกสนานและเกิดการพัฒนาทางด้านร่างกาย จิตใจ อารมณ์ สังคม

เว็บไซต์ (Website) หมายถึง หน้าเว็บเพจที่จัดทาขึ้น เพื่อนาเสนอข้อมูลต่างๆ ผ่านทางคอมพิวเตอร์
และอินเทอร์เน็ต โดยจะมีหน้าเว็บเพจหลายๆ หน้าที่เชื่อมโยงเข้ากับไฮเปอร์ลิงค์ เพื่อให้สามารถเปิดไปยังหน้า
เพจต่างๆ ได้อย่างง่ายดายและถูกจัดเก็บไว้ในเวิลด์ไวด์เว็บ (World Wide Web)
4 in a row เป็นเกมแนวกลยุทธ์ ที่ท้าทายความสามารถ เป้าหมายคือการเรียงตัวหมากสี่ตัวเป็น
เส้นตรง ไม่ว่าจะเป็นแนวนอน แนวตั้ง หรือแนวเฉียง ให้ได้ก่อนคู่ต่อสู้ เพื่อชัยชนะ
 3

บทที่ 2
เอกสารและงานวิจัยที่เกี่ยวข้อง

ในการศึกษาโครงงานเรื่อง เว็บไซด์เกม 4 In Row (4 In Row Website) เพื่อพัฒนาฝีมือ และทักษะ

ทางการวางแผนในการเล่น ในครั้งนี้ ผู้จัดทาโครงงานได้ศึกษาเอกสารและงานวิจัยที่เกี่ยวข้อง และได้นาเสนอ
ตามหัวข้อ ดังต่อไปนี้

2.1 องค์ประกอบของ เว็บไซด์ 4 In Row

2.2.1 เวิลด์ไวด์เว็บ (World Wide Web)

หมายถึง ระบบเชื่อมต่อเว็บไซต์ต่าง ๆ เข้าด้วยกันผ่านอินเทอร์เน็ต.
2.2.2 HTML (Hypertext Markup Language)
ภาษาคอมพิวเตอร์ภาษาหนึ่งที่เอาไว้ใช้สร้างหน้าเว็บไซต์ ซึ่งจะช่วยในเรื่องการสร้างโครงสร้างของหน้าเว็บ
(Web Page) การแสดงลิงก์ ย่อหน้า รายการ การสร้างแบบฟอร์ม ภาพและวิดีโอ โดยสามารถเรียกดูผ่านทาง
เบราว์เซอร์ต่างๆ เช่น Chrome, Firefox, หรือ MacOS ได้

2.2.3 CSS (Cascading Style Sheet)

ภาษาคอมพิวเตอร์ภาษาหนึ่ง ทาหน้าที่ตกแต่งหน้าตาของเว็บไซต์ให้มีความสวยงาม เช่น การกาหนดสีพื้น
หลัง สีฟอนต์ ขนาดพื้นที่แสดงผล ขนาดตัวอักษร และอื่นๆ
2.2.4 จาวาสคริปต์ (JavaScript)
ภาษา JavaScript หรือย่อ JS เป็นภาษาเขียนโปรแกรมที่ถูกพัฒนาและปฏิบัติตามข้อกาหนดมาตรฐานของ
ECMAScript; ภาษา JavaScript นั้นเป็นภาษาระดับสูง คอมไพล์ในขณะที่โปรแกรมรัน (JIT) และเป็นภาษา
เขียนโปรแกรมแบบหลายกระบวนทัศน์ เช่น การเขียนโปรแกรมเชิงขั้นตอน การเขียนโปรแกรมเชิงวัตถุ หรือ
การเขียนโปรแกรมแบบ Functional; ภาษา JavaScript มีไวยากรณ์ที่เหมือนกับภาษา C ใช้วงเล็บเพื่อ
กาหนดบล็อคของคาสั่ง นอกจากนี้ JavaScript ยังเป็นภาษาที่มีประเภทข้อมูลแบบไดนามิกส์ เป็นภาษาแบบ
Prototype-based และ First-class function
 4

ภาษา JavaScript นั้นถือว่าเป็นเทคโนโลยีหลักของการพัฒนาเว็บไซต์ (World Wide Web) มันทา

ให้หน้าเว็บสามารถตอบโต้กับผู้ใช้ได้โดยที่ไม่จาเป็นต้องรีเฟรชหน้าใหม่ (Dynamic website) เว็บไซต์จานวน
มากใช้ภาษา JavaScript สาหรับควบคุมการทางานที่ฝั่ง Client-side นั่นทาให้เว็บเบราว์เซอร์ต่างๆ มี
JavaScript engine ที่ใช้สาหรับประมวลผลสคริปของภาษา JavaScript ที่รันบนเว็บเบราว์เซอร์

2.2.5 โฮสติ้ง (Hosting)

เว็บโฮสติ้ง โฮสติ้ง หรือ โฮสต์ เป็นรูปแบบของการให้บริการที่ให้ผู้ใช้งานนาเว็บไซต์หรือโฮมเพจของ
ตนเองออนไลน์บนโลกอินเตอร์เน็ต เพื่อให้เว็บไซต์ปรากฏต่อสายตาคนทั้งโลกง่ายๆ เพียงแค่พิมพ์ชื่อเว็บไซต์
(Domain Name) ในเว็บบราวเซอร์ทุกเว็บไซต์ที่ออนไลน์บนอินเตอร์เน็ตจะต้องฝากไฟล์เว็บ ฐานข้อมูล และ
ไฟล์อื่นๆ ไว้กับเว็บเซิร์ฟเวอร์ของผู้ให้บริการโฮสติ้งที่ดีควรใช้เว็บเซิร์ฟเวอร์ประสิทธิ์ภาพสูงและเชื่อมต่อกับ
อินเตอร์เน็ตความเร็วสูงเพื่อให้เว็บไซต์สามารถเข้าถึงได้รวดเร็วจากทุกมุมโลก

2.2.6 ไฟล์เบส (Firebase)

ผลิตภัณฑ์ของ Google โดย Firebase คือ Platform ที่รวบรวมเครื่องมือต่าง ๆ สาหรับการจัดการใน
ส่วนของ Backend หรือ Server side ซึ่งทาให้สามารถ Build Mobile Application ได้อย่างมีประสิทธิภาพ
และยังลดเวลาและค่าใช้จ่ายของการทา Server side หรือการวิเคราะห์ข้อมูลให้อีกด้วย โดยมีทั้งเครื่องมือที่
ฟรี และเครื่องมีที่มีค่าใช้จ่าย
 5

บทที่ 3
วิธีดาเนินการทดลอง

ในการจัดทาโครงงานคอมพิวเตอร์ การพัฒนาเว็บไซด์เกม 4 In Row ด้วยจาวาสคริปต์ (JavaScript)

ผู้จัดทาโครงงานมีวิธีดาเนินงานโครงงาน ตามขั้นตอนดังต่อไปนี้

3.1 วัสดุ อุปกรณ์ เครื่องมีที่ใช้ในการพัฒนาโปรแกรม

3.1.1 วัสดุอุปกรณ์
3.1.1.1 โน้ตบุ๊ค หรือคอมพิวเตอร์ที่สามารถเชื่อมต่อกับเครื่องข่ายอินเตอร์เน็ต
3.1.1.2 เว็บไซด์ที่เปิดบริการ
3.1.1.3 เว็บไซด์ให้บริการโฮสติ้ง (Hosting) https://Firebase.google.com
3.1.1.4 ภาษาที่ใช้ในการเขียนโปรแกรม ได้แก่ ภาษาจาวาสคริปต์ (JavaScript) , HTML
(Hypertext Markup Language) , CSS (Cascading Style Sheet)

3.2 ขั้นตอนการทางาน

3.2.1 คิดหัวข้อโครงงานเพื่อนาเสนอครูที่ปรึกษาโครงงาน
3.2.2 ศึกษาและค้นคว้าข้อมูลที่เกี่ยวข้องกับเรื่องที่สนใจ คือเกม 4 in row ว่ามีเนื้อหามากน้อย
เพียงใดและต้องศึกษาข้อมูลเพิ่มเติมเพียงใดและเก็บข้อมูลไว้เพื่อจัดทาเนื้อหาต่อไป
3.2.3 ศึกษาการสร้างเว็บบล็อกจากเว็บไซต์ต่างๆ ที่นาเสนอเทคนิค และวิธีการสร้าง
3.2.4 จัดทาโครงร่างการพัฒนาเว็บไซต์เกม 4 in row เพื่อนาเสนอครูที่ปรึกษา
3.2.5 ปฏิบัติงานจัดการโครงงานการพัฒนาเว็บไซต์เกม 4 in row โดยการสร้างบทเรียนที่ สนใจตาม
แบบเสนอโครงร่างที่เสนอไว้แล้ว
3.2.6 จัดทาเอกสารรายงานโครงงานการพัฒนาเว็บไซต์เกม 4 in row
 6
3.2.7 ประเมินผลงาน โดยให้ครูที่ปรึกษาประเมินผล
3.2.8 นาเสนอผ่านเว็บบล็อก เพื่อให้ผู้สนใจเล่นเกมนี้มาเล่นเพื่อพัฒนาฝีมือและความสนุกเพลิดเพลิน
ต่อไป
 7

บทที่ 4
ผลการทดลอง

จากการดาเนินงานของเว็บไซต์เกม 4 in row ทางคณะผู้จัดทาได้ผลการดาเนินงาน ดังต่อไปนี้

ผลการทดลอง การทดสอบความพึงพอใจของผู้ทดลองเล่นเว็บไซต์เกม 4 in row

ตาราง แสดงความพึงพอใจของผู้ทดลองเล่น จานวน 54 คน

รายการประเมิน ค่าเฉลี่ย S.D. ระดับความพึงพอใจ

1.ความน่าสนใจของเว็บไซด์ 4.44 0.74 มาก

2.ความน่าสนใจของเกมเพลย์ 4.41 0.71 มาก

3.กติกาอ่านเเล้วทาความเข้าใจได้ง่าย 4.54 0.64 มากที่สุด

4.ได้รับความสนุกสนานจากการเล่นเว็บไซต์ 4 in 4.43 0.63 มาก

row
5.ความเสถียรของเว็บไซด์ 4.50 0.75 มากที่สุด

6.เว็บไซด์ 4 in row ช่วยให้เรามีทักษะในการ 4.46 0.66 มาก

วางแผน
7.โปรเเกรมอัตโนมัติทมี่ ีความเหมาะสม 4.52 0.54 มากที่สุด

เฉลี่ยรวม 4.47 0.67 มาก

 8
จากตารางที่ 2 ผลการหาความพึงพอใจของผู้เล่นที่มีต่อเว็บไซต์ 4 in row พบว่า ผู้เล่นจานวน 54
คน มีความพึงพอใจต่อเว็บไซต์ 4 in row โดยรวมอยู่ในระดับมาก เมื่อพิจารณารายข้อพบว่า ระดับที่ผู้เล่นมี
ความพึงพอใจมากที่สุด คือ กติกาอ่านแล้วทาความเข้าใจได้ง่าย ( =4.54, S.D.=0.64) รองลงมาคือ โปรแกรม
อัตโนมัติมีความเหมาะสม ( =4.52, S.D.=0.54) และความเสถียรของเว็บไซต์ ( =4.50, S.D.=0.75)
ตามลาดับ
 9

บทที่ 5
สรุป อภิปรายผล และข้อเสนอแนะ

ในการจัดทาโครงงานเรื่อง เว็บไซต์เกม 4 in row สรุปผลการทา และอภิปรายผลได้ ดังนี้

5.1 สรุปผลการดาเนินการ

1. ได้เว็บไซต์ 4 in row
2. ผลการประเมินความพึงพอใจของผู้เล่นที่มีต่อเว็บไซต์ 4 in row อยู่ในระดับมาก

5.2 อภิปรายผล

การดาเนินโครงงานนี้บรรลุวัตถุประสงค์ที่กาหนดเอาไว้ คือ เพื่อพัฒนาฝีมือผู้เล่นเกม 4 in row ,

เพื่อให้ผู้เล่นรู้จักเกม 4 in row และเพื่อพัฒนาฝีมือ และทักษะการวางแผนของผู้เล่น โดยศึกษาความพึงพอใจ
ของผู้เล่น ซึ่งเป็นที่พึงพอใจต่อผู้ใช้งาน

5.3 ข้อเสนอแนะ

1.โปรแกรมอัตโนมัติตอบสนองเร็วเกินไป ทาให้ผู้เล่นดูตามเกมไม่ทัน
2.ระดับความยากง่ายของโปรแกรมอัตโนมัติไม่เท่ากัน
3.ระบบล็อกอินไม่สามารถใช้งานได้
 10

เอกสารอ้างอิง

ณัฐพล แสนคา. วิธีการใช้งาน Visual Studio Code(ออนไลน์). สืบค้นจาก : https://cs.bru.ac.th/

สอนวิธีการใช้-visual-studio-code-2/ [30 มีนาคม 2020]
รุ่งฤดี เหิงคาแก้ว และคณะ. โครงงานการทาเว็บไซต์เกมหมากฮอส (ออนไลน์).สืบค้นจาก :
https://myteam1234.blogspot.com/2018/09/blog-post.html [15 กันยายน 2561]
GitHub(Online).Available : https://github.com/parzibyte/connect-4-javascript
 11

ภาคผนวก

ภาคผนวกที่ 1 : หน้าเว็บไซต์
 12

ภาคผนวกที่ 2 : โปรแกรม
13