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

เรื่อง ยอดซามูไรไฟเตอร์

โดย

นางสาวพลอยรัตน์ งามขำ เลขที่ 15

นางสาวมณิสรา ธรรมสวนิต เลขที่ 17

นางสาวสุทธิดา เขียวละลิ้ม เลขที่ 21

ชั้นมัธยมศึกษาปี่ที่ 6/2

ครูที่ปรึกษา
นายสุนทร เรืองภักดี
นายวิชา ถิรจิตตานนท์
นางรัชดาภรณ์ มหาจินดาโชติ

โครงงานนี้เป็นส่วนหนึ่งของรายวิชาโครงงานวิทยาศาสตร์ คณิตศาสตร์ และคอมพิวเตอร์ 2

โรงเรียนเบญจมราชูทิศ จังหวัดจันทบุร
 ก

ชื่อโครงงาน ยอดซามูไรไฟเตอร์
ชื่อผู้จัดทำ นางสาวพลอยรัตน์ งามขำ เลขที่ 15
นางสาวมณิสรา ธรรมสวนิต เลขที่ 17
นางสาวสุทธิดา เขียวละลิม้ เลขที่ 21
ครูที่ปรึกษา นายสุนทร เรืองภักดี
นายวิชา ถิรจิตตานนท์
นางรัชดาภรณ์ มหาจินดาโชติ
ปีการศึกษา 2565 - 2566
สถานศึกษา โรงเรียนเบญจมราชูทิศ จังหวัดจันทบุรี
________________________________________________________________

บทคัดย่อ
โครงงานนีม้ ีวัตถุประสงค์ เพือ่ ให้ผู้เล่นได้รู้จกั องค์ประกอบรวมของการสร้างเกม ผ่านทาง เกม ยอดซามูไร
ไฟเตอร์ เพือ่ สามารถให้ผู้เล่นได้เพลิดเพลิน และทําให้ผู้เล่นได้ฝึกการเขียนภาษา javascipt และวิธีการใช้
platformHTML

การพัฒนาเกม ยอดซามูไรไฟเตอร์ ดําเนินการวิเคราะห์และออกแบบเกมโดยมีตัวละครสองตัว ต่อสู้กัน

สามารถเล่นด้วยกันได้สองคนภายในเครื่องเดียวกัน และภาพพื้นหลังของเกมเป็นภาพที่กลุม่ ผู้ศึกษาวาด
ขึ้นมาเอง ใช้ภาษา JavaScript ที่เป็นคําสัง่ ในโปรแกรม กําหนดมาให้และนำไปรันบน platformHTML

จากการพัฒนาเกม ยอดซามูไรไฟเตอร์ พบว่า เกมนี้เหมาะสําหรับผูเ้ ล่นกลุ่มวัยรุ่นที่มีความ สนใจทางด้าน

การสร้างเกมและชอบเล่นเกม โดยผู้เล่นได้เพลิดเพลินพร้อมกับการฝึกทักษะ และทําให้ผู้เล่นได้รู้จกั การ
สร้างเกมอย่างง่าย
 ข

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

สารบัญ
หน้า
บทคัดย่อ ก
กิตติกรรมประกาศ ข
สารบัญ ค
บทที่ 1 บทนำ
1.1 ที่มาและความสำคัญ 1
1.2 วัตถุประสงค์ 1
1.3 สมมติฐานการศึกษา 2
1.4 ขอบเขตของการดำเนินงาน 2
บทที่ 2 เอกสารและงานวิจัยที่เกี่ยวข้อง 3
2.1 ความสําคัญของคอมพิวเตอร์ 3
2.2 โปรแกรมที่ใช้ในการดําเนินงาน 3
2.3 เกมคอมพิวเตอร์ 4
บทที่ 3 วิธีการดำเนินงาน 5
3.1 เครือ่ งมือ วัสดุ และอุปกรณ์ 5
3.2 ขั้นตอนในการดำเนินงาน 6
บทที่ 4 ผลการดำเนินงาน 9
4.1 ตอนที่ 1 เกมยอดซามูไรไฟเตอร์ 9
4.2 ตอนที่ 2 ศึกษาความพึงพอใจ 10
บทที่ 5 สรุปผล อภิปรายผล และข้อเสนอแนะ 11
5.1 สรุปผลการดำเนินงาน 11
5.2 อภิปรายผลการดำเนินงาน 11
5.3 ข้อเสนอแนะ 11
เอกสารอ้างอิง 12
ภาคผนวก 13
 บทที่1
