วันอังคารที่ 8 กันยายน พ.ศ. 2558

Construct 2 : เกมจับคู่ภาพกับคำ ตอนที่ 10 สรุปคะแนน

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


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


กำหนดการทำงานให้กับปุ่มทั้งสอง (sprite6 = restart, sprite7 = exit ) ดังนี้


เพิ่มวัตถุแบบ Text กำหนดชื่อเป็น total_txt เพื่อแสดงคะแนนที่ได้จาการเล่นเกม จัดวางตำแหน่งให้เหมาะสม


กำหนดให้แสดงคะแนนเมื่อเริ่มแสดง layout ดังนี้


กำหนดการทำงานของปุ่ม restart และปุ่ม exit ซึ่งจะต้องกำหนดค่าของตัวแปร array ที่เราได้ลบข้อมูลออกไปในตอนที่เล่นเกม  ดังนี้


ทดสอบการทำงานของเกมทั้งหมด ซึ่งในขณะนี้ถือว่าสมบูรณ์แล้ว (สมบูรณ์ คือ มีการทำงานครบถ้วนนะครับ)  ซึ่งเป็นแนวทางในการประยุกต์ทำเกมหรือสื่อการสอนที่มีลักษณะของการจับคู่คำ จับคู่ภาพได้  ถ้าหากจะพัฒนาต่อให้มีความน่าสนใจมากขึ้น ต้องทำให้มีคำศัพท์ที่หลากหลาย และมีหลายฉาก สามารถเลือกได้ว่าจะเล่นฉากไหน หรือจัดเป็นฉากตามหมวดหมู่ของคำศัพท์  สุดท้ายก็ขอให้สนุกกับการสร้างเกมนะครับ

Construct 2 : เกมจับคู่ภาพกับคำ ตอนที่ 9 เก็บคะแนน

ขั้นต่อไปจะเป็นการเก็บคะแนนของเกม เงื่อนไขการให้คะแนน  จะขึ้นกับความเร็วในการคลิกภาพที่คู่กับคำศัพท์  แล้วนำเวลาที่ใช้ไปมาหารคะแนนเต็มของคำแต่ละคำ
ขั้นแรกกำหนดตัวแปร ดังนี้


เพิ่มวัตถุแบบ Text ขึ้นมา 2 ตัวสำหรับแสดงคะแนน (score_txt) และแสดงเวลาของเกม (time_txt)


เพิ่มเหตุการณ์ใหม่ เพื่อใช้สำหรับนับเวลาในการคลิกภาพ  เป็นแบบ System  และเหตุการณ์ Every X seconds


กำหนดให้ทำงานทุกๆ 0.1 วินาที


กำหนดคำสั่งให้ทำงาน คือ เพิ่มค่าให้ตัวแปร time1  เป็นแบบ System  และเหตุการณ์  Add to


เพิ่มค่าให้ตัวแปร time1 ทีละ 1


เพิ่มคำสั่งสำหรับเหตุการณ์นี้อีกหนึ่งค่า คือ กำหนดให้ time_txt แสดงเวลาที่เพิ่มขึ้น


เลือก Set text



กำหนดค่าให้เท่ากับตัวแปร time1


เพิ่มคำสั่งใหม่เข้าไปใน function wordmatch  สองคำสั่ง คือ
System --> Add floor(MAX_SCORE / time1) to score คำนวณคำแนนแล้วบวกเพิ่ม
System --> Set time1 to 0  กำหนดค่าเวลาให้เริ่มนับใหม่



กำหนดคำสั่งให้ทำงาน เป็นแบบ System  และเหตุการณ์  Add to  เลือกตัวแปร score
การคำนวณคะแนนคือ เอาค่าคะแนนเต็ม (MAX_SCORE) หารด้วยเวลาที่ผ่านไป (time1) และปัดลงเป็นจำนวนเต็ม



กำหนดคำสั่งให้ทำงาน เป็นแบบ System  และเหตุการณ์  Set value  กำหนดค่า time1 = 0


เพิ่มเงื่อนไข else ในกรณีที่แถวลำดับของคำว่าง คือ คลิกภาพครบทุกคำแล้ว ให้ไปยังหน้าสรุปคะแนน


ทดสอบเล่นเกม จะพบว่าเมื่อคลิกภาพที่ตรงกับคำศัพท์ คะแนนจะเพิ่มขึ้นเรื่อยๆ เมื่อคลิกภาพด้วยความรวดเร็วจะได้คะแนนสูงกว่าการเล่นที่คลิกภาพช้า

วันเสาร์ที่ 5 กันยายน พ.ศ. 2558

Construct 2 : เกมจับคู่ภาพกับคำ ตอนที่ 8

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

ขั้นตอนแรกต้องสร้างฟังก์ชัน (function) สำหรับการตรวจสอบขึ้นมาก่อน โดยเพิ่มวัตถุแบบ Function

เพิ่มเหตุการณ์ใหม่ Add event แบบ function


เลือกเหตุการณ์แบบ On function


ตั้งชื่อ function ว่า wordmath


เพิ่มเหตุการณ์ย่อยภายใต้เหตุการณ์ของ Function wordmath โดยเลือกแบบ Temp_arr


เลือกเงื่อนไข คือ Contains value เป็นการตรวจสอบว่าคำศัพท์ที่ส่งเข้ามา มีอยู่ในรายการคำศัพท์ที่เลือกไว้หรือไม่


