•  

ยินดีต้อนรับสู่ ThaiFlashDev

ผู้เขียน หัวข้อ: อยากทราบวิธีการสร้างเกมลากวางจาก flash ด้วย as 2  (อ่าน 154 ครั้ง)

ออฟไลน์ toeykittiya

  • เด็กเตรียมอนุบาล
  • *
  • กระทู้: 5
คืออยากทราบวิธีทำเกมลากวาง และมีการตรวจเช็คว่าถูกไหมนะคะ ใครมีคำแนะนำบ้างคะ คือไม่รู้จะเริ่มต้นอย่างไรนะคะ

ออฟไลน์ thora

  • เด็กอนุบาลสามกำลังโต
  • ****
  • กระทู้: 435
มีหลายวิธีมากครับ เอาแบบเข้าใจง่ายๆ แล้วไปวางแผนเองก็ได้ เช่น แค่เช็ควางตรงจากตำแหน่ง x,y ก็ได้แล้วครับ การลากก็ให้วัตถุไล่ตาม x,y ของเม้า
ควรวางลำดับความคิดเราก่อน ก่อนที่จะลงมือทำ

ออฟไลน์ doomday_nok

  • Administrator
  • เด็กอนุบาลสามกำลังโต
  • *****
  • กระทู้: 263
  • หมูอ้วนแมวอ้วน
    • DMDGC
Adobe Help
โค๊ด: [Select]
var pic_mcl:MovieClipLoader = new MovieClipLoader();
pic_mcl.loadClip("http://www.helpexamples.com/flash/images/image1.jpg",
    this.createEmptyMovieClip("pic_mc", this.getNextHighestDepth()));
var listenerObject:Object = new Object();
listenerObject.onLoadInit = function(target_mc) {
    target_mc.onPress = function() {
    startDrag(this);
    };
    target_mc.onRelease = function() {
    stopDrag();
    };
};
pic_mcl.addListener(listenerObject);
Copyright 2007-2015,DMDGC

ออฟไลน์ toeykittiya

  • เด็กเตรียมอนุบาล
  • *
  • กระทู้: 5
คือทำด้วย as2 นะคะ

ออฟไลน์ sukjai

  • น้องอนุบาลสองทับสาม
  • ***
  • กระทู้: 227
ตามที่คุณ   thora ได้แนะนำไว้ หรือตามแบบที่คุณ  doomday_nok ได้แนะนำไว้ข้างต้นนั้น ก็เป็นแนวทาง และเป็นตัวอย่างที่ถูกต้องและดีอยู่แล้วนะครับ  เพียงแต่ผมก็มีอีกแนวทางหนึ่งที่จะแนะนำเพิ่มเติม  ไม่ได้หมายความว่ามันจะดีกว่าที่ทั้ง 2 ท่านข้างต้นได้แนะนำไว้ก่อนหน้าแต่อย่างใด ผมเพียงนำเสนอไว้เผื่อเป็นอีกทางเลือกหนึ่งเท่านั้น

หลักการทำงานของโปรแกรมแบบคราว ๆ (ในแบบพื้นฐาน ของผม) ก็น่าจะมีประมาณว่า มีตัว MovieClip 2 ตัว  ตัวแรกเป็นตัวที่ให้คลิกลากไปวาง  ตัวที่สอง เป็นตัวเป้าหมายที่จะต้องนำตัว MovieClip ตัวแรกไปวาง  เมื่อว่างเสร็จ ก็มีการตรวจสอบ ว่าได้ว่างไว้ ณ ตำแหน่งเป้าหมายถูกต้องหรือไม่ อย่างไร
 สิ่งที่จะต้องทำคือ สร้าง MovieClip ขึ้นมา 2 ตัว ในที่นี้ผมให้ชื่อว่า  mc1 และ mc2 ก็แล้วกันนะครับ  mc1  ก็คือ ตัวเลือกของคำตอบ ที่เราจะต้องนำไปวางไว้ในช่องคำตอบ  mc2 ก็คือ ตำแหน่งเป้าหมายที่เราต้องการให้นำตัว mc1 ไปวางไว้นั้นเอง

คราวนี้ก็มาถึงลำดับการสร้างครับ
ขั้นตอนที่ 1 
ให้ไปที่ keyframe แรก แล้วให้สร้างตัว mc1 ขึ้นมา วางไว้บน stage  (วิธีการสร้าง MovieClip อันนี้ผมไม่ขออธิบายนะครับ)  เมื่อได้ตัว mc1 เรียบร้อยแล้ว ก็ทำการกำหนดชื่อในช่อง Instance Name ให้เรียบร้อย  จากนั้นเราก็จะมาเริ่มต้นด้วยการที่จะทำให้ผู้เล่นสามารถคลิกเมาส์ที่ตัว mc1  แล้วสามารถลากตัว mc1 ไปมาได้ ( คลิกที่ stage จากนั้นกดปุ่ม F9 เพื่อทำการเรียกหน้าต่างสำหรับการเขียนสคริปขึ้นมา ในที่นี้เราจะเขียนสคริปใส่ไว้ที่ keyframe นะครับ ไม่ได้เขียนไว้ภายในตัว MovieClip ) ให้ทำการ copy สคริปด้านล่างไปใส่ จากนั้นกดปุ่ม Ctrl + Enter เพื่อทำการทดสอบ

โค๊ด: [Select]
mc1.onPress = function() {
this.startDrag();
};

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

ขั้นตอนที่ 2
ขั้นตอนนี้จะเป็นการทำให้ตัว mc1 หยุดอยู่กับที่ ณ ตำแหน่งที่เราปล่อยเมาส์  ให้ทำการเรียกหน้าต่างการเขียนสคริปขึ้นมา จากนั้น copy สคริปด้านล่างนี้ไปใส่ต่อท้ายสริปก่อนหน้านี้ จากนั้นก็ กดปุ่ม Ctrl + Enter เพื่อทำการทดสอบ

โค๊ด: [Select]
mc1.onRelease = function() {
this.stopDrag();
};

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

ขั้นตอนที่ 3
ขั้นตอนนี้เราจะมาสร้างคู่ให้ตัว mc1 กัน โดยให้ทำการสร้าง MovieClip ขึ้นมาและนำมาวางไว้บน stage และกำหนดชื่อในช่อง Instance Name ว่า mc2  แค่นี้เราก็ได้คู่ของตัว mc1 แล้วละ  จากนั้นให้ลอง กดปุ่ม Ctrl + Enter เพื่อทำการทดสอบ ลากตัว mc1 ไปที่ตัว mc2 แล้วปล่อยดูสิ ก็จะพบว่าเกิดปัญหาแล้วละ  พอลากตัว mc1 ไปวางไว้ที่ตัว mc2 เท่านั้นแหละ ตัว mc1 กลับโดนตัว mc2 บังจนไม่สามารถมองเห็นได้ซะงั้น   ดังนั้นเราก็จะมาปรับแก้สริปในขั้นตอนที่ 1 โดยจะปรับเพิ่มสคริปนี้เพิ่มเข้าไป  this.swapDepths(getNextHighestDepth()); เพื่อแก้ไขปัญหาดังกว่า หน้าตาสคริปเมื่อทำการแก้ไขแล้วก็จะได้ประมาณนี้ครับ

โค๊ด: [Select]
mc1.onPress = function() {
this.swapDepths(getNextHighestDepth());
this.startDrag();
};

จากนั้นก็ กดปุ่ม Ctrl + Enter เพื่อทำการทดสอบ ก็จะพบว่าคลิกตัว mc1 ลากไป ลากมาได้ เมื่อปล่อยเมาส์  mc1 ก็หยุดเคลื่อนที่  และเมื่อลากไปวางทับที่ตัว mc2 ก็ไม่ถูกตัว mc2 บังแล้วละ แต่.......ก็  มีปัญหาอีกคือ ไหนละ การตรวจสอบคำตอบการลากวางว่าได้ลากมาวางไว้ถูกต้องแล้วหรือยัง?

