2D Game DevelopmentDeveloperGame DevelopmentGame DevelopmentHTML5JavaScriptProgramming LanguageSocial Media Marketing

เขียนเกมบน HTML5 ด้วย Cocos2d X HTML และ JavaScript เพิ่มศัตรู และเวลา

วิธีการเขียนเกมบน HTML5 ด้วย Cocos2d X และ JavaScript จากตอนแรกที่เรียกตัวละคร รอบนี้เป็นการโหลดกราฟิกตัวศัตรูให้เคลื่อนไหวด้วยฟังก์ชัน Interval เวลา
วิธีเพิ่มศัตรูเข้ามาในฉาก
จากบทเรียนก่อนหน้านี้ เขียนเกมบน HTML5 ด้วย Cocos2d X HTML และ JavaScript สร้างตัวละคร

เรียกตัว Player มาโชว์ได้แล้ว
เรียกตัว Player มาโชว์ได้แล้ว

เตรียมไฟล์กราฟิกของศัตรูของเรา ตั้งชื่อว่า “gamemonster.png” ขึ้นมาครับ
เข้าไปแก้ไขไฟล์ “Src/resource.js” โดยเพิ่ม ศัตรู และ กระสุนลงไป

และ

ลงไปในหมวดหมู่ของมัน Code ของไฟล์ resource.js จะเป็นดังนี้

ข้อสังเกตระวังเครื่องหมาย “,”

แก้ไขไฟล์ “Src/MainLayer.js” ในส่วนบนของคำสั่งให้เป็นดังนี้

แก้ไขคำสั่ง onEnter:function() จากเดิม

ให้กลายเป็น

เพิ่ม “,” ต่อท้าย “}” ส่วนของ Method เมื่อครู่

แล้วเพิ่ม ฟังก์ชันสำหรับ เพิ่มตัวกราฟิกของ Monster ลงไปดังนี้

กลับไปยัง ฟังก์ชัน onEnter:function() เพิ่มคำสั่งต่อไปนี้ท้าย

ให้เป็น

ทดสอบเล่นเกมของเราโดยการเข้าไฟล์ index.html แล้วจะเห็นว่าศํตรู ขอเราวิ่งผ่านไปมา

ศัตรูวิ่งไปมา ลอยไปมา
ศัตรูวิ่งไปมา ลอยไปมา

ในบทเรียนต่อไปจะเป็นการสอนวิธีการ เพิ่มลูกกระสุนเข้าไปใน Project เกมของเราครับ

สำหรับตัวอย่างการพัฒนาใน 2 บทเรียนนี้คือ

สามารถดาวน์โหลด Source Code ได้ที่

https://github.com/banyapon/cocos2dHTML5-sample

Tags

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Leave a Reply

Back to top button
Close
Close

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน