โปรเจกต์เกมแรกของหนู: สร้างเกม

บทเรียนอื่น ๆ

26 ม.ค. 2569

ตะลุยโลกอัลกอริทึม ตอนที่ 1: รู้จักสัญลักษณ์ Flowchart แบบ Interactive

26 ม.ค. 2569

ตะลุยโลกอัลกอริทึม ตอนที่ 2: ทางแยกแห่งการตัดสินใจ (Decision) กับเจ้าสี่เหลี่ยมขนมเปียกปูน

26 ม.ค. 2569

ตะลุยโลกอัลกอริทึม ตอนที่ 3: วงวนมหาสนุก (Loop) หยุดไม่อยู่ถ้าไม่สั่ง!

26 ม.ค. 2569

บทส่งท้าย: บททดสอบผู้กล้า พิชิตภารกิจอัลกอริทึม (Final Quiz)

28 ม.ค. 2569

สรุปครบ! 5 องค์ประกอบสำคัญของระบบคอมพิวเตอร์และการสื่อสารข้อมูล

28 ม.ค. 2569

สร้างเกราะป้องกันภัยไซเบอร์ รู้ทันกลโกงและมารยาทบนโลกออนไลน์

28 ม.ค. 2569

ทักษะคอมพิวเตอร์เบื้องต้น: สรุปการใช้งานพื้นฐานตามมาตรฐาน

28 ม.ค. 2569

การใช้งานสื่อสังคมออนไลน์: สรุปทักษะพื้นฐานตามมาตรฐาน

2 ก.พ. 2569

ตะลุยโลก Scratch EP.1: ปุ่มสตาร์ทมหัศจรรย์ (Events)

3 ก.พ. 2569

ตะลุยโลก Scratch EP.2: วงวนมหาสนุก (Loop) หยุดไม่อยู่ถ้าไม่สั่ง!

3 ก.พ. 2569

ตะลุยโลก Scratch EP.3: ทางแยกแห่งการตัดสินใจ (Condition)

3 ก.พ. 2569

ตะลุยโลก Scratch EP.4: กล่องมหัศจรรย์เก็บข้อมูล (Variables)

3 ก.พ. 2569

ตะลุยโลก Scratch EP.5: ภารกิจสร้างเกมแรก

3 ก.พ. 2569

ตะลุยโลก Scratch: แบบทดสอบวัดระดับสุดยอดโปรแกรมเมอร์ (Final Quiz EP.1-5)

4 ก.พ. 2569

นักสืบไซเบอร์ EP.2: ระวัง! กับดัก

4 ก.พ. 2569

นักสืบไซเบอร์ EP.3 (จบ): รอยเท้าที่ไม่มีวันลบ! (Digital Footprint)

แหล่งเรียนรู้รายวิชาวิทยาการคำนวณ & การออกแบบและเทคโนโลยี ผ่านกระบวนการ Constructionism, Micro-learning และ PBL 🤖 AI Disclaimer: เนื้อหาและสื่อ บางส่วนสร้างสรรค์ร่วมกับ AI (Google Gemini) โดยผ่านการตรวจสอบความถูกต้องจากครูผู้สอนแล้ว

⚙️ วิธีคิดคำนวณและตั้งชื่อตัวแปร (Process)

📌 สถานการณ์ที่กำลังออกแบบ: ภารกิจแม่ค้าผลไม้วัยจิ๋ว (คำนวณราคาสินค้า)

เทคนิคการสร้างสมการ:
"เราจะนำ 'ข้อมูลนำเข้า' ไปทำอะไรกับ 'ค่าคงที่' (บวก ลบ คูณ หาร) เพื่อให้โปรแกรมคิด 'ผลลัพธ์' ออกมา?"

⚠️ กฎเหล็กสำคัญ:
1. ให้ตั้งชื่อตัวแปร (กล่องความจำ) เป็น ภาษาอังกฤษ และ ห้ามเปลี่ยนชื่อในขั้นตอนต่อไปเด็ดขาด!
2. ตัวเลขที่โจทย์บอกมาแล้ว (เช่น แอปเปิลราคา 35 บาท) ไม่ต้องตั้งชื่อตัวแปร ให้พิมพ์เป็นตัวเลขลงไปในสมการได้เลย!

โครงสร้างสำหรับนำไปใช้งาน:

การประมวลผล คือ : [ตัวแปรผลลัพธ์] = [ตัวแปรนำเข้า] เครื่องหมายคณิตศาสตร์ [ค่าคงที่]
ตัวแปรที่ใช้ คือ : [ชื่อตัวแปรภาษาอังกฤษที่ตั้งไว้ทั้งหมด]

💡 ตัวอย่างที่ถูกต้อง:

การประมวลผล คือ : total = weight * 35
ตัวแปรที่ใช้ คือ : weight (จำนวนกิโลกรัม), total (ยอดเงินรวม)

เมื่อรู้สมการและชื่อตัวแปรแล้ว กดปุ่มคัดลอก แล้วปิดหน้าต่างไปวางข้อความได้เลย!

🟣 เลือกรูปแบบผังงาน (Flowchart Structure)

📌 สถานการณ์ที่กำลังออกแบบ: ภารกิจแม่ค้าผลไม้วัยจิ๋ว (คำนวณราคาสินค้า)

เทคนิคการเช็คตรรกะโปรแกรม:
ลองถามตัวเองดูว่า ภารกิจแม่ค้าผลไม้ของเรามีการทำงานแบบไหน?
1. มีเงื่อนไขทางแยกไหม? (เช่น ถ้าซื้อเกิน 10 โล แล้วลดราคา)
2. มีการทำซ้ำไหม? (เช่น วนลูปคิดเงินลูกค้า 5 คน)
👉 ถ้าไม่มีทั้ง 2 อย่าง (แค่ รับค่า -> คำนวณ -> แสดงผล) = เป็น แบบเรียงลำดับ (Sequence) แน่นอน!

⚠️ ข้อควรระวัง: เมื่อนักเรียนเลือก แบบเรียงลำดับ (Sequence) แล้ว ตอนที่นำไปวาดผังงาน (Flowchart) ลูกศรจะต้องชี้ตรงลงมาเป็นทางเดียว ห้ามมีเส้นทางแยก หรือโยงเส้นกลับไปด้านบนเด็ดขาด!

โครงสร้างสำหรับนำไปใช้งาน:

รูปแบบผังงานที่ใช้ คือ : [เลือกเติม: แบบเรียงลำดับ / แบบมีทางเลือก / แบบทำซ้ำ]

💡 ตัวอย่างที่ถูกต้อง:

รูปแบบผังงานที่ใช้ คือ : แบบเรียงลำดับ (Sequence)

เมื่อวิเคราะห์รูปแบบผังงานได้แล้ว กดปุ่มคัดลอก ไปวางและพิมพ์ตอบได้เลย!

📝 เรียงลำดับขั้นตอนด้วยภาษาธรรมชาติ

📌 สถานการณ์ที่กำลังออกแบบ: ภารกิจแม่ค้าผลไม้วัยจิ๋ว (คำนวณราคาสินค้า)

⚠️ กฎเหล็กของการเขียนภาษาธรรมชาติ:
การเขียนอัลกอริทึมคือการเอาข้อมูลจากข้อที่แล้ว (Input, Process, Output) มาแต่งเป็นประโยคเรียงข้อ 1, 2, 3...
ข้อควรระวัง: ต้องใช้ "ชื่อตัวแปรภาษาอังกฤษ" ให้สะกดตรงกันเป๊ะกับที่ตั้งไว้ในขั้นตอนก่อนหน้า ห้ามเปลี่ยนชื่อเด็ดขาด!

👉 โครงสร้างสำหรับนำไปใช้งาน:

เริ่มต้นการทำงาน
แสดงข้อความบนหน้าจอว่า "กรุณาป้อนจำนวน..."
รับค่าข้อมูลนำเข้า มาเก็บไว้ในตัวแปรชื่อ [ชื่อตัวแปร]
คำนวณหาผลลัพธ์ โดยนำตัวแปร [ชื่อตัวแปร] คูณกับตัวเลข [ค่าคงที่] แล้วนำผลลัพธ์ไปเก็บไว้ในตัวแปรชื่อ [ชื่อตัวแปรผลลัพธ์]
แสดงข้อความบนหน้าจอว่า "ราคาสุทธิ..."
แสดงผลลัพธ์ที่อยู่ข้างในตัวแปรชื่อ [ชื่อตัวแปรผลลัพธ์] ออกทางหน้าจอ
สิ้นสุดการทำงาน

💡 ดูตัวอย่าง (ถ้าเปลี่ยนไปคำนวณราคาส้ม กิโลกรัมละ 40 บาท):

1. เริ่มต้นการทำงาน
2. แสดงข้อความบนหน้าจอว่า "กรุณาป้อนจำนวนกิโลกรัมของส้ม:"
3. รับค่าข้อมูลนำเข้า มาเก็บไว้ในตัวแปรชื่อ weight
4. คำนวณหาผลลัพธ์ โดยนำตัวแปร weight คูณกับตัวเลข 40 แล้วนำผลลัพธ์ไปเก็บไว้ในตัวแปรชื่อ total
5. แสดงข้อความบนหน้าจอว่า "ราคาสุทธิที่ต้องจ่ายคือ (บาท):"
6. แสดงผลลัพธ์ที่อยู่ข้างในตัวแปรชื่อ total ออกทางหน้าจอ
7. สิ้นสุดการทำงาน

