พัฒนาเกมส์เอ็นจิ้นด้วย HTML5 + JavaScript ตอนที่ 3 ทดสอบคลาส JsgeObject

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

หลายปีที่ผ่านมานักพัฒนาซอฟต์แวร์เป็นจำนวนมากได้นำวิธีการพัฒนาซอฟต์แวร์ที่เรียกว่า Test-Driven Development (TDD) มาใช้กันอย่างแพร่หลาย โดยหลักการของ TDD ก็คือ เป็นการพัฒนาซอฟต์แวร์ที่ใช้ การทดสอบโปรแกรมแบบอัตโนมัติ (Automated Unit Test) เป็นตัวขับเคลื่อน ผลักดันกระบวนการพัฒนาซอฟต์แวร์ เป็นการพัฒนาซอฟต์แวร์โดยการเขียนโค้ดที่ใช้ทดสอบการทำงานของตัวโปรแกรม (Unit Test) ก่อนที่จะเขียนโค้ดการทำงานของโปรแกรมจริงๆ ซึ่งมี 3 ขั้นตอนดังนี้

1. Red - เขียนโค้ดที่ใช้ทดสอบการทำงานของโปรแกรมก่อนที่จะเขียนโค้ดการทำงานของโปรแกรม และให้การทดสอบทุกอันได้ผลลัพธ์ไม่ผ่านการทดสอบ
2. Green - เขียนโค้ดการทำงานของโปรแกรมในผ่านการทดสอบ โดยเขียนโค้ดเท่าที่จำเป็นเพื่อให้ผ่านการทดสอบเท่านั้น
3. Refactor - ปรับปรุงโค้ดที่เราเขียนในขั้นตอนที่ 2 ให้ดีขึ้น เช่น ลดโค้ดที่ซ้ำซ้อน หรือ ลดจำนวนโค้ดที่เขียนขึ้นแต่ทำงานได้เท่าเดิม เป็นต้น หลังจากที่ปรับปรุงโค้ดแล้ว ก็ให้ทำการทดสอบทุกครั้ง เพื่อให้แน่ใจว่าโค้ดที่ปรับปรุงไม่กระทบการทำงานของโปรแกรมและยังทำงานได้ตามปกติ

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

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

เรามาเริ่มต้นเขียนการทดสอบโค้ดกัน โดยเราจะใช้วิธีที่ง่ายที่สุดก่อน ก็คือใช้ if-statement ในการทดสอบดังตัวอย่างข้างล่าง และหลังจากนั้นเราจะแสดงการใช้ Unit Test Library ที่ชื่อ QUnit แทนที่จะใช้ if-statment ในการทดสอบโค้ด

var jsgeObj = new JsgeObject(10, 20);
jsgeObj.setData("hero");

if(jsgeObj.getX() != 10) {
document.write("the x pos must be 10");
}
if(jsgeObj.getY() != 20) {
document.write("the y pos must be 20");
}
if(jsgeObj.getData() != "hero") {
document.write("the data must be hero");
}

จากโค้ดเราจะเริ่มต้นด้วยการสร้างอ๊อปเจ็กของ JsgeObject โดยให้ตำแหน่ง X และ Y อยู่ที่ 10 และ 20 ตามลำดับ และก็กำหนดให้ data เป็นคำว่า hero โดยการเรียก jsgeObj.setData("hero") หลังจากนั้นเราก็ตรวจสอบว่าตำแหน่ง X Y และ data ที่เรากำหนดไว้นั้นถูกต้องหรือไม่ โดยการใช้ if-statement ทดสอบค่าที่ได้จาก getX() getY() และ getData() ตามลำดับ ถ้าค่าที่ได้ไม่ตรงกับที่เรากำหนดไว้ก่อนหน้านี้ เราก็จะพิมพ์ข้อผิดพลาดออกทางหน้าจอโดยเรียก document.write(...)

การเขียนโค้ดทดสอบจะทำให้เราแน่ใจได้ว่าโปรแกรมทำงานได้อย่างถูกต้องและช่วยลดเวลาที่เราต้องทดสอบโค้ดอีกครั้งหนึ่ง ถ้าเราทำการแก้ไขปรับปรุงโค้ดในอนาคต เพียงแค่รันโค้ดที่ใช้ในการทดสอบอีกครั้งว่าผ่านการทดสอบหรือไม่

ในบทความถัดไปเราจะมาพูดถึง Library ที่ใช้ในการเขียนโค้ดทดสอบการทำงานของโปรแกรมที่ชื่อ QUnit กันและโค้ดเพิ่มเติมที่เราจะเขียนเพิ่มเข้าไปในเกมส์เอ็นจิ้นเพื่อใช้ในการแสดงผลกราฟฟิกในเว็บบราวเซอร์กัน ขอให้สนุกกับการเขียนโปรแกรมนะครับ :)

