Home > HTML5 > สร้างเกมส์ด้วย HTML5 ง่ายๆ (part3-2)

สร้างเกมส์ด้วย HTML5 ง่ายๆ (part3-2)

หลังจากที่ได้ปล่อย Part3 ตอนที่ 1 ออกไป คาดว่าหลายคนคงเริ่มเมาๆบ้าง แต่อย่าพึ่งเซครับ เพราะยังไม่หมด ในตอนที่ 2 จะมาพูดถึงอีกครึ่งที่เหลือ ซึ่งเป็นส่วนสำคัญของกลไกในเกมส์ ซึ่งผมจะพยายามอธิบายให้ง่ายที่สุดครับ (บางคนเริ่มปวดหัว จายเย็นๆครับ ^^)

เอาละครับ มาดูกันต่อจาก Part3 ตอนที่ 1 กันนะครับ ^^

D : กำหนดเงื่อนไข การสร้างไฟโลกันต์


Add Event

System : varCreateFire= 0

เงื่อนไขนี้จะเอาไว้เช็คว่า ตอนนี้ เจ้า BigMonster ถูกกระตื้บตายเรียบร้อยแล้วหรือยัง ในเงื่อนไขนี้ ถ้ายังไม่ตาย ค่าตัวแปรจึงถูกกำหนดเป็น varCreateFire= 0 ก็จะเข้าไปสร้างไฟออกมาจากปาก BigMonster ต่อไป แต่ถ้าตาย varCreateFire = 1 ซึ่งค่า =1 จะถูกกำหนดใน Group Jump Kill ครับ

D1 : สร้างไฟ

System : Every 2 seconds เป็นการกำหนดให้ทุกๆ 2 วินาทีนั้น ให้ระบบทำอะไรสักอย่างหนึ่ง ซึ่งในที่นี้ก็คือ การสร้าง Object Fire

Add Action

System : Create object (Fire) on Layer 0 at (758.405,286.8) การสร้าง Object Fire ที่ Layer:0 ตำแหน่ง X=758.405,Y=286.8 (อันนี้ผมลองลาก Fire ไปวางตรงปากเจ้า Big Monster และดูตำแหน่ง X,Y ตรง Properties เอาคับ คุณสามารถเปลี่ยนเป็นตำแหน่งอื่นก็ได้นะ ตามใจชอบ แต่ที่ซีเรียสคือ ตำแหน่ง Layer:0 ครับ อย่าสร้าง Object Fire อยู่ Layer บนสุด เพราะเรา Set Paralax ไว้ มันจะลอยไปกับฉาก เหมือนพวก Text ที่บอกคะแนน หรือ พลังชีวิตนะครับ)

Fire : Set angle to Random(180,200) degrees เป็นสุ่มมุม ที่จะให้ Fire พ่นออกไปจากปากของ BigMonster การหามุมที่ต้องการนั้น ง่ายๆครับ ให้ลองกำหนดจุดแล้วหมุนดู จะเห็นองศาขึ้นที่แถบ Properties ด้านซ้ายตรง Common น่ะครับ

D2 : กำหนดเงื่อนไข เมื่อ Fire ชนกับ Player

Fire : On collision with Player กำหนด Event เมื่อมีการชนของ Fire กับ Player

Add Action

System : Wait 1.0 seconds หน่วงเวลา 1 วิ

Player : Subtract 1 from health ลบค่าพลังชีวิต ของ Player -1

ตอนนี้เราได้กำหนดส่วนของการกำเนิด Fire และก็การชน(Collision) เป็นที่เรียบร้อย ต่อไปจะเป็นส่วนสุดท้ายครับ นั่นคือ Group ของการ กระโดดตื้บ Monster และเก็บ Items ต่างๆ ยาวนิดนึง แต่ไม่ยากหรอกครับ มาดูวิธีกันเลย

E : กำหนดเงื่อนไขการกระโดดเก็บ Items และ Monster

E1 : กำหนดเงื่อนไข การกระโดดขึ้นบน Bar2(Solid)

Add Event

Player : On collision with Bar2
ตัว Bar2 เป็น Solid ที่วางไว้บนหัวของ Big Monster แล้วกำหนดค่า Opacity =0 ไม่ให้มองเห็น เอาไว้รับการสัมผัสของ Player ที่กระโดดขึ้นมายืนบนหัว

Player : Platform is on floor
ต้องใช้ onFloor แทน onFalling เพราะเป็นการกระโดดจากพื้นขึ้นมายืนบน Solid แล้วให้มีการกระตื้บ 3 ที เราจะจับ Event การกระโดดลงบน Solid ก็เลยมองว่า Solid เป็น Floor มันถึงจะจับ Event การสัมผัส Solid แล้ว -1 พลังชีวิต Big Monster ได้น่ะครับ

Add Action

bigMonster : Subtract 1 from bigMonsterHealth เมื่อ Player โดดตื้บ Big Monster สำเร็จ ให้ -1 พลังชีวิตของ Big Monster

E2 : ตรวจสอบพลังชีวิต Big Monster