💻 แปลงภาษาคนเป็นรหัสจำลอง (Pseudocode)

📌 สถานการณ์ที่กำลังออกแบบ: ภารกิจแม่ค้าผลไม้วัยจิ๋ว (คำนวณราคาสินค้า)

⚠️ กฎเหล็กของการเขียนรหัสจำลอง:
มันคือการเอา "ภาษาธรรมชาติ" จากข้อที่แล้ว มาแปลเป็นภาษาคอมพิวเตอร์ บรรทัดต่อบรรทัด โดยรักษาชื่อตัวแปรให้เหมือนเดิมเป๊ะ!

พจนานุกรมคำศัพท์คอมพิวเตอร์:

1. เริ่มต้น / สิ้นสุด ➔ START / END
2. แสดงข้อความ ➔ PRINT "..."
3. รับค่าตัวแปร ➔ INPUT (ตามด้วยชื่อตัวแปร)
4. คำนวณ/กำหนดค่า ➔ SET (ตามด้วยสมการ)

👉 โครงสร้างสำหรับนำไปใช้งาน:

      START

          PRINT "กรุณาป้อนจำนวนกิโลกรัมของแอปเปิล:"

          INPUT [ตัวแปรนำเข้า]

          SET [ตัวแปรผลลัพธ์] = [ตัวแปรนำเข้า] * [ค่าคงที่]

          PRINT "ราคาสุทธิที่ต้องจ่ายคือ (บาท):"

          PRINT [ตัวแปรผลลัพธ์]

      END

💡 ดูตัวอย่าง (ถ้าเปลี่ยนไปคำนวณราคาส้ม กิโลกรัมละ 40 บาท):

    START

        PRINT "กรุณาป้อนจำนวนกิโลกรัมของส้ม:"

        INPUT weight

        SET total = weight * 40

        PRINT "ราคาสุทธิที่ต้องจ่ายคือ (บาท):"

        PRINT total

    END

🎀 สูตรจำง่าย! แปลงรหัสจำลองเป็นผังงาน (Flowchart)

เทคนิคการคิด (ลอกของเดิม มาเติมกรอบ!):
กฎเหล็ก: ให้นำ "รหัสจำลอง (Pseudocode)" ที่น้องๆ เขียนไว้ในข้อที่แล้ว มาวาดใส่กรอบสัญลักษณ์ทีละบรรทัด ห้ามคิดคำขึ้นมาใหม่เด็ดขาด!

📘 พจนานุกรมสัญลักษณ์ผังงาน (ที่ถูกต้องตามหลักวิชาการ):

1. สัญลักษณ์ แคปซูล (Terminator) 💊

START / END

👉 นำมาครอบคำว่า: START และ END
💡 เหตุผล: รูปทรงนี้ใช้เป็นประตู เพื่อเป็นจุดสังเกตให้รู้ว่าโปรแกรมมี "จุดเริ่มต้น" และ "จุดสิ้นสุด" ที่ตรงไหน

2. สัญลักษณ์ สี่เหลี่ยมด้านขนาน (Data) ▱

INPUT / PRINT

👉 นำมาครอบคำว่า: INPUT (รับค่า) และ PRINT (แสดงข้อความ/ผลลัพธ์)
💡 เหตุผล: สัญลักษณ์ที่มีความเอียงนี้ ใช้แทน "ข้อมูล" ที่กำลังไหลเข้าสู่ระบบ (ตอนผู้ใช้พิมพ์) หรือกำลังไหลออกจากระบบ (ตอนโชว์บนหน้าจอ) ครับ

3. สัญลักษณ์ สี่เหลี่ยมผืนผ้า (Process) ▭

SET

👉 นำมาครอบคำว่า: SET (การคำนวณ/กำหนดค่า)
💡 เหตุผล: รูปทรงกล่องทึบๆ นี้ ใช้แทน "การประมวลผล" หรือการคำนวณทางคณิตศาสตร์ที่คอมพิวเตอร์แอบคิดอยู่หลังบ้าน (ผู้ใช้มองไม่เห็น) ครับ

⚠️ ทริคเล็กๆ ก่อนอัปโหลด: วาดในเว็บเสร็จแล้ว อย่าลืมเซฟเป็นรูปภาพนะ!
โดยไปที่เมนู File > Export as > PNG... (หรือ JPEG) แล้วกด Download ลงเครื่องได้เลยครับ

จำคู่สัญลักษณ์ให้แม่นๆ แล้วกดกากบาท ปิดหน้าต่างนี้ แล้วคลิกลิงก์สีฟ้าไปวาดรูปได้เลย!

