Construct 2 : สร้างเกมสะกดคำศัพท์ภาษาอังกฤษ ด้วยคำสั่ง for Loop (ตอนจบ)

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

1. เพิ่มตัวแปรหลัก (Global Variable) จำนวน 6 ตัวแปร ดังนี้

  • ตัวแปรประเภท Number ชื่อ wordCheck ตั้งค่าเริ่มต้นเป็น 0 สำหรับเก็บค่าตัวอักษรที่วางถูกตำแหน่งบนกล่องสี่เหลี่ยม
  • ตัวแปรประเภท Number ชื่อ randVocab ตั้งค่าเริ่มต้นเป็น 0 สำหรับเก็บค่าที่สุ่มได้จากความกว้างของอาร์เรย์
  • ตัวแปรประเภท Number ชื่อ leftGap ตั้งค่าเริ่มต้นเป็น 0 สำหรับเก็บค่าระยะห่างที่คำนวณได้จากขอบด้านซ้ายถึงกล่องสี่เหลี่ยมกล่องแรก
  • ตัวแปรประเภท Number ชื่อ lenWord ตั้งค่าเริ่มต้นเป็น 0 สำหรับเก็บค่าความยาวของคำศัพท์
  • ตัวแปรประเภท Number ชื่อ correct ตั้งค่าเริ่มต้นเป็น 0 สำหรับเก็บค่าตัวอักษรที่วางถูกตำแหน่งในครั้งแรก เพื่อนำไปคิดคะแนน
  • ตัวแปรประเภท Number ชื่อ score ตั้งค่าเริ่มต้นเป็น 0 สำหรับเก็บค่าคะแนนรวมทั้งหมด

2. ตั้งค่าเริ่มต้นเมื่อเริ่มต้นเลย์เอาต์

  • Add event > On start of layout
    • Add action > textRemain > set text > “”
    • Add action > textScore > set text > “”
    • Add action > textVocab > set text > “”
    • Add action > arrayVocab > load > JSON
"{""c2array"":true,""size"":[13,1,1],""data"":[[[""zebra,0""]],[[""owl,1""]],[[""bear,2""]],[[""giraffe,3""]],[[""tiger,4""]],[[""lion,5""]],[[""monkey,6""]],[[""elephant,7""]],[[""fox,8""]],[[""squirrel,9""]],[[""rhino,10""]],[[""rabbit,11""]],[[""raccoon,12""]]]}"
    • Add action > vocabImage > set frame > Frame number > 13
    • Add action > Particles > Destroy

3.  สร้างฟังก์ชั่น “loading” เพื่อล่างหน้าจอและเรียกคำศัพท์จาก arrayVocab เพื่อกำหนดค่า textVocab และ vocabImage

  • Add event > Function > Name “loading”
    • Add action > boxStand > Destroy
    • Add action > textDrag > Destroy
    • Add action > boxRandom > Destroy
    • Add action > System > Set Value
      • Variable > correct
      • Value > 0
    • Add action > System > Set Value
      • Variable > wordCheck
      • Value > 0
  • Function  “loading” > Add sub-event > arrayVocab >Is empty
  • คลิกขวาที่ Is empty > Invert
    • Add action > System > Set Value
      • Variable > randVocab
      • Value > int(random(arrayVocab.Width))
    • Add action > textVocab > Set text > trim(tokenat(arrayVocab.At(randVocab),0,”,”))
    • Add action > vocabImage > set frame > Frame number > int(trim(tokenat(arrayVocab.At(randVocab),1,”,”)))
    • Add action > arrayVocab > Delete
      • Indeax > randVocab
      • Axis > x
    • Add action > Function > Call function > Name > “setting”
  • คลิกขวาที่ arrayVocab > Esle
    • Add action > vocabImage > set frame > Frame number > 13
    • Add action > Button > set Y > 95
    • Add action > Reset Global variables
    • Add action > Restart layout

