แก้ไขบทเรียน

Back

รูปสินค้า (850 x 600 / .jpg , .png) *

ประเภทบทเรียน

ประเภทบทเรียนย่อย

Title

Description

Keyword

Detail

.tip-box { background: #FFF7ED; border-left: 5px solid #F97316; padding: 15px; border-radius: 8px; margin-top: 20px; margin-bottom: 20px; font-size: 16px; color: #9A3412; }

/* Quiz Style */
  .quiz-section { border-top: 2px dashed #CCC; padding-top: 30px; margin-top: 30px; }
  .quiz-header { font-family: 'Kanit'; font-size: 24px; color: #F97316; margin-bottom: 20px; text-align: center; font-weight: bold; }
  .q-block { margin-bottom: 25px; background: #F8FAFC; padding: 20px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); border: 1px solid #E2E8F0; }
  .q-question { font-weight: bold; font-size: 18px; color: #1E293B; margin-bottom: 15px; }
  .q-btn { width: 100%; padding: 12px; margin-top: 8px; background: white; border: 1px solid #CBD5E1; border-radius: 8px; text-align: left; cursor: pointer; transition: 0.2s; font-size: 16px; font-family: 'Sarabun'; }
  .q-btn:hover { background: #FFF7ED; border-color: #F97316; }
  .feedback { margin-top: 15px; padding: 12px; border-radius: 8px; display: none; font-weight: bold; font-size: 16px; }
  .correct { background: #DCFCE7; color: #166534; border: 1px solid #166534; }
  .wrong { background: #FEE2E2; color: #991B1B; border: 1px solid #991B1B; }
  
  @media (max-width: 600px) {
    .feature-grid { grid-template-columns: 1fr; }
  }
</style>

<div class="ep-container">
  <div class="ep-head">
    <div class="ep-icon"><i class="fas fa-chess-knight"></i></div>
    <div>
      <h1 style="margin:0; font-family:'Kanit'; font-size: 28px;">EP.3: ทักษะและแนวคิดการออกแบบเกม</h1>
      <p style="margin:5px 0 0; opacity:0.9; font-size: 18px;">มากกว่าแค่การเขียนโค้ด แต่คือการสร้างความสนุก (Game Design)</p>
    </div>
  </div>

<div class="content">
    <p>เมื่อเราเข้าใจเครื่องมืออย่าง Scratch แล้ว ขั้นตอนต่อไปคือการผสมผสาน <b>"ศิลปะ"</b> เข้ากับ <b>"ตรรกะ"</b> ในหลักสูตร Scratch  เราจะก้าวข้ามขีดจำกัดของการเป็นแค่คนเขียนโค้ด สู่การเป็น <b>Game Developer</b> อย่างเต็มตัว</p>

<div class="tip-box">
      <b><i class="fas fa-level-up-alt"></i> การเรียนรู้แบบไต่ระดับ (Progressive Learning)</b><br>
      เกมทั้ง 3 เกมที่คุณจะได้สร้างในคอร์สนี้ จะถูกออกแบบมาให้มีความซับซ้อนเพิ่มขึ้นทีละนิด (Build upon the last) เพื่อค่อยๆ แนะนำคอนเซปต์ใหม่ๆ โดยที่คุณจะไม่รู้สึกว่ามันยากจนเกินไป
    </div>

<div class="tech-card">
      <h3><i class="fas fa-brain"></i> หัวใจสำคัญของ Game Design</h3>
      <p>การเขียนโค้ดให้เกมทำงานได้เป็นเรื่องหนึ่ง แต่การทำให้เกม <b>"สนุกและน่าโต้ตอบ (Fun & Interactive)"</b> คือสิ่งที่เราจะโฟกัส:</p>
      
      <div class="feature-grid">
        <div class="feature-box">
          <i class="fas fa-cogs"></i>
          <h4>1. กลไกของเกม (Mechanics)</h4>
          <p>เรียนรู้วิธีสร้างกฎกติกา การเคลื่อนไหว และการโต้ตอบของตัวละครกับฉาก เช่น การกระโดด หรือแรงโน้มถ่วง</p>
        </div>
        
        <div class="feature-box">
          <i class="fas fa-layer-group"></i>
          <h4>2. การจัดการเลเยอร์ (Sorting Layers)</h4>
          <p>จัดลำดับภาพและองค์ประกอบต่างๆ ในเกมให้มีมิติ เพื่อสร้างภาพกราฟิกและฉากหลัง (Background) ที่สวยงามสมจริง</p>
        </div>

<div class="feature-box">
          <i class="fas fa-vial"></i>
          <h4>3. การทดลอง (Experimentation)</h4>
          <p>มีอิสระในการปรับแต่ง ทดสอบ และลองผิดลองถูก (Problem Solve) เพื่อหาสมดุลความยาก-ง่ายที่พอดีสำหรับผู้เล่น</p>
        </div>

<div class="feature-box">
          <i class="fas fa-star"></i>
          <h4>4. ปลดปล่อยความสร้างสรรค์</h4>
          <p>เป้าหมายปลายทางคือการทำให้คุณกลายเป็นนักพัฒนาเกมที่ <b>มีความมั่นใจ (Confident)</b> และกล้าที่จะใส่ไอเดียของตัวเองลงไป</p>
        </div>
      </div>
    </div>

<div class="quiz-section">
      <div class="quiz-header">🎯 แบบทดสอบ Mini Quiz EP.3</div>

<div class="q-block">
        <div class="q-question">1. จุดประสงค์หลักของการเรียน Game Design ในหลักสูตรนี้คืออะไร?</div>
        <button class="q-btn" onclick="checkScratchQuiz3(this, 's3_q1', false)">ก. เพื่อให้เขียนโค้ดได้เร็วที่สุด</button>
        <button class="q-btn" onclick="checkScratchQuiz3(this, 's3_q1', true)">ข. เพื่อเรียนรู้วิธีทำให้เกมมีความสนุกและโต้ตอบได้ (Fun & Interactive)</button>
        <button class="q-btn" onclick="checkScratchQuiz3(this, 's3_q1', false)">ค. เพื่อนำเกมไปขายในตลาด</button>
        <button class="q-btn" onclick="checkScratchQuiz3(this, 's3_q1', false)">ง. เพื่อสร้างกราฟิกสามมิติ (3D)</button>
        <div id="fb-s3_q1" class="feedback"></div>
      </div>

<div class="q-block">
        <div class="q-question">2. "Progressive Learning" หรือการเรียนรู้แบบไต่ระดับ ในบริบทของคอร์สนี้หมายถึงอะไร?</div>
        <button class="q-btn" onclick="checkScratchQuiz3(this, 's3_q2', true)">ก. แต่ละเกมจะถูกสร้างต่อยอดจากความรู้เดิม และเพิ่มคอนเซปต์ที่ซับซ้อนขึ้นเรื่อยๆ</button>
        <button class="q-btn" onclick="checkScratchQuiz3(this, 's3_q2', false)">ข. ผู้เรียนต้องเรียนให้จบภายในเวลาที่กำหนด</button>
        <button class="q-btn" onclick="checkScratchQuiz3(this, 's3_q2', false)">ค. เกมแรกจะยากที่สุด และเกมสุดท้ายจะง่ายที่สุด</button>
        <button class="q-btn" onclick="checkScratchQuiz3(this, 's3_q2', false)">ง. เป็นการเรียนการสอนโดยไม่มีผู้ชี้แนะ</button>
        <div id="fb-s3_q2" class="feedback"></div>
      </div>

<div class="q-block">
        <div class="q-question">3. เป้าหมายสูงสุดที่ผู้สอน ต้องการให้คุณเป็นหลังจากจบคอร์สนี้คืออะไร?</div>
        <button class="q-btn" onclick="checkScratchQuiz3(this, 's3_q3', false)">ก. นักแข่งเกม E-Sport ระดับโลก</button>
        <button class="q-btn" onclick="checkScratchQuiz3(this, 's3_q3', false)">ข. วิศวกรซ่อมบำรุงเซิร์ฟเวอร์</button>
        <button class="q-btn" onclick="checkScratchQuiz3(this, 's3_q3', true)">ค. นักพัฒนาเกมที่มีความมั่นใจและมีความคิดสร้างสรรค์ (Confident, Creative Game Developer)</button>
        <button class="q-btn" onclick="checkScratchQuiz3(this, 's3_q3', false)">ง. นักออกแบบเว็บไซต์</button>
        <div id="fb-s3_q3" class="feedback"></div>
      </div>

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

if(correct) {
    btn.style.background = '#DCFCE7';
    btn.style.borderColor = '#166534';
    btn.style.color = '#14532D';
    fb.innerHTML = "✅ ถูกต้องครับ! เข้าใจแก่นของการออกแบบเกมแล้ว พร้อมลุยของจริงได้เลย!"; 
    fb.className = "feedback correct"; 
  } else {
    btn.style.background = '#FEE2E2';
    btn.style.borderColor = '#991B1B';
    btn.style.color = '#7F1D1D';
    fb.innerHTML = "❌ ยังไม่ถูกนะครับ ลองสังเกตคีย์เวิร์ดในเนื้อหาด้านบนอีกครั้งนะครับ"; 
    fb.className = "feedback wrong"; 
  }
  fb.style.display = "block";
}
</script>