ผู้เขียนบทความ : นางสาวรัศมิ์ลภัส อินทรีย์ 167404130040
คณะวิศวกรรมศาสตร์ สาขาวิศวกรรมไฟฟ้า
วิชา : 04-000-104 การโปรเเกรมคอมพิวเตอร์ การศึกษาภาคที่ 1/2567
1.ความเป็นมา
เกมนักสะสมส้ม (Orange Collector Master) เป็นเกมที่สร้างขึ้นเพื่อความบันเทิง และช่วยพัฒนาทักษะของผู้สร้างเกมเนื่องจากเป็นเกมที่สร้างขึ้นง่ายๆ ไม่ยุ่งยากและซับซ้อน โดยการสร้างขึ้นโดยใช้ภาษาโปรแกรมบนเว็บไซต์อย่าง HTML, CSS, และ JavaScript เหมาะสำหรับผู้ที่คิดริเริ่มเรียนรู้เกี่ยวกับการเขียนเกมโดยใช้ภาษาโปรแกรมในการเริ่มต้น ช่วยให้ผู้สร้างได้มีความเข้าใจ พัฒนาความรู้และความสามารถในการนำไปต่อยอดสู่การสร้างเกมหรือโปรแกรมที่ยุ่งยากและซับซ้อนขึ้น
2.วัตถุประสงค์
2.1 เพื่อพัฒนาทักษะของผู้เรียนในการฝึกสร้างเกมโดยใช้ภาษาโปรแกรม HTML, CSS และ JavaScript
2.2 เพื่อเรียนรู้ทักษะการออกแบบเกมเบื้องต้น
2.3 เพื่อสร้างเกมที่มีความบันเทิง ใช้เล่นผ่อนคลายและความท้าทายให้กับผู้เล่นที่ต้องเก็บสะสมส้มให้ได้ Score เยอะที่สุดภายในเวลาที่กำหนดไว้
3.ขอบเขตการทำงาน
3.1 ใช้ภาษาโปรแกรม HTML, CSS, และ JavaScript ในการสร้างขึ้น
3.2 Score จะเริ่มนับจนกว่าจะหมดเวลาที่ผู้สร้างกำหนดไว้
3.3 Score จะเพิ่มขึ้นทีละ 2 คะแนน
3.4 กำหนดจำนวนส้ม และเวลาที่ส้มจะปรากฎขึ้นใหม่
4.ประโยชน์ที่คาดว่าจะได้รับ
4.1 พัฒนาทักษะของผู้เรียนในการฝึกสร้างเกมโดยใช้ภาษาโปรแกรม HTML, CSS และ JavaScript
4.2 ได้เรียนรู้ทักษะการออกแบบเกมเบื้องต้น
4.3 ได้สร้างเกมที่มีความบันเทิง ใช้เล่นผ่อนคลายและความท้าทายให้กับผู้เล่นที่ต้องเก็บสะสมส้มให้ได้ Score เยอะที่สุดภายในเวลาที่กำหนดไว้
4.4 ผู้ที่มีความสนใจเกี่ยวกับการสร้างเกมโดยใช้ภาษาโปรแกรม HTML, CSS และ JavaScript สามารถเรียนรู้ ทำความเข้าใจได้ง่ายและสามารถนำไปพัฒนาต่อยอดได้
5.ความรู้ที่เกี่ยวข้อง
5.1 HTML (Hypertext Markup Language) คือภาษามาร์กอัปที่ใช้ในการสร้างและจัดโครงสร้างของเนื้อหาในเว็บไซต์ เป็นภาษาพื้นฐานสำหรับการสร้างหน้าเว็บเพจ และทำหน้าที่กำหนดโครงสร้างให้กับเอกสาร เช่น การแบ่งส่วนหัวข้อ การจัดย่อหน้า การสร้างลิงก์ ตาราง รูปภาพ และอื่น ๆ
5.2 CSS (Cascading Style Sheets) คือภาษาที่ใช้สำหรับการกำหนดรูปแบบและจัดการการแสดงผลของเอกสาร HTML หรือ XML ช่วยในการออกแบบรูปลักษณ์ของเว็บเพจ เช่น การตั้งค่าขนาดตัวอักษร สีพื้นหลัง การจัดวางองค์ประกอบ และการออกแบบเค้าโครง (layout) โดยแยกการจัดการด้านรูปแบบออกจากโครงสร้างของเนื้อหา ช่วยให้การสร้างและจัดการเว็บไซต์มีความยืดหยุ่นและสะดวกมากขึ้น เพราะสามารถกำหนดสไตล์ต่าง ๆ จากที่เดียวและนำไปใช้กับหลาย ๆ องค์ประกอบในหน้าเว็บได้ ทำให้การปรับปรุงรูปแบบของเว็บเพจสามารถทำได้ง่ายและรวดเร็ว
5.3 JavaScript คือภาษาการเขียนโปรแกรม (Programming Language) ที่ใช้สำหรับเพิ่มความสามารถให้กับหน้าเว็บ ทำให้เว็บเพจมีความโต้ตอบและมีความไดนามิกมากขึ้น โดยสามารถใช้ในการจัดการองค์ประกอบต่าง ๆ บนหน้าเว็บเพจ เช่น การตอบสนองต่อการคลิกของผู้ใช้ การสร้างอนิเมชัน การตรวจสอบฟอร์ม รวมถึงการเรียกใช้ข้อมูลจากเซิร์ฟเวอร์แบบไม่ต้องโหลดหน้าใหม่ (AJAX) ทำงานบนเว็บเบราว์เซอร์โดยตรง ซึ่งทำให้สามารถปรับแต่งและเปลี่ยนแปลงเนื้อหาในเว็บเพจได้ทันทีเมื่อผู้ใช้มีปฏิสัมพันธ์ โดยไม่ต้องรีเฟรชหน้าใหม่ ทั้งนี้ JavaScript ยังสามารถทำงานร่วมกับ HTML และ CSS ได้เป็นอย่างดี ทำให้สามารถจัดการโครงสร้าง (HTML) และรูปแบบ (CSS) ของเว็บเพจได้อย่างมีประสิทธิภาพ
6.ผลการดำเนินงาน
เกมสามารถใช้งานบนเว็บเบราว์เซอร์ได้อย่างเสถียร หลังจากพัฒนาเกมนักสะสมส้ม (Orange Collector Master) พบว่าเกมมีความบันเทิงสนุกสนานและเล่นได้ง่าย ผู้เล่นสามารถเข้าใจวิธีการเล่นได้อย่างรวดเร็ว และมีความท้าทายในการทำ Score ภายในระยะเวลาที่กำหนด
7.ผลการทดลอง
7.1 หน้าเริ่มเกม
7.2 หน้าของการทำงานหลังจากกดเริ่มเกม (Play) Score จะเริ่มเพิ่มขึ้นตามจำนวนที่ผู้เล่นทำได้ และเวลาจะลดลงเรื่อยๆ
7.3 หน้าจบเกม เมื่อหมดเวลาที่กำหนดไว้ หน้าจอจะแสดงผล Score สุดท้ายที่ผู้เล่นทำได้
8.สรุปผลการทดลอง
จากการทดลองสร้างเกมด้วยภาษาโปรแกรม HTML,CSS,Javascript สรุปผลการทดลองได้ว่าประสบความสำเร็จตามวัตถุประสงค์ เกมสามารถเล่นได้จริง การใช้ HTML, CSS, และ JavaScript ในการพัฒนาเกมนักสะสมส้ม (Orange Collector Master) สามารถสร้างเกมที่ง่ายแต่สนุกสนานและบันเทิงได้ ช่วยฝึกทักษะความท้าทายของผู้เล่น ช่วยพัฒนาทักษะ ความรู้ความเข้าใจเกี่ยวกับการสร้างเกมด้วยภาษาโปรแกรม HTML,CSS,Javascript ของผู้สร้างได้จริง
9.เอกสารอ้างอิง
9.1 HTML คือ จาก https://chatgpt.com/
9.2 CSS คือ จาก https://chatgpt.com/
9.3 Javascript คือ จาก https://chatgpt.com/
9.4 เว็บที่ใช้สร้าง https://code.visualstudio.com/
10.คลิปวิดีโออธิบายการทำงานของเกมและ Code เกม