4.  สร้างฟังก์ชั่น “setting” เพื่อตั้งค่า lenWord,  leftGap และความกว้างของ arrayIndexbox

  • Add event > Function > Name “setting”
    • Add action > System > Set Value
      • Variable > lenWord
      • Value > len(TextVocab.Text)
    • Add action > System > Set Value
      • Variable > leftGap
      • Value > ((LayoutWidth/2)-(70*lenWord)/2)+35
        • 70 = ความกว้างของกล่องสี่เหลี่ยม + ระยะช่องว่างระหว่างกล่องสี่เหลี่ยม
        • 35 = (ความกว้างของกล่องสี่เหลี่ยม + ระยะช่องว่างระหว่างกล่องสี่เหลี่ยม)/2
    • Add action > arrayIndexbox > Set size
      • width > lenWord
      • heigth > 1
      • depth > 1
  • คลิกขวาที่  Function “setting”
  • Add sub-event > System > for
    • Name > “x”
    • start index > 0
    • end index > lenWord-1
    • Add action > arrayIndexbox > Set at X
      • X > loopindex(“x”)
      • Value > loopindex
  • คลิกขวาที่  Function “setting”
  • Add sub-event > System > for
    • Name > “createObj”
    • start index > 0
    • end index > lenWord-1
    • Add action > System > Create object
      • Object to create > boxStand
      • Layer > 0
      • X > leftGap+loopindex(“createObj”)*70
      • Y > 300
    • Add action > boxStand > Set value
      • Instance variable > characters
      • Value > uppercase(mid(TextVocab.text,loopindex,1))
    • Add action > System > Create object
      • Object to create > boxRandom
      • Layer > 0
      • X > leftGap+loopindex(“createObj”)*70
      • Y > 370
  • คลิกขวาที่  System for “createObj” > Add sub-event > arrayIndexbox > Is empty
    • คลิกขวาที่ Is empty > Invert
    • คลิกขวาที่ arrayIndexbox > Add local variable
      • Name > rand
      • Type > Number
      • Initial value > 0
    • Add action > System > Set Value
      • Variable > rand
      • Value > int(random(arrayIndexbox.Width))
    • Add action > boxRandom > Set value
      • Instance variable > Index
      • value > int(arrayIndexbox.At(rand))
    • Add action > arrayIndexbox > Delete
      • Indeax > rand
      • Axis > x
    • Add action > boxRandom > Spawn another object
      • Object > textDrag
      • Layer > “word” หรือ 1
      • Image point > 0
    • Add action > textDrag > Set text
      • Text > uppercase(mid(TextVocab.text,boxRandom.index,1))

5. เมื่อเริ่มคลิกลาก textDrag จะเก็บค่าตำแหน่ง X ไว้ในตัวแปร start_X  และเก็บค่าตำแหน่ง Y ไว้ในตัวแปร start_Y

6. เมื่อวาง textDrag ลงบนกล่อง boxStand จะตรวจสอบความถูกต้องของตัวอักษรกับตำแหน่งที่วางว่าถูกต้องหรือไม่

6.1 ถ้าถูกต้องในครั้งแรก ค่า wordCheck และ correct จะเพิ่มขึ้นอย่างละ 1  แต้ม เปลี่ยนสีอักษรเป็นสีน้ำตาล และตรึงตัวอักษรไว้กับกล่อง boxStand

6.2 ถ้าวางมากกว่า 1 ครั้ง และถูกต้อง ค่า wordCheck จะเพิ่มขึ้น 1 แต้ม ตรึงตัวอักษรไว้กับกล่อง boxStand และสีอักษรยังคงเป็นสีแดง

6.3 ถ้าวางไม่ถูกตำแหน่งจะกลับไปยังกล่อง boxRandom และเปลี่ยนสีอักษรเป็นสีแดง

7.  เมื่อว่างตัวอักษรตัวสุดท้ายลงบนกล่อง boxStand (ตัวแปร wordCheck = lenWord) จะคิดคะแนนและโหลดคำศัพท์ตัวต่อไป

7.1 ถ้าวางถูกต้องทุกตัวอักษร ( correct = lenWord) จะเพิ่มคะแนน 100 แต้ม

7.2 แต่ถ้าไม่ใช่จะเพิ่มคะแนนให้เป็นร้อยละ ตามจำนวนตัวอักษรที่วางถูกในครั้งแรก

8. เมื่อคลิกปุ่ม PLAY จะเรียกฟังก์ชั่น “loading” และย้ายปุ่มไปที่ ตำแหน่ง Y = 520

9. แสดงคะแนนทั้งหมด จำนวนตัวอักษรที่ตอบถูก และตัวอักษรที่เหลือ

  • ใช้ web font ตั้งรูปแบบตัวอักษรจากเว็บ googlefont  > “https://fonts.googleapis.com/css?family=Montez”

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

ขอให้สนุกกับการสร้างงานนะครับ

พบกันใหม่ในบทหน้า

สวัสดีครับ