Add Event

bigMonster : bigMonsterHealth =0 ถ้าค่าพลังชีวิต Big Monster เป็น 0 แสดงว่ามันตายแล้วหละ

Add Action

bigMonster : Destroy ทำลาย Object Big Monster ทิ้ง

Fire : Destroy ทำลาย Object Fire ด้วย ไม่งั้น ไฟมันจะยังติดอยู่ เพราะ Fire กับ Big Monster มันคนละ Object กันนะครับ

txtBigMonster : Set Invisible ปิด Text ที่แสดงค่าพลังชีวิต Big Monster

System : Set varCreateFire to 1 กำหนดให้ตัวแปร การ Create Fire มีค่าเป็น 1 แสดงว่าเจ้า Big Monster ตายแล้ว ให้ออกจากเงื่อนไข varCreateFire = 0

System : Add 10 to varScore เพิ่มคะแนน +10 ลงในตัวแปร Global variable : varScore คะแนนนี้จะถูกส่งขึ้นด้านบนสุด แล้วส่งไปจุดต่างๆที่ดึงคะแนนนี้ไปแสดง

Bar2 : Destroy ทำลาย Object Solid ที่วางอยู่บนหัว Big Monster เพื่อไม่ให้ Player กระโดดขึ้นไปลอยกลางอากาศได้ครับ

System : Add 1 to varCountKill
ให้เพิ่มจำนวน Item ที่เก็บได้ +1 ที่ตัวแปร Global variable : varCountKill

E3 : ตรวจสอบพลังชีวิต Little Monster

Add Event

Player : On collision with littleMonster ตรวจสอบการชนจากการเดินไปชนของ Player ที่เดินไปชนเจ้า Little Monster ตรงๆ

Add Action

Player : Subtract 1 from health ถ้าชนจริง ก็ให้ -1 ค่าพลังชีวิตของ Player

E4 : ตรวจสอบการชน Bar (Solid)

Add Event

Player : On collision with Bar ตรวจสอบการชนของ Player ที่กระโดด ขึ้นบน Bar ที่อยู่บนหัว Little Monster

Player : Platfrom is falling ตรวจสอบการชน จากการกระโดด

Add Action

littleMonster : Destroy ถ้าหากโดน Bar ที่อยู่บนหัว Little Monster เพียงครั้งเดียวให้ทำลาย Little Monster

Bar : Destroy ทำลาย Bar(Solid) ที่วางอยู่บนหัว Little Monster

System : Add 5 to varScore เพิ่มคะแนนให้กับ Player เมื่อทำลายเจ้า Little Monster ได้

System : Add 1 to varCountKill เพิ่มจำนวนการเก็บ Item

E5 : ตรวจสอบการชน iPhone

Add Event

Player : On collision with iPhone ตรวจสอบการชน iPhone

Add Action

iPhone : Set Invisible ถ้าชน iPhone จริงให้ปิดการแสดงภาพ

System : Add 100 to var Score คะแนนโบนัสพิเศษ 100 คะแนน

System : Add 1 to varCountKill
เพิ่มจำนวนการเก็บ Item

iPhone : Destroy ทำลาย Object : iPhone ทิ้ง

E6 : ตรวจสอบการชน Bar (Solid)

Add Event

Player : On collision with macAir ตรวจสอบการชน Mac Book

Add Action

macAir : Set Invisible ถ้าชน Mac Book จริงให้ปิดการแสดงภาพ

System : Add 50 to varScore คะแนนโบนัสพิเศษ 50 คะแนน

System : Add 1 to varCountKill เพิ่มจำนวนการเก็บ Item

macAir : Destroy ทำลาย Object : Mac Book ทิ้ง

เอาละครับ ถ้าใครตามมาทัน ก็จะสามารถ Run Game นี้เล่นได้แล้ว แต่ถ้าใครไม่ทัน ผมมีไฟล์ให้ให้ดาวน์โหลดไปศึกษากัน

Download : testDemo.capx
View game demo

ส่วนใครยัง งงๆ ก็ลองทำบ่อยๆครับ ตัวอย่างทั้งหมด อาจจะไม่ใช่แนวทางการสร้าง Logic ที่ถูกต้อง และดีที่สุด อาจจะมีวิธีอื่นๆที่ง่าย และสั้นกว่า แต่อย่างน้อยความเข้าใจพื้นฐานที่ผมพยายามแนะนำนี้ ก็จะช่วยเริ่มต้นให้กับผู้สนใจได้ไม่มากก็ได้ครับ ในตอนสุดท้าย ไม่มีไรต้องซีเรียสแล้ว เราจะมาสนุกกับการใส่ Sound เป็นอันจบ Part3 อย่างสมบูรณ์ครับ ^^ เจอกันใหม่ตอนหน้าครับ

Related Articles


About the author

นาย ณัฐพงศ์ พันธุศิลป์ (กอล์ฟ) Website Manager Unicorn Max Co.,Ltd.

Website : http://www.unicornmax.com

Facebook : http://www.facebook.com/unicornmax

Twiter :