Course: Claude for HTML5 Mini Game Development

 อบรมการใช้ Claude เพื่อสร้าง HTML5 Game

🎯 Learning Objectives

• ใช้ Claude เป็น Game Dev Assistant
• เข้าใจพื้นฐาน HTML5 Canvas / DOM game
• สร้างเกมเล่นได้จริง (browser-based)
• เพิ่ม game feel (animation, sound, feedback)
• Deploy เกมให้คนเล่นได้

---

🧩 Module 1: Intro to HTML5 Game Dev

Topics

• Game loop คืออะไร
• HTML5 game types:
  • Canvas-based
  • DOM-based
• Tools:
  • Vanilla JS
  • Phaser (optional)

Workshop

• Prompt:

Generate a simple HTML5 click game

---

🧠 Module 2: Prompting Claude for Game Design

Topics

• Prompt ให้ Claude “ออกแบบเกม”
• Define:
  • mechanic
  • goal
  • difficulty

Workshop

• Prompt:

Design a simple addictive mini game with increasing difficulty

---

🎨 Module 3: Rendering (Canvas / DOM)

Topics

• Canvas API
• Drawing:
  • shapes
  • images
• Coordinate system

Workshop

• Claude สร้าง:
  • player object
  • moving obstacles

---

🔄 Module 4: Game Loop & State

Topics

• requestAnimationFrame
• Update vs Render
• State management

Workshop

• Prompt:

Create a game loop for a 2D dodging game

---

🎮 Module 5: Input & Controls

Topics

• Keyboard input
• Mouse / Touch
• Mobile-friendly UX

Workshop

• เพิ่ม control:
  • WASD / arrow keys
  • touch swipe

---

💥 Module 6: Collision & Physics (Basic)

Topics

• Bounding box collision
• Speed / velocity
• Gravity (optional)

Workshop

• ทำ:
  • collision detection
  • game over logic

---

✨ Module 7: Game Feel & UX

Topics

• Animation
• Sound effects
• Feedback:
  • screen shake
  • score popup

Workshop

• Prompt:

Add juice effects to make the game feel satisfying

---

🧠 Module 8: Using Claude for Iteration

Topics

• Balancing difficulty
• Refactoring code
• Generate variations

Workshop

• ให้ Claude:
  • เพิ่ม level system
  • เพิ่ม enemy types

---

🧪 Module 9: Debugging & Optimization

Topics

• Fix performance issue
• ลด lag
• Clean code

Workshop

• paste error → ให้ Claude วิเคราะห์

---

🚀 Module 10: Packaging & Deployment

Topics

• Deploy static site:
  • GitHub Pages
  • Netlify
• Mobile support

Workshop

• Publish เกมจริง

---

🧩 Final Project Ideas

เลือก 1:

• Endless Runner
• Space Shooter
• Reaction Speed Game
• Puzzle (match / logic)

---

🧾 Example “Pro Prompt” (Game Builder)

You are a senior HTML5 game developer.

Task:
Create a mini game.

Game concept:
- Endless runner
- Player avoids obstacles

Requirements:
- HTML5 Canvas
- Smooth animation
- Score system
- Increasing difficulty

Output:
- Full working code (HTML, CSS, JS)
- Simple assets (shapes)
- Instructions to run
 
สนใจติดต่อเพื่อขอรับใบเสนอราคาได้ที่ Ken 0952120555 Line wizarud