เรียนภาษา Python ด้วยเกม Code Combat - Part 3

Code Combat Mar 28, 2023

สวัสดีครับ มาต่อกันที่ Part 3 วันนี้จะเป็นการตะลุย Web Development และ Game Development โดยทั้ง 2 ด่าน เป็นเหมือน คลาสเรียนมากกว่า มีการแก้โจทย์ปัญหานิดหน่อย ผมก็เลยไม่ปิด Code เพราะคิดว่า นำมาเป็นเนื้อหาในการสอน และอธิบายเพิ่มเติมได้


คลิปวิดีโอ

Web Development

ด่านนี้ เป็นเหมือนการแนะนำการเขียนเว็บเบื้องต้น เพื่อให้เข้าใจ Basic เข้าใจ HTML สามารถนำไปต่อยอดได้ แต่ถ้าจะทำเว็บไซต์จริงๆ ก็ต้องหัดใช้พวก Text Editor / IDE การเปิดไฟล์ เซฟไฟล์​และการเช่า Hosting เป็นต้น

แต่เบื้องต้น แนะนำ Basic HTML ผมก็ว่าพอมองเห็นภาพ พอเข้าใจว่าหน้าเว็บประกอบไปด้วยอะไรบ้าง

การขึ้นบรรทัดใหม่ใช้ <br>

Hello World
<br>
This is second line.

การสร้าง paragraph จะใช้ tag <p>

<p>This is paragraph</p>

ตัวอย่างการสร้าง Heading ตั้งแต่ 1-6

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

การแสดงรูปภาพ

<img src="path/to/image.png" alt="Image" >

ได้รู้จักกับ Attributes เช่น src width และ height

การแสดงข้อมูลแบบ List ทั้ง <ol> และ <li>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<ol>
  <li>item 1</li>
  <li>item 2</li>
</ol>

แท็กอื่นๆ เช่น <div>

<div>
  <h1>Heading</h1>
  <p>Hello</p>
</p>

CSS เบื้องต้น

<style>
    #main {
        color: orange;
    }
</style>

การกำหนด id และ class ให้กับ Element เพื่อให้เราสามารถ ตั้ง selector ใน CSS ได้

หากอยากเรียนรู้ HTML, CSS เพิ่มเติม ลองอ่านบทความนี้ที่ผมเคยเขียนไว้ครับ

แหล่งเรียนรู้การทำเว็บไซต์ (HTML/CSS/JS)
แหล่งเรียนรู้ในการทำเว็บไซต์ HTML CSS และ JavaScript มีทั้งคอร์สเรียนแบบ Video Youtube และแบบ Text Tutorial สำหรับคนชอบอ่าน รวมถึงแนว Interactive Tutorial

Game Development

เป็นการสอนให้เราเป็นคนสร้างเกม และก็อธิบายว่า การออกแบบเกม ต้องทำยังไงบ้าง

  • ต้องสร้าง Hero (spawn) และเลือกตำแหน่งจุดเกิด
  • ต้องกำหนด Goal ที่จะชนะ เช่น กำจัดศัตรูให้หมด หรือ อยู่รอด x วินาที
  • สามารถ spawn ศัตรูออกมา ที่ตำแหน่ง x, y ที่ต้องการได้
  • เลือกชนิดศัตรูได้
  • เลือกสิ่งของที่จะ spawn ก็ได้ เช่น รั้วไม้, ป่า เป็นต้น

ส่วนนี้ ก็จะไม่มีอะไรมาก เน้นไปที่ความคิดสร้างสรรค์มากกว่า ไม่มีข้อกำหนดตายตัว ว่าแบบนี้ผ่าน แบบนี้ไม่ผ่าน เราสามารถออกแบบได้ตามที่เราต้องการ


จบไปแล้วครับ สำหรับ Part 3 วันนี้ ก็เน้นไปที่การเรียน รอ Part 4 จะเคลียร์ Game Development ให้จบ แล้วก็จะไปด่านใหม่ แล้วครับ

Happy Coding ❤️

ตอนอื่นๆ

Code Combat ตอนที่ 0 - แนะนำเกม
สืบเนื่องจากผมนั่งเล่น Facebook อยู่ แล้วไถไปเจอเพจนี้ CodeCombat Thailand ทำให้ผมนึกถึงเกม Code Combat ที่เป็นการฝึกเขียนโปรแกรมด้วยการเล่นเกม และก็เคยทำคลิปลง Youtube ที่ช่อง Devahoy เอาไว้ 2-3 ตอน (จำไม่ได้) แต่ช่วงหลังๆ พอดีว่า งานยุ่ง ก็เลยไม่ได้ทำต่
เรียนภาษา Python ด้วยเกม Code Combat - Part 1
สวัสดีครับ โพสนี้เป็นสรุป การเรียนภาษา Python จากการเล่นเกม Code Combat Part 1 นะครับ โดยเนื้อหาที่เขียน จะอ้างอิงจาก Video Youtube ที่ผมบันทึกไว้ ตัวบล็อก เป็นการนำเอาเนื้อหา มาเขียนอธิบายเพิ่มเติม รวมถึงเผื่อเอาไว้อ่านทบทวนครับ (เพราะเข้
เรียนภาษา Python ด้วยเกม Code Combat - Part 2
สวัสดีครับ มาต่อกันที่ Part 2 โพสนี้เป็นการสรุป และการ Review นะครับ เนื่องจาก วันนี้ จะเน้นไปที่การเคลียร์ด่านที่มันเป็นแบบฝึก (Practice) ฉะนั้น ผมก็เลยปิดช่อง Code Editor ด้านขวามือ อยากให้ฝึกคิด ฝึกทำดูก่

Tags

Chai Phonbopit

เป็น Web Dev ทำงานมา 10 ปีหน่อยๆ ด้วยภาษา JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจ Web3, Crypto และ Blockchain เขียนบล็อกที่ https://devahoy.com