บทนำ

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

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

1.เพื่อศึกษาการสร้างเกมด้วยภาษาjavascript และplatform HTML

2.เพื่อศึกษาความพึงพอใจในการเล่นเกม
1.3 สมมติฐานการศึกษา

1.ได้เกมที่สามารถวางแผนและใช้ความคิดในการต่อสู้

2.ได้ฝึกการคิดอย่างเป็นระบบ

3.ได้เกมที่สามารถบอกถึงความต้องการของแต่ละกลุ่มคน

1.4 ขอบเขตการศึกษา

ขอบเขตระยะเวลา ภาคเรียนที่ 2 ปีการศึกษา 2565 ถึง ภาคเรียนที่ 1 ปีการศึกษา 2566

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

2.1 ความสําคัญของคอมพิวเตอร์ การดําเนินชีวิตในยุคปัจจุบันจะเห็นได้ว่าคอมพิวเตอร์ได้เข้ามา

เกี่ยวข้องกับ ชีวิตประจําวันของเราในหลายรูปแบบทัง้ ทางตรงและทางอ้อมเช่น ถ้าคุณกาลังดูทีวีอยู่หรือคุณ
กำลัง รอรับใบเสร็จจากห้างร้าน คุณก็เข้าไปเกี่ยวข้องกับคอมพิวเตอร์โดยที่คุณไม่รู้ตัว หรือแม้แต่คุณกำลังรอ
สัญญาณไฟเขียวอยูตรงสี่แยก สัญญาณไฟก็ถูกควบคุมโดยคอมพิวเตอร์ เช่นกน กิจกรรม ต่างๆนี้ต้องพึ่งพา
คอมพิวเตอร์เข้ามาช่วยแทบทัง้ สิ้น ปัจจุบันพัฒนาการด้านคอมพิวเตอร์ก้าวหน้า ไปอยางรวดเร็วทําให้มีขนาด
และราคาลดลง ในขณะทีป่ ระสิทธิภาพการทํางานเพิ่มขึ้น ทําให้มี การนําคอมพิวเตอร์มาใช้ในงานต่างๆ อยาง
กว้างขวาง หรือแม้กระทั่งการนําคอมพิวเตอร์มาใช้ เพื่อการพักผอน เพื่อการบันเทิง เล่นเกม ดูหนัง ฟังเพลง
ดังนั้นการศึกษาเกี่ยวกับเรื่องคอมพิวเตอร์จึงเป็นเรื่องจําเป็นอย่างยิ่งเพราะจะทําให้เราสามารถทีจ่ ะคัดเลือก
คอมพิวเตอร์เพื่อประยุกต์ใช้กบงานได้อย่างมีประสิทธิภาพ
2.2 JavaScript เป็นภาษาโปรแกรมที่นักพัฒนาใช้ในการสร้างหน้าเว็บแบบอินเทอร์แอคทีฟ ตั้งแต่
การรีเฟรชฟีดสื่อโซเชียลไปจนถึงการแสดงภาพเคลื่อนไหวและแผนที่แบบอินเทอร์แอคทีฟ ฟังก์ชันของ
JavaScript สามารถปรับปรุงประสบการณ์ที่ผู้ใช้จะได้รับจากการใช้งานเว็บไซต์ และในฐานะทีเ่ ป็นภาษาใน
การเขียนสคริปต์ฝั่งไคลเอ็นต์ จึงเป็นหนึง่ ในเทคโนโลยีหลักของ World Wide Web ยกตัวอย่างเช่น เมือ่ คุณ
ท่องเว็บแล้วเห็นภาพสไลด์ เมนูดร็อปดาวน์แบบคลิกให้แสดงผล หรือสีองค์ประกอบที่เปลี่ยนแบบไดนามิกบน
หน้าเว็บ นั่นคือคุณเห็นเอฟเฟกต์ของ JavaScript
- HTML มีบทบาทสำคัญในการจัดโครงสร้างเว็บไซต์ โดยทำหน้าที่เป็นแกนหลักสำหรับเนื้อหาของ
หน้าเว็บ นักพัฒนาใช้องค์ประกอบ HTML ซึ่งแสดงด้วยแท็กที่ล้อมรอบเนือ้ หาเฉพาะ เพื่อกำหนดโครงสร้าง
ของเว็บไซต์ องค์ประกอบเหล่านี้อาจเป็นหัวเรื่อง ย่อหน้า รายการ รูปภาพ วิดีโอ ไฮเปอร์ลิงก์ และอื่นๆ อีก
มากมาย เมื่อเบราว์เซอร์ตีความเอกสาร HTML เบราว์เซอร์จะนำเสนอเนือ้ หาภายในแท็กในรูปแบบภาพ
แสดงเค้าโครงหน้าและรูปลักษณ์ที่ปรากฏ HTML กำหนดรากฐานสำหรับ CSS (Cascading Style Sheets)
และ JavaScript ซึ่งเพิ่มสไตล์และการโต้ตอบให้กบั เว็บไซต์ตามลำดับ
2.3 เกมคอมพิวเตอร์ส่วนบุคคลถูกผลิตขึ้นมาโดยผู้พฒ ั นาเกมหนึ่งคนหรือมากกว่า ซึ่งส่วนใหญ่มักจะ
เป็นการร่วมตัวกันของผูเ้ ชี่ยวชาญหลายด้าน (อย่างเช่น ผู้ออกแบบเกม) และออกจำหน่ายด้วยตนเอง หรือผ่าน
บุคคลทีส่ าม จากนั้น ผูผ้ ลิตเกมก็อาจจะมีการเผยแพร่เกมผ่านทางสื่อ อย่างเช่น ดีวีดี ซีดี เปิดโอกาสให้ดาวน์
โหลดทางอินเทอร์เน็ต เกมคอมพิวเตอร์ส่วนบุคคลมักจะต้องการฮาร์ดแวร์ทมี่ ีลักษณะเฉพาะในการเล่น
อย่างเช่น ระบบประมวลผลทางกราฟิก หรือการต่ออินเทอร์เน็ต เป็นต้น ถึงแม้ว่าระบบดังกล่าวอาจไม่จำเป็น
สำหรับการเล่นในบางเกมก็เป็นได้
 บทที่ 3