กำหนดเงื่อนไขคือ ค่าที่ส่งเข้ามาให้กับ Function ลำดับที่ 0  กำหนดค่า ดังนี้ Function.Param(0)


เพิ่ม action เมื่อคำที่ส่งมา มีอยู่ในรายการคำของ Temp_arr โดยการลบคำนั้นออกจากรายการ


เลือกคำสั่ง Delete


กำหนดตำแหน่งของคำที่จะลบด้วยคำสั่ง Temp_arr.IndexOf(Function.Param(0))


จะได้คำสั่ง ดังนี้


ต่อไปจะเพิ่มคำสั่งให้ลบภาพออกจากเกม เมื่อภาพนั้นตรงกับคำศัพท์ที่มีในรายการคำที่ได้เลือกไว้
โดยเลือกเหตุการณ์แบบ System


เลือกเหตุการณ์ Compare two values คือการเปรียบเทียบค่า


กำหนดค่าการเปรียบเทียบสองค่าคือ Function.Param(1)  กับหมายเลขของภาพที่กำหนดไว้คู่กับคำ


กำหนดคำสั่งให้ลบภาพที่ตรงกับหมายเลขที่กำหนด ในตัวอย่างนี้ คือลบภาพหมายเลข 1


เลือกคำสั่งเป็น Destroy


เพิ่มคำสั่งย่อยให้ครบทุกภาพที่ได้กำหนดไว้ในเกมของเรา ดังนี้


ต่อไปจะกำหนดเหตุการณ์สำหรับการคลิก Mouse บนวัตถุภาพของเราที่ได้กำหนดไว้
จะต้องเพิ่มวัตถุแบบ Mouse เข้ามาในเกมก่อน


เพิ่มเหตุการณ์เมื่อมีการคลิก Mouse บนวัตถุ


เลือกเหตุการณ์ On object clicked


เลือกวัตถุที่เกิดเหตุการณ์เมื่อคลิก mouse ในครั้งนี้เลือกเป็น pic1


กำหนดคำสั่ง โดยเรียกใช้ Function wordmatch


เลือกคำสั่ง Call function


กำหนดชื่อ Function ที่เรียกใช้ คือ wordmatch  กำหนดค่าที่ส่งให้  Function สองค่าคือ Parameter 0 = คำศัพท์ที่ตรงกับภาพ ในกรณีนี้คือ "pencil" และ Parameter 0 = 1 คือ คู่กับภาพที่ 1


กำหนดการคลิก Mouse ให้ครบทุกภาพ ดังนี้



ทดสอบการทำงานของเกม จะพบว่าเมื่อคลิกที่ภาพที่ตรงกับคำศัพท์ ภาพนั้นจะหายไป และคำศัทพ์ก็จะลดลงด้วย

วันศุกร์ที่ 4 กันยายน พ.ศ. 2558

Construct 2 : เกมจับคู่ภาพกับคำ ตอนที่ 7

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


สร้างวัตถุขึ้นมาเป็นแบบ Text  ตั้งชื่อว่า word_txt



วางในตำแหน่งที่เหมาะสม ปรับขนาดตามต้องการ  เมื่อได้ตำแหน่งที่เหมาะสมกับการแสดงข้อความแล้ว ให้จดค่า position และค่า Size ของ word_txt ไว้



สร้างตัวแปรแบบ Global ขึ้นมา 3 ตัว คือ wd_x เก็บตำแหน่ง position X , wd_y เก็บตำแหน่ง position Y และ wd_h เก็บค่าความสูงของ word_txt  กำหนดค่าเริ่มต้นตามตำแหน่งที่ได้จดเอาไว้



ย้ายวัตถุ word_txt ไปไว้นอกพื้นที่ของเกม


กำหนดเหตุการณ์แบบ  System  และเลือก Every tick


เพิ่ม action คือการทำลาย word_txt ทั้งหมด โดยเลือก word_txt


แล้วเลือกคำสั่ง Destroy




เพิ่ม sub event ขึ้นมาภายใต้ every tick  แล้วเลือก Temp_arr


แล้วเลือก Is empty


แล้วเปลี่ยนเป็นเหตุการณ์แบบ invert คือทำงานเมื่อ Temp_arr ไม่เป็นค่าว่าง


เพิ่ม sub event ขึ้นมาภายใต้ Temp_arr แบบ System เป็น Loops Repeat


กำหนดจำนวนรอบในการวนซ้ำ เท่ากับขนาดของ Temp_arr.Width



เพิ่ม action แบบ System เป็น Create object


เลือก Object to create เป็น word_txt แสดงที่ Layer 2
ตำแหน่ง X = wd_x  และตำแหน่ง Y = (loopindex*wd_h) + wd_y


เพิ่ม action เพื่อเพิ่มข้อความให้กับ word_txt ที่สร้างขึ้นมาใหม่ โดยเลือก word_txt


เลือกคำสั่ง Set text


กำหนดข้อความตามค่าที่อยู่ในรายการคำ Temp_arr ในตำแหน่งที่วนรอบ  คือ Temp_arr.At(loopindex)


ทดสอบการทำงานของโปรแกรม จะได้รายการของคำแสดงที่ด้านข้างของเกม