มาฝึกหัดเขียนโปรแกรมกัน พัฒนาเกมส์เอ็นจิ้นด้วย HTML5 + JavaScript

การฝึกเขียนโปรแกรมนั้น นอกจากจะช่วยเพิ่มทักษะการเขียนโปรแกรมให้กับเราแล้ว ก็อาจจะช่วยให้เราได้ไลบรารี่ (Library) ใหม่ๆ มาเก็บไว้ใช้งานอีกด้วย ถ้าเราคิดโปรเจ็คที่ใช้ในการฝึกเขียนโปรแกรมที่สามารถนำไปประยุกต์กับงานของเราได้

เมื่อไม่กี่อาทิตย์ที่ผ่านมาได้มีโอกาสไปเยี่ยมชมเว็บ www.html5rocks.com มา ก็ทำให้เกิดแรงบันดาลใจว่าเราน่าจะฝึกเขียนโปรแกรมโดยใช้ Feature ใหม่ๆของ HTML5 + JavaScript ดู และน่าจะเป็นโปรแกรมที่เรานำมาใช้ประโยชน์ต่อไปในอนาคตได้ นึกไปนึกมาอยู่หลายวัน ก็เลยคิดออกว่าจะทำอะไรดี มาจบลงที่ เกมส์เอ็นจิ้นเอพีไอ (Game Engine API)

Game Engine API (Application Programming Interface) เป็นโปรแกรมที่รวบรวมชุดคำสั่ง การทำงานที่ใช้ในการพัฒนาเกมส์เข้าไว้ด้วยกัน โดยที่เราสามารถนำไปใช้พัฒนาเกมส์ง่ายๆได้ ตัว API อาจจะประกอบไปด้วยชุดคำสั่งที่เกี่ยวข้องกับการเคลื่อนที่ของตัวละครในเกมส์ การสร้างฉากของเกมส์ หรือ การสั่งให้ตัวละครในเกมส์มีการโต้ตอบกัน เป็นต้น

ที่ผมเลือกทำ Game Engine API ก็เพราะว่า การฝึกเขียนโปรแกรมที่เกี่ยวกับเกมส์นั้นใช้เทคนิคการเขียนโปรแกรมที่ค่อนข้างหลากหลาย ตั้งแต่การคำนวนทางคณิตศาสตร์ การแสดงผลทางกราฟฟิก (Graphic) หรือ การทำงานที่เกี่ยวกับอีเวนท์ (Event) ต่างๆ ในเว็บบราวเซอร์ (Web Browser) เป็นต้น คิดว่าน่าจะช่วยในการฝึกเขียนโปรแกรมได้ดี นอกจากนี้ เราไม่จำเป็นต้องลงโปรแกรมอะไรมากมีแค่ notepad และ เว็บบราวเซอร์ ที่ใช้งาน HTML5 ได้ อย่างเช่น Google Chrome เป็นต้น ก็สามารถที่จะเขียนโปรแกรมได้แล้ว

ผมให้ชื่อโปรเจ็คนี้ว่า Jsge ซึ่งย่อมาจาก JavaScript Game Engine ก่อนที่จะเริ่มเขียนโปรแกรม เรามาดูกันก่อนว่าต้องมีเครื่องมืออะไรบ้างที่ใช้ทำงาน ดังนี้

• เว็บบราวเซอร์ที่ใช้งาน HTML5 ได้
• Text Editor อย่างเช่น notepad ใช้สำหรับเขียนโค้ด

นอกจากเว็บบราวเซอร์และ Text Editor ผมจะใช้โปรแกรมต่อไปนี้ด้วย ซึ่งเป็นส่วนประกอบในการพัฒนาโปแกรมเท่านั้น จะไม่มีก็ได้ แต่ผมจะอธิบายไว้ในขั้นตอนการเขียนโปรแกรมด้วย เผื่อมีคนสนใจนำไปใช้งานต่อไป

• QUnit เป็น JavaScript library สำหรับใช้ทำ Unit Test สามารถดาว์โหลดได้ที่นี่ http://github.com/jquery/qunit (คลิกที่ปุ่ม Download Source)
  
• JsDoc Toolkit เป็น JavaScript library สำหรับใช้ทำเอกสารอธิบายการใช้งาน Jsge สามารถดาว์โหลดได้ที่นี่ http://code.google.com/p/jsdoc-toolkit/downloads/list เลือกลิงค์ที่เป็น jsdoc-toolkit-2.4.0.zip
  
• Git เป็น Version Control System ที่ใช้จัดเก็บซอส์โค้ดของ Jsge สามารถดาว์โหลดได้ที่นี่ http://code.google.com/p/msysgit/downloads/list เลือกลิงค์ที่เป็น PortalGit1.7.1

โปรแกรมข้างต้นเราสามารถที่จะก๊อปปี้ไฟล์หรือแตก zip ไฟล์มาใช้งานได้เลย วิธีการใช้งานแต่ละโปรแกรมจะอธิบายในหัวข้อต่อๆไป เมื่อมีการใช้งาน

ก่อนที่เราจะเริ่มเขียน API เรามาวางโครงสร้างของโปรแกรมคราวๆก่อนว่าน่าจะมีอะไรบ้าง เราจะเริ่มจากความต้องการ (Requirement) ง่ายๆก่อน ค่อยๆเพิ่มไปเรื่อยๆจนได้การทำงานทั้งหมดที่เราต้องการ เราจะใช้วิธีการพัฒนาซอฟต์แวร์ที่เรียกว่า Short Iterations ก็คือ ใช้ระยะเวลาสั้นๆประมาณ 1 - 2 อาทิตย์ในการพัฒนาแต่ละส่วนแล้วเผยแพร่โปรแกรมที่เราเขียนออกไปให้ผู้อื่นใช้งาน เพื่อรับข้อเสนอแนะเพื่อนำกลับมาปรับปรุงแก้ไขโปรแกรมของเราต่อไป

ดังนั้นเราจะมาเริ่มจากส่วนที่ง่ายที่สุดก่อนก็คือ เราจะทำ API สำหรับสร้างวัตถุที่อยู่ในเกมส์ขึ้นมา เราขอเรียกมัน JsgeObject เป็นคลาสที่ใช้แทนวัตถุที่อยู่ในเกมส์ ซึ่งมีคุณสมบัติ (Property) และ การดำเนินการ (Method) ดังนี้

Properties

• x เป็น ตำแหน่งตามแนวนอนของวัตถุ
• y เป็น ตำแหน่งตามแนวตั้งของวัตถุ
• data ใช้เก็บข้อมูลเกี่ยวข้องของวัตถุ เช่น ถ้าวัตถุเป็นบ้าน data อาจจะใช้เก็บชื่อเจ้าของบ้านหรือราคาบ้าน เป็นต้น

Methods

• getX() ใช้ดึงค่า x ของวัตถุ
• getY() ใช้ดึงค่า y ของวัตถุ
• getData() ใช้ดึงค่า data ของวัตถุ
  

เมื่อเราได้องค์ประกอบคราวๆของคลาสแล้ว เราก็จะมาเริ่มเขียนโค้ดกัน ซึ่งเราจะมาต่อตรงนี้กันในบทความหน้านะครับ :D