วิธีการดำเนินงาน
ในการจัดทำโครงงานคอมพิวเตอร์เรื่อง ยอดซามูไรไฟเตอร์ ผู้ศึกษามีวัตถุประสงค์ที่จะสร้างเกมที่
สามารถใช้งานได้ โดยมีวิธีการดังต่อไปนี้

3.1 วัสดุอุปกรณ์ที่ใช้ในการจัดทำ

3.2 ขั้นตอนการสร้างเกม

3.3 ตรวจสอบความเรียบร้อยของตัวเกม

3.1 วัสดุอุปกรณ์และเครื่องมือ
1. คอมพิวเตอร์ตั้งโต๊ะ(PC:Personal Computer)
2. โปรแกรม Sublime Text
3. JavaScript
4. HTML Canvas
5. โปรแกรมมิวสิคเมคเกอร์ 2017
6.โปรแกรม คลิป สตูดิโอ เพ้นท์

3.2. ขั้นตอนการดำเนินงาน
3.2.1 การวางโครงเรือ่ งราวของตัวเกม
ขั้นตอนแรกของการสร้างตัวเกม ผู้ศึกษาได้ทำการวางโครงร่างเรือ่ งราวพื้นฐานของโลกเกมไว้ก่อน
เพื่อให้องค์ประกอบอื่นๆ ของตัวเกมเป็นไปในทิศทางเดียวกัน
 ภาพที่ 3.1 แสดงการสร้างตัวละคร

ภาพที่ 3.2 แสดงโค้ดตัวเกม index.html

 ภาพที่ 3.3 แสดงโค้ดตัวเกม index.js

3.2.2 การออกแบบตัวละครและองค์ประกอบเสริมภายในเกม
หลังจากการกำหนดโครงร่างต่างๆ ของเกมแล้ว จะเป็นขั้นตอนการออกแบบตัวละครและ
องค์ประกอบอื่นๆ เช่น อาวุธ, อุปกรณ์ตกแต่งฉากหลัง โดยผู้ศึกษาได้ใช้โปรแกม คลิป สตูดิโอ เพ้นท์
ในการวาดรูป

ภาพที่ 3.4 แสดงพื้นหลังของตัวเกม

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

