Prompt พรอมต์สร้างสื่อการเรียนการสอน

พรอมต์ (Prompt) สร้างเกมโค้ดดิ้งฉบับ Super Mario Code Adventure

แท็ก: พรอมต์Prompt สร้างเกมโค้ดดิ้งฉบับ Super Mario Code Adventure

เผยแพร่เมื่อ: วันอังคาร ที่ 6 เดือน ตุลาคม พ.ศ.2569 เข้าชม: 46 ครั้ง

ขอขอบคุณและติดตามเพจได้ที่ ครูพุทธา สร้างสื่อแบบง่ายๆ

พรอมต์ (Prompt) สร้างเกมโค้ดดิ้งฉบับ Super Mario Code Adventure

แจก Prompt : คุณคือ Senior Web Developer และ EdTech Design Specialist

ช่วยสร้างเว็บเกมการศึกษาแนวคิดเชิงคำนวณ (Computational Thinking / Unplugged Coding) ในไฟล์ HTML เดี่ยว (Single HTML file) สำหรับเด็ก โดยอ้างอิงจากภาพตาราง Super Mario

[คุณสมบัติและข้อกำหนดของเกม]

1. โครงสร้างและเทคโนโลยี:

- ใช้ Single File HTML (รวม HTML, CSS, JavaScript อยู่ในไฟล์เดียวกัน)

- ใช้ Tailwind CSS ผ่าน CDN สำหรับทำ Styling ให้สวยงาม น่ารัก เหมาะกับเด็ก

- ใช้ Tone.js สำหรับเสียงเอฟเฟกต์ (เดิน, เก็บเห็ด, ตัวคูณ, ชนะภารกิจ)

- ใช้ canvas-confetti สำหรับแสดงเอฟเฟกต์พลุกระดาษเมื่อชนะ

- ใช้ FontAwesome สำหรับไอคอนควบคุม

2. หน้าตาและกราฟิก (Design & UI/UX):

- วาดกราฟิกตัวละคร (มาริโอ้, เห็ด, ป้าย START, ป้าย FINISH, โลโก้ SUPER MARIO x10) ด้วย SVG Vector Graphics เพื่อความคมชัดสูงและโหลดเร็ว

- มี Banner แนะนำวิธีเล่นด้านบนชัดเจน

- รองรับ Responsive Design สมบูรณ์แบบ (แสดงผลสวยงามบนสมาร์ทโฟน แท็บเล็ต และคอมพิวเตอร์)

3. ระบบการเล่นและกติกา (Game Mechanics):

- ตารางกริด (Grid Board): รองรับขนาด 5x6 (ตามรูปภาพต้นฉบับ) และสามารถเปลี่ยนด่านได้

- ตำแหน่งเริ่มต้น: คุณลุงมาริโอ้อยู่ที่จุดเริ่มต้น (START)

- ปลายนทาง: ป้าย FINISH

- สิ่งของในกริด:

* เห็ด (Mushroom): เก็บเพื่อสะสมคะแนน

* โลโก้ SUPER MARIO: เมื่อเดินผ่านจะได้รับตัวคูณคะแนน x10 เท่า

- พาเลทสั่งงาน (Write the Code):

* ป้ายปุ่มกดทิศทาง 4 ทิศ (

ขึ้น,

ลง,

ซ้าย,

ขวา)

* ช่องวางชุดคำสั่ง (Command Slots) จำนวนสูงสุด 16 ช่อง

* สามารถคลิกปุ่มเพื่อเพิ่มคำสั่ง และคลิกบล็อกในช่องเพื่อลบออกได้

- ปุ่มควบคุมการรัน:

* ปุ่ม "เล่นเลย (RUN)": แสดงการเคลื่อนที่ของมาริโอ้ทีละก้าวแบบเรียลไทม์ พร้อมไฮไลต์ช่องคำสั่งที่กำลังทำงาน

* ปุ่ม "เริ่มใหม่ (Reset)": รีเซ็ตตำแหน่งมาริโอ้และไอเทมกลับจุดเริ่มต้น

* ปุ่ม "ล้างคำสั่ง (Clear All)": ล้างบล็อกคำสั่งทั้งหมด

4. ระบบประเมินและรายงานความก้าวหน้า (Learning Analytics & Progress Report):

- เมื่อถึงจุด FINISH ให้แสดง Pop-up สรุปผลภารกิจ (คะแนนรวม, เห็ดที่เก็บได้, ตัวคูณ, จำนวนก้าว, ดาว 1-3 ดวง)

- มีปุ่ม "รายงานความก้าวหน้า" เพื่อดูสรุปทักษะ Computational Thinking 3 ด้าน:

1. การจัดลำดับ (Sequencing)

2. ประสิทธิภาพ (Optimization)

3. การแก้ปัญหา (Problem Solving)

- มีตารางประวัติการเล่นแต่ละด่าน Badge ระดับทักษะ (เช่น Master Mario Coder) และปุ่มสั่งพิมพ์รายงาน (Print Report)

แท็ก: พรอมต์Prompt สร้างเกมโค้ดดิ้งฉบับ Super Mario Code Adventure