ขั้นตอนที่ 4 ขั้นตอนสุดท้าย
ขั้นตอนนี้จะเป็นการตรวจสอบว่า ได้ทำการลาก mc1 ไปเจอคู่แล้วหรือยัง  ในส่วนนี้จะแบ่งย่อยออกเป็น 2 ขั้นตอนคือ
ขั้นตอนที่ 4.1
การปรับแก้สคริปในขั้นตอนที่  2 โดยหลังจากที่นอกจากเมื่อผู้ใช้ไม่คลิกที่ตัว mc1  แล้วนอกจากจะให้ตัว mc1 หยุดอยู่กับที่แล้ว  ให้มีการเรียกใช้ฟังก์ชั่นในการตรวจสอบด้วยว่าวางไว้ในตำแหน่งเป้าหมายที่ต้องการหรือไม่ด้วย โดยสคริปที่ปรับแก้แล้วก็จะได้เป็นดังนี้

โค๊ด: [Select]
mc1.onRelease = function() {
this.stopDrag();
checkAns(this);
};

ขั้นตอนที่ 4.2
ให้ทำการเรียกหน้าต่างสำหรับเขียนสคริปขึ้นมา จากนั้น  copy สคิปด้านล่างนี้ไปใส่ ไว้ต่อจากสคริปในขั้นตอนที่  2 

โค๊ด: [Select]
function checkAns(e:MovieClip) {
if (e._droptarget == "/mc2") {
trace("เก่งมากครับ");
} else {
trace("ลองใหม่อีกครั้งนะครับ");
}
}


แล้วจากนั้นให้ลอง กดปุ่ม Ctrl + Enter เพื่อทำการทดสอบ หากไม่มีอะไรผิดพลาด เมื่อลากตัว mc1 ไปวางทับที่ตัว mc2 ก็จะมีข้อความแสดงออกมาทางหน้าต่าง Output ว่า เก่งมากครับ ปรากฏขึ้น  แต่หากวางตัว mc1 ไม่ตรงตำแหน่งเป้าหมายก็จะแสดงข้อความว่า   ลองใหม่อีกครั้งนะครับ  ออกมาทางหน้าต่าง Output

 สรุปได้ว่า ณ เวลานี้ เกมลากวางจับคู่ก็สามารถเป็นรูป เป็นร่างเป็นที่เรียบร้อยแล้วละ  แต่.....  ถ้าเราอยากจะทำให้มันดีขึ้นกว่านี้อีกนิดได้ไหมนะ ยกตัวอย่างเช่น ถ้าลากไปวางแบบมั่ว ๆ ไม่ทับกับตัว mc2 ก็ให้มันกระเด้งกลับมาที่เดิม อะไรประมาณนี้จะดีไหมน้อ

ขั้นตอนการตกแต่งเพิ่มเติม
ในขั้นตนอนี้ เราจะสั่งให้  mc1 กระเด้งกลับมาที่เดิมเมื่อลากไปวางมั่ว ๆ ลากไปวางแล้วไม่พบคู่ หรือเป้าหมายโดยให้ทำการปรับแก้สคริปโดยเพิ่ม  ซึ่งจะแบ่งออกเป็น 2 ขั้นตอนย่อย ดังนี้
ขั้นแรก
จะแก้สคริปในขั้นตอนที่ 1 คือจะเพิ่มตัวแปรสำหรับการจำค่าตำแหน่ง x  และ y ของตัว mc1 เองเอาไว้ เพื่อที่จะได้เอามากำหนดตำแหน่งแกน x และ y ของตัว mc1 คืนให้กับตัว mc1 เมื่อวางไม่ถูกเป้าหมายนั้นเอง  โดยจะทำการปรับแก้สคริปในขั้นตอนที่ 1 เป็นดังนี้

โค๊ด: [Select]
mc1.onPress = function() {
this.swapDepths(getNextHighestDepth());
this.startDrag();
this.xx = this._x;
this.yy = this._y;
};