3.2.4 ตรวจสอบความเรียบร้อยของตัวเกม
เมื่อทำการสร้างเกมเสร็จสิ้น ผู้ศึกษาจำเป็นทีจ่ ะต้องทำการ ทดลองเล่นเพื่อหาข้อผิดพลาด
ในตัวเกม หากพบเจอข้อบกพร่องใดๆ จะได้ทำการแก้ไขปัญหาที่เกิดขึ้น เพื่อให้ตัวเกมไม่มีข้อบกพร่อง
และผูเ้ ล่นสามารถเล่นได้อย่างมีอรรถรส
 บทที่ 4
ผลการดำเนินงาน
ตอนที่ 1 เกมยอดซามูไรไฟเตอร์
เกมยอดซามูไรไฟเตอร์ เป็นเกมต่อสู้ที่เขียนด้วยภาษาjavascript และเเสดงผลผ่าน browser ของ
HTML สามารถเล่นได้ 2 คนภายในkeyboardเดียวกัน โดยผู้เล่นคนเเรกจะใช้ w a s d และspace bar ใน
การควบคุมการโจมตี ส่วนผูเ้ ล่นคน 2 ใช้แป้นพิมฝั่งลูกศร ในการควบคุม ถ้าหลอดเลือดสีม่วงข้างบนของฝัง่
ไหนหมดก่อนถือว่าเป็นผู้แพ้

ภาพที่ 4.1 แสดงหน้าตัวเกม

ตอนที่ 2 ศึกษาความพึงพอใจ

จากการทำโครงงานเกมยอดซามูไรไฟเตอร์ได้มกี ารรวบรวมความพึงพอใจโดยการใช้แบบสอบถามผูท้ ี่เข้าร่วม

กิจกรรมได้ข้อมูล ดังนี้

ประเด็นวัดความพึงพอใจ ระดับความพึงพอใจ
1 2 3 4 5

0 0 0 4 6
1.ความสนุกสนานเพลิดเพลิน

0 0 0 3 6
2.โครงเรื่องของเกม

0 0 0 2 5
3.ความสวยงามของภาพ
 บทที่5
สรุปผล อภิปรายผล และข้อเสนอแนะ

จากการศึกษาหารสร้างเกม ยอดซามูไรไฟเตอร์ เพื่อสร้างความสนุกเพลิดเพลินและฝึก

การใช้ภาษาjavascript และplatform HTML สามารถสรุปผล อภิปรายผล และข้อเสนอแนะได้
ดังนี้

5.1 สรุปผล

การสร้างเกมยอดซามูไรไฟเตอร์ในครั้งนีม้ ีจุดมุ่งหมายให้ผเู้ ล่นได้ รับความสนุกเพลิดเพลินและฝึกฝน

ทักษะความคิดการวางแผนในการเล่นนอกจากนี้ยงั สามารถฝึกการใช้ภาษาjavascript และplatform HTML
นำเกมไปวางจำหน่ายเพื่อสร้างรายได้และ สามารถปรับตัวเกมให้ตอบสนองตามความต้องการของผูเ้ ล่น

5.2 อภิปรายผล

การสร้างเกมยอดซามูไรไฟเตอร์ครั้งนี้ได้พฒ
ั นาเกมด้วยภาษาjavascript และ platform HTML ทำ
ให้เราสามารถสร้างเกมอย่างง่ายด้วยภาษาjavascript และภายในเกมถ้าซามูไรตัวไหนเลือดหมดก็จะเป็นผู้แพ้
ก่อน สามารถเล่นสองคนภายในเครื่องเดียวกันได้

5.3 ข้อเสนอแนะ
1. อาจจะมีการทดลองใช้ภาษาอื่ในการเขียนโค้ดของตัวเกม
2.ควรมีเนื้อเรื่องที่มากกว่านี้
 เอกสารอ้างอิง

บทบาทของHTMLในการเขียนเว็บไซต์ (ออนไลน์). แหล่งทีม่ า : https://shorturl.asia/EwYJ5

[ 25 ธันวาคม 2565].
ภาษาjavascript คืออะไร (ออนไลน์). แหล่งที่มา : https://shorturl.asia/68hfM
[ 3 เมษายน 2566].
Java Game Development TUTORIAL (ออนไลน์). แหล่งที่มา : https://shorturl.asia/p3q8B
[ 25 เมษายน 2566].
ภาคผนวก
ภาพที่ 1 การเขียนรูปเล่มโครงงานคอมพิวเตอร์เรือ่ ง ยอดซามูไรไฟเตอร์

ภาพที่ 2 การทำสไลด์นำเสนอ
ภาพที่ 3 การทดลองเล่นเกม