🐸 🐘 🐟 🦆
เริ่มต้นเรียนฟรี · ไม่ต้องสมัคร

เรียนเขียน เกม ภาษาไทย
แค่ลากบล็อก ไม่ต้องพิมพ์โค้ด

เด็กม.ต้นก็เขียนเกมเป็น — เรียนผ่านเกมไทยๆ ที่คุ้นเคย ทำตามขั้น ส่งเพื่อนเล่นได้จริง ไม่ต้องติดตั้งอะไร

🚀 เริ่มบทเรียนแรก 🎮 เปิด MakeCode Arcade
3
บทเรียนแรก
45+
นาทีเนื้อหา
100%
ภาษาไทย
0
บาท — เรียนฟรี
ทำไมต้อง CodeKids

เรียนเขียนเกม ง่ายกว่าที่คิด

ออกแบบมาให้เด็กไทยเข้าใจได้เร็ว ไม่ต้องรู้ภาษาอังกฤษมาก่อน ไม่ต้องพิมพ์โค้ด ไม่ต้องติดตั้งโปรแกรม

🧩

ลากบล็อก ไม่ต้องพิมพ์

ใช้บล็อกสีๆ ต่อกันเหมือนตัวต่อ LEGO ลากวาง เรียงคำสั่ง เห็นผลทันที — เหมือน Scratch แต่เน้นเกม

🇹🇭

เนื้อหาภาษาไทย 100%

คำอธิบาย ชื่อบล็อก ชื่อบทเรียน เป็นภาษาไทยทั้งหมด ตัวอย่างเกมเป็นธีมไทย คุ้นเคย เข้าใจง่าย

🎯

ได้เกมจริง เล่นได้จริง

ทำเสร็จก็ได้เกมจริงๆ เอาไปโชว์เพื่อนได้ โหลดเป็น .html ไปเปิดบนมือถือก็ได้

แผนการเรียน

เริ่มจากง่ายไปยาก

ทำตามทีละบทได้เลย ไม่ต้องเรียง — แนะนำให้เรียงลำดับ 1-2-3 เพราะแต่ละบทต่อยอดกัน

01 🐸

กบกระโดดข้ามบึง

เริ่มต้น⏱ 15 นาที

สร้าง sprite กบ เคลื่อนที่ด้วยลูกศร กระโดดข้ามสิ่งกีดขวาง — เรียนรู้ sprite, on-start, controller

เริ่มบทนี้ →
02 🐘

ช้างน้อยผจญภัย

ง่าย⏱ 30 นาที

Platformer ช้างเดินข้ามป่า — เรียนรู้ gravity, jump, overlap, animation

เริ่มบทนี้ →
03 🐟

ปลาแม่น้ำเจ้าพระยา

กลาง⏱ 45 นาที

Shooter ยิงปลาในแม่น้ำ — เรียนรู้ projectile, velocity, sprite overlap, kill

เริ่มบทนี้ →
04 🥗

ตลาดส้มตำ

กลาง+⏱ 30 นาที

เกมเก็บของ แม่ค้าจับวัตถุดิบตกใส่ตะกร้า — เรียนรู้ score, life, timer, random spawn

เริ่มบทนี้ →
05 👹

ผีตานี

ยาก⏱ 45 นาที

Boss fight — เณรยิงปาก้อนปราบผีตานี — เรียนรู้ HP, attack pattern, projectile pattern

เริ่มบทนี้ →
06 🎨

ออกแบบเกมเอง

โปรเจกต์⏱ ของคุณ

รวมทุกอย่างที่เรียนมา ออกแบบเกมที่คุณอยากทำ — ส่งมาโชว์ได้เลย

เร็วๆ นี้
🐸

บทเรียนที่ 01 · กบกระโดดข้ามบึง

ทำเกมกบกระโดดข้ามบึงง่ายๆ ลากบล็อกบังคับทิศทาง ลากบล็อกกระโดด

📚 สิ่งที่จะได้เรียน

  • สร้าง sprite กบบน MakeCode Arcade
  • บล็อก on start และ forever ทำงานอัตโนมัติ
  • บล็อกควบคุมทิศทาง (Controller) — ลูกศร 4 ทิศ
  • เรื่อง velocity (ความเร็ว) และ vy (ความเร็วแนวตั้ง)
  • เพิ่ม sprite "บึง" ที่กบต้องหลบ