พัฒนาเกมส์เอ็นจิ้นด้วย HTML5 + JavaScript ตอนที่ 2 คลาส JsgeObject

จากบทความแรกเราได้พูดถึงเครื่องมือและชื่อของเกมส์เอ็นจิ้นที่เราจะเขียนแล้ว ในบทความนี้เราจะมาเริ่มเขียนคลาสแรกกัน คือ คลาส JsgeObject ในภาษา JavaScript เราเขียนคลาส ได้ดังนี้

/**

Create a new JsgeObject

@class represent a object in a game. It is a base class of all classes in Jsge.

@constructor

@param {Number} x the x position of the object.

@param {Number} y the y position of the object.

*/

function JsgeObject(x, y) {

this.x = x;

this.y = y;

this.data = null;

}

การประกาศชื่อและโครงสร้างของคลาสในภาษา JavaScript เราทำได้โดยให้ชื่อฟังก์ชัน (Function) เป็นชื่อเดียวกับคลาสที่เราต้องการสร้างและเราสามารถที่จะกำหนดคุณสมบัติ (Property) ของคลาสได้ โดยเีรียกคำสั่ง this.x = x; ดังตัวอย่างข้างต้น เป็นต้น

จากตัวอย่างโค้ดข้างต้น เราจะเห็นว่าในส่วนคอมเมนต์ (Comment) มีคำอธิบายคลาสอยู่พร้อมกับแท๊ก (Tag) พิเศษ อย่างเช่น @param หรือ @returns สำหรับใช้ทำเอกสารประกอบการใช้งานจากโค้ดที่เราเขียน รายละเอียดเกี่ยวกับแต่ละแท๊กจะอธิบายไว้ในบทความถัดไป

หลังจากที่เราได้ประกาศชื่อและโครงสร้างของคลาสแล้ว ถัดมาเราก็จะมากำหนดการดำเนินการ (Method) ต่างๆของคลาสดังนี้

/**

Get the reference to the user data attached to this object.

@returns {Object} the reference to the user data

*/

JsgeObject.prototype.getData = function() {

return this.data;

};

/**

Get the x position of this object.

@returns {Number} the x position

*/

JsgeObject.prototype.getX = function() {

return this.x;

};

/**

Get the y position of this object.

@returns {Number} the y position

*/

JsgeObject.prototype.getY = function() {

return this.y;

};

/**

Set the data associate to this object.

@param {Object} the data.

*/

JsgeObject.prototype.setData = function(data) {

this.data = data;

};

/**

Move the object to new x and y positions.

@param {Number} x the x position of the object.

@param {Number} y the y position of the object.

*/

JsgeObject.prototype.move = function(x, y) {

this.x = x;

this.y = y;

};

การกำหนด Method ของคลาส เราจะใช้ <ชื่อคลาส>.prototype.<ชื่อ Method> = function() {...} ใน Method เราสามารถอ้างถึง Property ของคลาสได้โดยเรียกคำสั่ง this.<ชื่อ Properties> จากโค้ดตัวอย่ีางข้างต้นเราจะเห็นว่า Method getX() คืนค่าจาก this.x

เราจะเห็นว่าแต่ละ Method มีคอมเมนต์อธิบายการทำงานและพารามิเตอร์ (Parameter) ที่ต้องส่งผ่าน Method ว่ามีอะไรบ้าง Method ของคลาส JsgeObject ทำงานไม่ซับซ้อนแค่คืนค่า Property และกำหนดตำแหน่ง x และ y เท่านั้น

หลังจากที่เราได้โค้ดของคลาส JsgeObject แล้ว เราก็จะมาทดสอบการทำงานโค้ดที่เราเขียนกัน เราเรียกการทดสอบย่อยๆนี้ว่า Unit Test วิธีที่ง่ายที่สุดในการทดสอบก็คือ เขียนโปรแกรมขึ้นมาใหม่อีกตัวเพื่อทดสอบโค้ดของเรา ซึ่งโปรแกรมนี้จะทดสอบแต่ละกรณีการใช้งานที่เป็นไปได้ของโค้ด การทดสอบแต่ละกรณีเราเรียกว่า Test Case เพื่อง่ายต่อการทดสอบ เราจะเริ่มด้วย Test Case เดียวก่อน โดยจะทดสอบ Method ทั้งหมดของคลาส JsgeObject

การทดสอบเราอาจจะเขียนโค้ดโดยใช้ if-statement ตรวจสอบค่าที่ได้หลังจากเรียกแต่ละ Method หรือ ที่นิยมปฎิบัติกันก็คือ ใช้ Library สำหรับทำ Unit Test

ในบทความนี้เราก็ได้เรียนรู้วิธีเขียนคลาสใน JavaScript แล้ว ในบทความถัดไปเราจะมาต่อในเรื่องการทดสอบคลาสที่เราเขียนกัน

มาฝึกหัดเขียนโปรแกรมกัน พัฒนาเกมส์เอ็นจิ้นด้วย 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