ทำเกมแทปเลตแบบมีผู้เล่นหลายคน (Event TOUCH_TAP จิ้มพร้อมกัน)

Share the joy
  •  
  •  
  •  
  •  
  •  

การใช้ Event นี้ก็เพื่อต้องการทำเกมที่มีผู้เล่น 2 คนขึ้นไป แย่งหรือช่วยกันจิ้มบนแทปเลต ซึ่งเกมจะต้องทำงานทุกนิ้วที่จิ้มลงมา เพราะฉะนั้นเหตุการณ์ที่เกิดในช่วงเวลาหนึ่งอาจมีจำนวน 2 เหตุการณ์ขึ้นไป ซึ่งปกติเมื่อเราทำเกมที่รับนิ้วจิ้ม อาจจะเขียนเป็น _mc.addEventListener(MouseEvent.CLICK, doClick); การเขียนแบบนี้เกมของเราจะรับได้เพียงจิ้ม(นิ้วเดียว) 1 ครั้งเท่านั้น นิ้วอื่นที่จิ้มลงมาจะไม่มีผลการทำงาน เราจึงต้องเป็นการใช้ Event ซะใหม่เป็น Multitouch.inputMode=MultitouchInputMode.TOUCH_POINT; _mc.addEventListener(TouchEvent.TOUCH_TAP, taphandler);   เท่านี้ก็สามารถทำเกมให้ผู้เล่นได้เล่นร่วมกันได้อย่างเมามันแล้วครับ ตัวอย่างโค๊ดแบบเต็มๆ Multitouch.inputMode=MultitouchInputMode.TOUCH_POINT; var mySprite:Sprite = new Sprite(); var myTextField:TextField = new TextField(); var count:uint = 0; mySprite.graphics.beginFill(0x336699); mySprite.graphics.drawRect(0,0,500,400); addChild(mySprite); mySprite.addEventListener(TouchEvent.TOUCH_TAP, taphandler); function taphandler(e:TouchEvent): void { count++; myTextField.text = “tapped…

Details

ฟรี jQuery ปลั๊กอิน slider full width

Share the joy
  •  
  •  
  •  
  •  
  •  

ปลั๊กอินอันนี้จะเป็น Slide เลื่อนมาจากสุดหน้าจอนะครับ สามารถเพิ่มรูปสไลด์ได้ไม่จำกัด สารมารถเข้าไปปรับแต่งความเร็ว หรือ ศึกษา เอาในโค๊ดได้เลยครับ ตัวอย่าง Slider  วิธีการใช้ ดาวโหลดปลั๊กอิน  <script type=”text/javascript” src=”../jquery-1.8.3.js”></script> <script type=”text/javascript” src=”slideLoopFullwidth.js”></script> JavaScript $(function(){ $(‘.bigBannerArea’).slideLoopFullwidth(); })  HTML <div class=”bigBannerIn”> <div class=”bigBannerArea”> <ul class=”bigBannerAllPic”> <li class=”first”><img src=”bg_top_bigbanner01.png” width=”998″ height=”323″ alt=””></li> <li ><img src=”bg_top_bigbanner02.png” width=”998″ height=”323″ alt=””></li> <li ><img src=”bg_top_bigbanner03.png” width=”998″ height=”323″ alt=””></li> <li class=”last”><img src=”bg_top_bigbanner04.png” width=”998″ height=”323″ alt=””></li> </ul> <a…

Details

ตรวจจับ Event เมื่อ resize ขนาดบราวเซอร์เสร็จ

ปัจุบันต้องเขียนเว็บที่เป็น Responsive มากขึ้นเรื่อยๆ ต้องจัดการกับขนาดหน้าจอหลายแบบจึงจำเป็นต้องเขียนสคริปให้มีการตรวจสอบขนาดหน้าจอ ซึ่งใน jQuery จะมีการใช้อีเวนท์ $(window).resize ซึ่งการทำงานั้นจะทำงานตลอดในขณะที่เกิดการเปลี่ยนขนาดบราวเซอร์ ดังนั้นคำสั่งจะทำงานถี่ยิบหลายครั้งมาก อาจจะเกิดปัญหาสคริปอืด หรือ พังได้

เราจึงหาวิธีที่จะสั่งงานโปรแกรมเพียงครั้งเดียวหลังจากทำการ resize เสร็จ

$(window).resize(function() {
  clearTimeout($.data(this, 'resizeTimer'));
  $.data(this, 'resizeTimer', setTimeout(function() {
    //do something
    alert("Finish resize");
  }, 200));
});

โค๊ดข้างต้นจึงช่วยให้ทำงานเพียงครั้งเดียวหลังจากเสร็จ โดยอาจจะหาขนาดของบราวเซอร์ที่ได้เพื่อไปคำนวณใช้ในการเขียนโปรแกรมอื่นๆต่อไป

ปลั๊กสามตา คือ power strips

วันนี้เกิดมีพนักงานใหม่ขึ้นมา แต่คอมพ์เค้าดันอยู่ไกลเสียบปลั๊กไม่ถึง ก็นึกคำศัพท์เกียวกับปลั๊กไฟไม่ออก เลยมาลองหาใน Google  ดู มีหลายคำที่ใช้ได้ครับ

เช่น power strips, cable extension, surge protector อันไหนจำง่ายๆ ก็ลองจำไปสักอันครับ

สอนทำเกมสื่อการสอนเบื้องต้น ตรวจสอบการชน (ต่อจากลากวาง)

Share the joy
  •  
  •  
  •  
  •  
  •  

จากบทความที่แล้ว(ลากวาง) เราได้เขียนสคริปการลากวางแล้วเรียบร้อย แต่เกมจะสมบูรณ์ได้ต้องทำการตรวจสอบด้วยว่าวัตถุนั้นวางถูกที่ถูกทางหรือไม่   ตัวอย่าง จากภาพผมต้องการจะลากหมาลงกล่องหมายเลข2 (ถ้าลากลงกล่องอื่นถือว่าผิด) ถ้าถูกก็ให้หมาอยู่ในกล่องนั้น ถ้าผิดให้หมากลับไปที่เดิม 1. ทำกล่องเป็น Movie clip และตั้งชื่อแต่ละกล่อง ตามลำดับ สมมุติว่าชื่อ box1, box2, box3   2. เขียนสคริปควบคุมการทำงาน เมื่อกดลงเมาส์บนหมา mhanoi.addEventListener(MouseEvent.MOUSE_DOWN,mDown); mhanoi.addEventListener(MouseEvent.MOUSE_UP,mUp); function mDown (e:MouseEvent) { var _me = e.target; //สร้างตัวแปรรับค่า Movie clip หมาน้อย _me.oldX = _me.x; // จำค่าตำแหน่ง x y ไว้ เมื่อลากวางผิดจะจำค่านี้มาใช้ _me.oldY = _me.y; _me.startDrag(); } 3. เขียนสคริปควบคุมเมื่อปล่อยเมาส์ function mUp…

Details

สอนทำเกมสื่อการสอนเบื้องต้น ลากวางวัตถุ

Share the joy
  •  
  •  
  •  
  •  
  •  

การทำเกมบนแทปเลตผู้เล่นจะใช้นิ้วในการสัมผัส และสิ่งที่ใช้บ่อยที่สุดคือการลากวางวัตถุ ในบทความนี้เราเริ่มด้วยสคริปลากวางง่ายๆกันก่อน และบทความต่อไปเราจะมาตรวจสอบกันว่า วัตถุที่วางนั้นถูกที่หรือไม่ 1. สร้าง Movie Clip ที่ใช้สำหรับการลากขึ้นมา การสร้าง Movie Clip ขอไม่อธิบายนะครับคิดว่าทุกคนน่าจะสร้างเป็น 2. ตั้งชื่อให้กับ Movie Clip เราจะสั่งงานมันก็ควรตั้งชื่อให้มันหน่อยครับ ไม่งั้นจะเรียกใช้งานมันไม่ถูก ผมตั้งชื่อให้มันว่าไอ้บัก mhanoi (หมาน้อย) 3. add event สำหรับขั้นตอนนี้ภาษาโปรแกรมจะเรียกว่าการ add event  หรือการกำหนดเหตุการณ์ให้กับวัตถุ mhanoi.addEventListener(MouseEvent.MOUSE_DOWN, doDrag); 4. กำหนด function การทำงานของ doDrag function doDrag(e:MouseEvent){ e.tartget.startDrag(); } ใครไม่เข้าใจโค๊ดด้านบนให้ลองจินตนาการ ดังนี้ครับ ผม : เฮ่ยไอ้บักหมาน้อย มานี่หน่อยดิ๊ mhanoi หมาน้อย : (กระดิกหาง) ผม : ว่างป่าวจะให้ช่วยทำอะไรหน่อย addEventListener หมาน้อย : ว่ามา ผม : เด๋วจะมีคนเอามาเมาส์มาจิ้มที่มึงนะ MouseEvent.MOUSE_DOWN ให้มึงทำตามที่เขียนในกระดาษนี้นะ…

Details
jQuery stop animate

สอน jQuery การใช้ stop() หยุดการสั่งงาน animation ที่ซ้ำซ้อน

เมื่อเราสั่งอีเวนท์เหตุกการณ์ใดเหตุการณ์หนึ่ง ให้อิลีเมนท์ชิ้นหนึ่งทำการอนิเมต ในขณะที่อนิเมตยังไม่เสร็จนั้น หากมีการสั่งงานมาซ้ำจะทำให้มีปัญหาเกิดบัก(Bug)ขึ้นได้

วิธีการแก้ปัญหาให้ใส่คำสั่ง stop() ก่อนการสั่งอนิเมต

_myObj.stop().animate({“border-width”:15,easing: ‘easeIn’},100)

jQuery panorama

สอน jQuery แพนภาพพาโนรามา หลายมิติ

Share the joy
  •  
  •  
  •  
  •  
  •  

การทำพาโนรามาแบบซ้อนเลเยอร์  เมื่อเลื่อนเมาส์แบคกกราวน์จะเลื่อนตาม ความน่าสนใจคือ แต่ละภาพที่เป็นเลเยอร์จะมีความเร็วในการเคลื่อนไหวไม่เท่ากัน การพิจรณาว่าภาพไหนเลื่อนเร็ว ภาพไหนเรื่อนช้า ก็ให้ลองนึกว่าเรานั่งอยู่บนรถที่กำลังวิ่ง แล้วมองออกไปนอกหน้าต่าง จะสังเกตุเห็นว่าวิวที่อยู่ไกลๆจะเคลื่อนไหวช้า ส่วนที่อยู่ใกล้จะเคลื่อนไหวเร็ว ผลที่ออกมาจึงได้ตามตัวอย่าง  ดูตัวอย่าง จากตัวอย่างจะเห็นว่าวัตถุมี 2 ลักษณะคือ ภาพแบคกราวน์ที่มีลักษณะยาวกว่าขอบเขตหน้าจอ ภาพคน ตัวการ์ตูน ลักษณะไม่เกินแบคกราว เนื่องจากวัตถุทั้งสองแบบมีกลไกการทำงานและสูตรคำนวณที่ต่างกันพอสมควร เราจึงแยกการเขียนเป็น 2 ปลั๊กอิน กำหนด CSS ของทั้งสองแบบ /*กำหนดตัวคลุมทั้งหมด*/ .wrapAll{width:1500px; margin:50px auto; height:500px; position:relative;} /*แบบแบคกราวยาว*/ .pic01Wrap{ width:100%; margin:0 auto; position:absolute; top:0; left:0; overflow:hidden;} .pic02Wrap{ width:100%; margin:0 auto; position:absolute; top:200px; left:0; overflow:hidden;} /*แบบตัวการ์ตูน*/ .cowboy{ position:absolute; top:210px; left:260px;} .horse{ position:absolute;…

Details
comment html code

ปลั๊กอิน สำหรับใส่ Comment ให้ HTML อย่างรวดเร็ว

การคอมเมนท์โค๊ดโปรแกรม อาจดูไม่จำเป็นต่อการแสดงผล แต่มีความสำคัญเมื่อต้องกลับมาแก้โค๊ดในภายหลัง หรือ เมื่อคนอื่นเข้ามาแก้ไขงานต่อจากเรา และที่สำคัญในโค๊ด HTML ที่ยาวจนล้นหน้าจอ เช่น ตัวอย่างเราเปิดแท็ก <div class=”wrapContent”> และในอีลีเมนท์นี้ก็มี div ลูกอยู่มากมายจนล้น 1 หน้าจอ และก็มีแท็กปิด </div> อยู่เป็นจำนวนมาก ทำให้ยากที่จะใช้สายตามองดูว่าอันไหนที่เป็น div ที่ปิดคลากของ wrapContent

เราจึงแก้ปัญหาโดยการคอมเมนท์ที่บรรทัดสุดท้าย เช่น <!– /wrapContent –></div> ไว้ตรงแท็กปิด เพื่อให้ง่ายต่อการค้นหาแท็กปิด

แต่เพื่อความสะดวก ผมจะใช้ปลั๊กอิน ที่ไว้คอมเมนท์อัตโนมัติ ดาวโหลดที่นี่ โดยกำหนด Shortcut ให้กับคำสั่งด้วย โดยหลักการมันจะคอมเมนท์ด้วยใส่ชื่อ คลาส หรือ ไอดี ในการคอมเมนท์