1

สร้าง sprite กบ

คลิกที่รูป "My Sprite" ด้านบนซ้าย เลือกภาพกบ หรือวาดเอง — เปลี่ยนชื่อเป็น "กบ" (Sprite kind = Player)

// ในแท็บ Sprites set กบ to sprite 🐸 of kind Player
2

ตั้งตำแหน่งเริ่มต้น

ในแท็บ Scene หรือ on start — ตั้งให้กบอยู่ล่างซ้าย ก่อนเริ่มเกม

on start { set กบ position to x: 11 y: 107 }
3

ใส่ตัวควบคุม (Controller)

ลากบล็อก Controller จากเมนูซ้าย — ลูกศร ← → บังคับซ้ายขวา ลูกศร ↑ กระโดด

on LEFT button pressed { set กบ vx to -50 } on RIGHT button pressed { set กบ vx to 50 } on UP button pressed { set กบ vy to -100 // -100 = ลอยขึ้น (เราใช้พิกัดแบบ Arcade) }
4

เพิ่มแรงโน้มถ่วง

ให้กบตกลงมาหลังกระโดด — ตั้ง ay = 50 (แรงดึงลงต่อเฟรม)

on A button pressed { set กบ vy to -150 } on กบ created { set กบ ay to 50 }
5

สร้างบึง + ตรวจชน

เพิ่ม sprite "บึง" ตั้งอยู่ด้านล่าง ถ้ากบตกถึงบึง → Game Over

on บึง overlap กบ { game over with LOSE }
🏆

Challenge: กระโดดให้สูงขึ้น

ลองเปลี่ยน vy ตอนกด A จาก -150 เป็น -200, -250 — ดูว่าตัวเลขไหนกระโดดสูงสุด แล้วบันทึกค่าที่ "พอดี" ของคุณ

🎮 เปิด MakeCode Arcade ทำตาม ← กลับไปเลือกบท
🐘

บทเรียนที่ 02 · ช้างน้อยผจญภัย

ทำเกม platformer ช้างเดินข้ามป่า มี platform ให้กระโดดขึ้นลง

📚 สิ่งที่จะได้เรียน

  • ทำฉาก platformer พื้น + ที่สูง
  • Animation แยกท่าเดิน-ยืน-กระโดด
  • ตรวจจับ "ยืนอยู่บนพื้น" ก่อนกระโดดได้
  • ศัตรู (เถาวัลย์) เดินกลับไปกลับมา
  • เก็บกล้วย = คะแนน
1

ฉากป่า + พื้น

วาด tile map แบบง่าย — มีพื้นบน พื้นล่าง มีก้อนหินกลางทาง

// ตั้งฉาก set background to 🌳 set tile to 🪨 with wall on top
2

ช้างเคลื่อนที่ + Animation

ใช้ Animation แยกท่า ใส่ sprites 3 รูป (ยืน, เดิน, กระโดด)

forever { if ช้าง vx < 0 then animate ช้าง walking for 200 ms else if ช้าง vy < 0 then animate ช้าง jumping else animate ช้าง idle }
3

กระโดดได้เฉพาะตอนยืนพื้น

ใช้ is hit wall below ตรวจก่อนให้กระโดด

on A button pressed { if ช้าง is hit wall below then { set ช้าง vy to -130 } }
4

เถาวัลย์ศัตรู

สร้าง sprite เถาวัลย์ ให้เดินไปกลับ ถ้าชนช้าง = Game Over

on เถาวัลย์ created { set เถาวัลย์ vx to 30 } forever { if เถาวัลย์ is hit wall then เถาวัลย์ vx = -เถาวัลย์ vx }
5

กล้วย + คะแนน

วางกล้วย 5 ลูก ถ้าชน = คะแนน+1 เก็บครบ = ชนะ

on ช้าง overlap กล้วย { change score by 1 destroy กล้วย } if score == 5 then game over with WIN
🏆

Challenge: ด่านที่สอง

ลองเพิ่มด่านที่ 2 — เปลี่ยนฉากเป็นทุ่งนา มีหิน มีแม่น้ำเล็กๆ ที่ต้องกระโดดข้าม ให้ช้างมีพลัง 3 หัวใจ

🎮 เปิด MakeCode Arcade ทำตาม ไปบทถัดไป →
🐟

บทเรียนที่ 03 · ปลาแม่น้ำเจ้าพระยา

ทำเกม shooter ยิงปลาในแม่น้ำ — กด A ยิงลูกปลาขึ้นฟ้า

📚 สิ่งที่จะได้เรียน

  • สร้าง projectile (ลูกปลากระสุน)
  • ตั้งค่า vx, vy ให้ลูกปลานิ่งอยู่บนตัวผู้เล่น
  • ตรวจ sprite overlap เพื่อทำลายศัตรู
  • ศัตรูปลาบินข้ามจอ
  • ทำ effect เวลายิงโดน (particle)
1

ฉากแม่น้ำ

ใช้ tile map ทำฉากน้ำ ตลิ่ง ต้นไม้ริมฝั่ง

set background to 🌊 setBackgroundColor 9 // สีฟ้าอ่อน
2

ตัวละครยิง

Sprite "เรือ" อยู่ล่างกลางจอ ไม่เคลื่อนที่ (shooter แบบนิ่ง)

on start { set เรือ position to x: 80 y: 120 }
3

ยิง projectile

กดปุ่ม A → สร้าง sprite "ลูกปลา" ให้พุ่งขึ้น

on A button pressed { set ลูกปลา to projectile 🐟💧 from เรือ set ลูกปลา vx to 0 set ลูกปลา vy to -80 // พุ่งขึ้น }
4

ปลาศัตรูบินข้ามจอ

สร้างปลาให้บินข้ามจอเป็นระยะ ถ้าโดนลูกปลา = ตาย

game.onUpdate(() => { if Math.random() < 0.02 then { spawn ปลาบิน at x:160 y: random0-100 } }) on ลูกปลา overlap ปลาบิน { destroy ปลาบิน destroy ลูกปลา change score by 1 }
5

Effect + เสียง

เพิ่ม effect ตอนโดน เล่นเสียง splash

on ลูกปลา overlap ปลาบิน { destroy ปลาบิน with effect 2 music.playSound("splash") }
🏆

Challenge: Boss Fish

เพิ่ม "ปลาบิ๊ก" ตัวใหญ่ที่มี HP 5 ดวง ต้องยิง 5 ครั้งถึงจะตาย มี effect กระเพื่อมน้ำตอนตาย

🎮 เปิด MakeCode Arcade ทำตาม ← กลับไปดูบทอื่น
🥗

บทเรียนที่ 04 · ตลาดส้มตำ

ทำเกมแม่ค้าจับวัตถุดิบตก — คุมตะกร้าซ้ายขวา เก็บให้ทันก่อนหมดเวลา

📚 สิ่งที่จะได้เรียน

  • สร้าง sprite "ตะกร้า" เคลื่อนที่ด้วยลูกศร (เหมือนบท 1)
  • ใช้ game.onUpdate สุ่ม spawn วัตถุดิบ
  • ทำระบบคะแนน (info.score) และชีวิต (info.life)
  • นับเวลาถอยหลัง (countdown timer)
  • เพิ่ม "ของเสีย" เพื่อให้เกมมีความท้าทาย
1

ตะกร้า + คุมลูกศร

สร้าง sprite "ตะกร้า" ใส่ชื่อ Player ใช้ Controller เดิมจากบทที่ 1

on start { set ตะกร้า position to x: 80 y: 110 info.setLife(3) info.startCountdown(60) }
2

Spawn วัตถุดิบแบบสุ่ม

ใช้ onUpdate — ทุก ๆ 1 วินาที สุ่มสร้าง sprite จากด้านบน

game.onUpdateInterval(1000, () => { const items = [🍈, 🌶️, 🍋, 🫛, 🥜] const item = items[Math.randomInt(0, 4)] spawn item at x: random10-150 y: 0 })
3

จับได้ = +คะแนน

ตรวจ sprite overlap ระหว่างตะกร้า กับของ — ถ้าชน คะแนน+1 ลบ sprite

on ตะกร้า overlap item { info.changeScoreBy(1) destroy item with effect splash music.playSound("ba dum tss") }
4

พลาด = -ชีวิต

ถ้าของตกถึงพื้น (y > 120) = ชีวิตลดลง

on item y > 120 { destroy item info.changeLifeBy(-1) }
5

หมดเวลา = จบเกม

info.onCountdownEnd → เปรียบเทียบคะแนน บอกผล

info.onCountdownEnd(() => { if info.score() >= 20 then game.setGameOverMessage("🌶️ เชฟส้มตำตัวจริง!", true) else game.setGameOverMessage("😅 ลองอีกครั้งนะ", false) })
🏆

Challenge: ของเสีย + Combo

เพิ่ม sprite "ขยะ" 🗑️ สีต่างจากของดี — ถ้าเก็บได้ = -3 คะแนน และทำ combo system: เก็บของติด ๆ กัน 3 ชิ้น = คะแนนคูณ 2

🎮 เปิด MakeCode Arcade ทำตาม ไปบทถัดไป →
👹

บทเรียนที่ 05 · ผีตานี

ทำเกม Boss fight — เณรน้อยยิงปาก้อนปราบผีตานีตัวร้ายที่มี HP 5 ดวง

📚 สิ่งที่จะได้เรียน

  • ทำ sprite ผู้ร้าย (boss) + HP bar แสดงผล
  • ยิง sprite "ปาก้อน" จากผู้เล่นขึ้นไปหา boss
  • ลด HP ของ boss เมื่อโดน (ใช้ sprite variable)
  • ทำ attack pattern ฝั่ง boss — ยิง projectile ลงมาเป็นชุด
  • ตรวจ game over (HP ผู้เล่นหมด) vs ชนะ (boss HP หมด)
1

ผีตานี + HP 5 ดวง

วาด sprite ผีตานี 👹 ขนาดใหญ่ ตั้งไว้บนกลางจอ และสร้าง sprite variable "HP"

on start { let bossHP = 5 set ผีตานี position to x: 80 y: 30 set ผีตานี scale to 1.5 }
2

เณรน้อยยิงปาก้อน

Sprite "เณร" อยู่ล่างกลางจอ กด A → ยิงปาก้อนขึ้น

on A button pressed { set ปาก้อน to projectile 🟠 from เณร set ปาก้อน vy to -90 music.playSound("whoosh") }
3

โดน boss = HP ลด

ทุกครั้งที่ปาก้อนชนผีตานี → ลด bossHP ทำลายปาก้อน + effect

on ปาก้อน overlap ผีตานี { bossHP -= 1 destroy ปาก้อน sprites.setSpriteImage(ผีตานี, "hurt") // กระพริบ }
4

boss ยิงกลับ (pattern)

ทุก 2 วินาที boss ยิง projectile 3 ลูกลงมาเป็นรูปพัด

game.onUpdateInterval(2000, () => { for let i = -1; i <= 1; i++ { set ลูกไฟ to projectile 🔥 from ผีตานี set ลูกไฟ vx to i * 30 set ลูกไฟ vy to 80 } })
5

ชนะ / แพ้

ตรวจ HP ของ boss + HP ของผู้เล่นแต่ละเฟรม

game.onUpdate(() => { if bossHP <= 0 then { destroy ผีตานี with effect fire game.setGameOverMessage("⚡ ปราบผีตานีสำเร็จ!", true) } }) on ลูกไฟ overlap เณร { info.changeLifeBy(-1) destroy ลูกไฟ }
🏆

Challenge: HP Bar จริง

วาด HP bar ด้านบนจอ: ใช้ sprite รูปสี่เหลี่ยม กว้างตาม bossHP ที่เหลือ — ทำเงากับพื้นหลังให้สวย และใส่ animation ตอน boss โดน

🎮 เปิด MakeCode Arcade ทำตาม ไปดู Gallery →
🎮 ลองเล่นเลย — ไม่ต้องสมัคร

MakeCode Arcade · Editor ตัวจริง

เปิดในแท็บใหม่ได้เลย ลากบล็อก กดปุ่ม ▶ เห็นเกมรันทันที — ฟรี ใช้ได้ทุกเบราว์เซอร์

🚀 เปิดในแท็บใหม่