🐱 ตัวช่วยฉบับพกพา: ปลุกชีพโค้ด Scratch

📌 สถานการณ์ที่กำลังออกแบบ: ภารกิจแม่ค้าผลไม้วัยจิ๋ว (คำนวณราคาสินค้า)

กฎเหล็ก: ห้ามเดาบล็อกคำสั่งเด็ดขาด! ให้น้องๆ เปิด "ผังงาน (Flowchart)" ที่ออกแบบไว้ในข้อที่แล้วขึ้นมาดู แล้วต่อบล็อก Scratch ให้ตรงตามกรอบสัญลักษณ์เป๊ะๆ นะครับ

🧩 1. พจนานุกรมแปลงผังงานเป็น Scratch (คลิกเพื่อดู)

จุดเริ่มต้น (START) 💊 แคปซูล	➔	บล็อกหมวด Events (สีเหลือง) เมื่อคลิก ⛳
รับข้อมูล (INPUT) ▱ สี่เหลี่ยมด้านขนาน	➔	บล็อกหมวด Sensing (สีฟ้า) ถาม [คำถาม] แล้วรอ
คำนวณ (SET) ▭ สี่เหลี่ยมผืนผ้า	➔	บล็อกหมวด Variables (สีส้ม) ตั้งค่า [ตัวแปร] เป็น...
แสดงผล (PRINT) ▱ สี่เหลี่ยมด้านขนาน	➔	บล็อกหมวด Looks (สีม่วง) พูด [คำตอบ]

💡 ทริค: สังเกต "สี" ของบล็อก Scratch ให้ดี! สีในตารางตรงกับสีในโปรแกรมเป๊ะเลย!

🛠️ 2. คลินิกแก้บั๊ก (ถ้าโปรแกรมคิดเลขผิด เช็คตรงนี้!)

เช็กลิสต์ก่อนนำโค้ดมาส่ง:

⬜ ตั้งชื่อตัวแปร (Variable) ใน Scratch เหมือนกับที่เขียนไว้ในผังงานเป๊ะๆ ไหม?
⬜ ลำดับบล็อก เรียงจากบนลงล่าง ตามลูกศรในผังงานหรือเปล่า?
⬜ ตรงบล็อก "ตั้งค่า [ตัวแปร] เป็น..." ได้เอาบล็อกสีเขียว (หมวด Operators) มาใส่เป็นสมการคำนวณถูกต้องไหม?
⬜ ตรงสมการคำนวณ ได้เอาบล็อกสีฟ้า "คำตอบ (answer)" มาใช้แทนค่า "ข้อมูลนำเข้า (Input)" หรือยัง?

📥 3. ขั้นตอนการเอาโค้ดมาแปะส่งงาน

1. ไปสร้างโปรเจกต์และต่อบล็อกให้เสร็จที่เว็บ Scratch 🚀 คลิกไปที่ Scratch

2. 🚨 สำคัญมาก! ต้องกดปุ่ม Share (แชร์) สีส้มด้านบนตรงกลางจอก่อนเสมอ ไม่งั้นครูจะมองไม่เห็นโค้ด!

3. กดปุ่ม Copy Link (คัดลอกลิงก์) ที่อยู่ด้านล่างขวาของจอโปรเจกต์
4. คลิกคำว่า Copy Embed (คัดลอกโค้ดสำหรับฝัง)
5. นำโค้ดที่ก๊อปปี้มา Paste (วาง) ลงในกล่องข้อความข้างล่างนี้เลย!

📌 จุดสังเกตความถูกต้อง: โค้ดของน้องๆ จะต้องขึ้นต้นด้วยคำว่า

</code> เสมอ!
      </div>
    </div>
  </details>

</div>            </div>

        </div>
    </div>
</div>



<script>
function show_btn_level()
{
    var level_id=$("#level_id").val();
    if(level_id!="")
    {
        var btn='<button type="button" class="btn btn-info btn-rds mt-4" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="show_level_detail('+level_id+')">ดูคำอธิบาย</button>';
        $("#show_btn").html(btn);
    }else{
        $("#show_btn").html('');
    }
}
function show_level_detail(level_id)
{
    $.ajax({
        type: "POST",
        url: "model/fn-show_level_detail.php",
        data: {level_id:level_id},
        success: function (response) {
            var res=JSON.parse(response);
            $("#show_level_detail").html(res.detail);
            $("#show_level_name").html("ระดับความรู้ : "+res.name);
        }
    });
}
</script>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
         <div class="row">
            <div class="col-12">
                <h4 id="show_level_name"></h4>
                <div id="show_level_detail"></div>
            </div>
         </div>
      </div> 
    </div>
  </div>
</div>

</body>

</html>