เกมจับคู่

คำสั่ง Drag Layer ช่วยในการสร้างระบบโต้ตอบแบบลากไปวาง ณ ตำแหน่งเป้าหมาย เช่น การสร้างเกมจับคู่

  • เตรียมภาพที่จะใช้ในการสร้างเกมจับคู่
  • สร้างเอกสารเว็บ กำหนดค่าที่จำเป็น
  • สร้างตารางความกว้าง 500 pixels ค่าอื่นๆ กำหนดเท่ากับ 0 pixel โดยมีจำนวนคอลัมน์เท่ากับ 2 และจำนวนแถวเท่ากับจำนวนภาพที่ใช้จับคู่ ตัวอย่าง 3 แถว
  • กำหนดความกว้างของแต่ละเซลล์เท่ากับ 250 pixels ตั้งค่า Horz/Vert เป็น Left/Top

  • นำภาพที่เตรียมไว้ วางในคอลัมน์ที่ 2 ของแต่ละแถว

  • ผนวกคอลัมน์แรกให้เป็นเซลล์เดียวกัน

  • สร้างเลเยอร์ และกำหนดรายละเอียดดังนี้
    • เลเยอร์ชิ้นที่ 1
      • ตั้งชื่อเป็น sound
      • พิมพ์คำว่า Sound
    • เลเยอร์ชิ้นที่ 2
      • ตั้งชื่อเป็น wireless
      • พิมพ์คำว่า WireLess
    • เลเยอร์ชิ้นที่ 3
      • ตั้งชื่อเป็น computer
      • พิมพ์คำว่า Computer

  • เลือกเลเยอร์ sound ลากไปทับรูปลำโพง
  • เลือกคำว่า sound แล้วพิมพ์รายการ Link: ด้วยสัญลักษณ์ #
  • กำหนด Behaviors เป็น Drag Layer



  • เลือกเลเยอร์ sound แล้วดึงออกจากรูป เปลี่ยนค่า Event ใน Behaviors เป็น OnMouseOver

  • ทำลักษณะเดียวกันกับเลเยอร์ที่เหลือ
  • บันทึกไฟล์แล้วทดสอบ

ผู้เขียน

  1. นายบุญเลิศ อรุณพิบูลย์ นักวิชาการ ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี



Personal Tools
Creative Commons License
STKS Online Learning โดย http://stks.or.th/wiki อนุญาตให้ใช้ได้ตาม สัญญาอนุญาตของครีเอทีฟคอมมอนส์แบบ แสดงที่มา-ไม่ใช้เพื่อการค้า-อนุญาตแบบเดียวกัน 3.0 ประเทศไทย.