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

สวัสดีครับ มาต่อกันที่ 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

DEVAHOYChai Phonbopit

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 ตอน (จำไม่ได้) แต่ช่วงหลังๆ พอดีว่า งานยุ่ง ก็เลยไม่ได้ทำต่

DEVAHOYChai Phonbopit

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

สวัสดีครับ โพสนี้เป็นสรุป การเรียนภาษา Python จากการเล่นเกม Code Combat Part 1 นะครับ โดยเนื้อหาที่เขียน จะอ้างอิงจาก Video Youtube ที่ผมบันทึกไว้ ตัวบล็อก เป็นการนำเอาเนื้อหา มาเขียนอธิบายเพิ่มเติม รวมถึงเผื่อเอาไว้อ่านทบทวนครับ (เพราะเข้

DEVAHOYChai Phonbopit

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

สวัสดีครับ มาต่อกันที่ Part 2 โพสนี้เป็นการสรุป และการ Review นะครับ เนื่องจาก วันนี้ จะเน้นไปที่การเคลียร์ด่านที่มันเป็นแบบฝึก (Practice) ฉะนั้น ผมก็เลยปิดช่อง Code Editor ด้านขวามือ อยากให้ฝึกคิด ฝึกทำดูก่

DEVAHOYChai Phonbopit