ขั้นตอนที่สอง
ให้ไปปรับแก้  ขั้นตอนที่ 4 โดยปรับแก้เป็น  ดังข้างล่างนี้ครับ

โค๊ด: [Select]
function checkAns(e:MovieClip) {
if (e._droptarget == "/mc2") {
trace("เก่งมากครับ");
} else {
trace("ลองใหม่อีกครั้งนะครับ");
e._x = e.xx;
e._y = e.yy;
}
}

จากนั้นก็ กดปุ่ม Ctrl + Enter เพื่อทำการทดสอบ ก็จะพบว่าคลิกตัว mc1 ลากไป ลากมาได้ เมื่อปล่อยเมาส์  mc1 ก็หยุดเคลื่อนที่ และหากลากไปวาง ณ ตำแหน่งเป้าหมายก็จะให้แสดงคำว่า  เก่งมากครับ  แต่หากลากไปวาง ณ ตำแหน่งอื่นที่ไม่ตรงกับตำแหน่งเป้าหมายก็จะให้แสดงคำว่า  ลองใหม่อีกครั้งนะครับ ออกมาทางหน้าต่าง Output  นอกจากนั้นแล้ว ตัว mc1 ก็จะกระเด้งกลับมายังจุดเดิมด้วย

สรุป ตั้งแต่ต้นจนจบ สคริปก็จะมีประมาณนี้

โค๊ด: [Select]
mc1.onPress = function() {
this.swapDepths(getNextHighestDepth());
this.startDrag();
this.xx = this._x;
this.yy = this._y;
};
mc1.onRelease = function() {
this.stopDrag();
checkAns(this);
};
function checkAns(e:MovieClip) {
if (e._droptarget == "/mc2") {
trace("เก่งมากครับ");
} else {
trace("ลองใหม่อีกครั้งนะครับ");
e._x = e.xx;
e._y = e.yy;
}
}

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

ปล.  คุณสามารถแก้ไขชื่อตัว MovieClip เป็นชื่อที่คุณกำหนดได้เองไม่จำเป็นต้องใช้ชื่อว่า  mc1 และ mc2 หรือไม่จำเป็นต้องกำหนดตัวแปรเป็น  xx หรือ yy ตามที่ผมเขียนไว้ก็ได้ แต่หากเปลี่ยนก็ต้องไล่แก้ชื่อให้เป็นชื่อที่แก้ให้ตรงกันให้หมดด้วยนะครับ ยกตัวอย่างเช่น เปลี่ยนชื่อ mc1 เป็น ball คุณก็จะต้องแก้ทุกจุดที่ผมเขียนว่า mc1 เป็น ball ให้หมดด้วยนะครับ มิเช่นนั้นแล้วก็จะเกิด Error เอาได้ครับ

ออฟไลน์ thora

  • เด็กอนุบาลสามกำลังโต
  • ****
  • กระทู้: 435
 :12: เยี่ยมเลยครับ คุณ sukjai
ผมก็คิดอยู่ว่าจะอธิบายแบบไหนให้มือใหม่เข้าใจว่าต้องเริ่มวางแผนและลำดับการคิดยังไง
และจะอธิบายยังไงให้เข้าใจการวางแผนกำหนดการทำงานของแต่ละส่วน
เพราะส่วนตัวผมอยากให้คนทำมีความเข้าใจด้วย เวลาแก้จะสามารถแก้ด้วยตัวเองได้
ได้คุณ sukjai สละเวลาอธิบายได้ละเอียดขนาดนี้คิดว่าเป็นประโยชน์แน่นอนครับ
 :12: :12: :12:
« แก้ไขครั้งสุดท้าย: 23 มี.ค. 17, 02:59:12 โดย thora »
ควรวางลำดับความคิดเราก่อน ก่อนที่จะลงมือทำ

ออฟไลน์ toeykittiya

  • เด็กเตรียมอนุบาล
  • *
  • กระทู้: 5
ขอบคุณพี่ๆทุกคนมากๆนะคะ  :46: สำหรับคำแนะนำดีๆคะ