Trace: » wd124
เกมจับคู่
คำสั่ง 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
- ทำลักษณะเดียวกันกับเลเยอร์ที่เหลือ
- บันทึกไฟล์แล้วทดสอบ
ผู้เขียน
- นายบุญเลิศ อรุณพิบูลย์ นักวิชาการ ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี
