JAVASCRIPT LÀM HÌNH DI ĐỘNG TRÊN COMPUTER

HƯỚNG DẪN CÁCH LÀM CHO HÌNH CHẠY NHẢY TRÊN COMPUTER
Updated ngày 14-NOV-2012.
Cái xe muốn chạy phải có chú hay bác tài xế. Hình vẽ hay  hình chụp muốn di chuyển cần phải có JavaScript function hay SVG-SMIL.
JavaScript rất phức tạp, cần phải học hơi lâu.Vậy nếu chúng ta chưa biết gì về JavaScript nhưng muốn làm hình vẽ chuyển động thì xử dụng SVG-SMIL rất đơn giản,rất dễ hiểu và dễ nhớ

Xem bài "SIMPLEST EXAMPLE OF JAVASCRIPT ANIMATION  COMPARED WITH ANIMATION BY SVG-SMIL "  posted ngày 08-Nov-2012 sẽ thấy rõ.

Để tự mình có thể làm trò chơi hình chạy nhaỷ trên computer bài nầy chỉ dẫn nguyên lý ngắn gọn theo kinh nghiệm cá nhân chứ hổng theo sách vở dài dòng khi nhìn vào thì ngại ngùng.

Nguyên lý ngắn gọn

Muốn làm cho hình chạy nhaỷ trên computer cần phải dùng codes của JavaScript kết hợp vớ́i codes của HTML. Vì JavaScript hoạt động với Browser có sẵn trong computer nên JavaScript được gọi là Client Side Script.Muốn tìm hiểu sâu về những codes đó thì mở trang Web có tên là W3-School.com

 Làm hình chuyển động gồm có hai phần.

Phân đầu làm cho hình xuất hiện trên màn ảnh và phần chót làm cho hình chuyển động theo ý muốn.

 Sau khi hình xuất hiện muốn chuyển động thì phải xữ dụng những cái goị là function viết ký hiệu như sau function tên( ).Ở đây chúng ta chọn cái tên  function doMove() Hiểu function là nhiệm vụ hay là hàm số đều đúng cả vì đứng liền sau chữ function có một lô code để cho function theo đó mà thi hành mệnh lệnh.

Thí dụ ra lệnh cho hình chạy từ trái qua phải thì viết function như sau :

function doMove( ){ img.style.left=parseInt(img.style.left)+1+’px’ ; }

Nghĩa của mệnh lệnh nầy là gì sẽ cắt nghĩa phần sau.Biết như vậy khi hình đang chạy muốn nó dừng lại phải

có một function goị là function stop()

Function chỉ khởi sự hoạt động làm cho hình di chuyển khi nó được " called ".
Muốn call function doMove() phải dùng setInterval(doMove,delay time) hoặc 
setTimeout(doMove,delay time).
Còn function preMove() dùng để kết hợp với nút START.Nghĩa là khi click nút START thì function doMove()  mới được called và khởi động tức thì sau khi chờ đợi thời gian delay 20 milliseconds.
Ở đây vì chúng ta dùng setInterval() nên function doMove() phải chờ đợi 20 milliseconds mới làm hình di động, rồi phải chờ đợi 20 milliseconds nữa mới làm hình di động và tiếp tục giống như vậy cho đến khi nào chúng ta click chữ STOP.Waits 20 ms / runs,wait 20 ms / runs, waits 20 ms  /runs....and so on

Khi nào hiểu rõ nguyên lý làm hình di động rồi thì trong bảng JavaScript code trên chúng ta có thể viết rút ngắn chỉ còn lại một function doMove() mà thôi.

parseInt() là Math function của javaScript có nhiệm vụ tách ra từ ( img.style.top) một trị số đo lường theo đơn vị pixel nhưng chỉ cho output là trị số mà thôi và lọai bỏ đơn vị pixel.Thí dụ nếu (object.style.left ) có chứa 20px thì parseInt() chỉ cho ra con sô 20 mà thôi.

Còn +1+'px' nghĩa là increment 1 pixel.Dấu cộng trước chữ 'px' có nghĩa là nối kết mà tiếng Anh gọi là gluing hay concatenate.Hình di chuyển được là nhờ increment.Còn parseInt() chỉ trích ra một con số nào đó có trong img.style.top

Có thể tăng increment tùy ý.Nếu thiếu increment nầy thì quả banh không chuyển động.

Dưới đây là JavaScript căn bản làm trái banh chuyển động lên xuống random khi click nút Start.Muốn dừng lại thì Click nút Stop.

JavaScript nầy không dùng function stop( ) nhưng tạo nút Stop theo cách khác đơn giản hơn.

Phải viết nhản hiệu var object để làm một chỗ trong memory rồi dùng document.getElementById() đem hình chứa vào đó.

Có nhiều cách viết JavaScript làm hình chuyển động nhưng trong bài nầy vì để dể hiểu khi chưa quen với JavaScript, chúng ta chọn cách xử dụng parseInt() và Math.floor(Math.random()*x).

updated Oct-05-2014
Làm chuyển động một dĩa bay gọi là "saucer"

Với phương pháp nầy,chúng ta chỉ dùng một function doMove()
mà thôi; loc+=1 nghĩa là location tăng dần dần 1 pixel cho đến khi nào đạt tới 250 pixels thì saucer quay trở lại vị trí 0 pixel theo chúng ta muốn.

Đây là hình vẽ saucer.Quý bạn làm screenshot hình nầy rồi chứa trong My Documents với cái tên là saucer1.gif

Heduong/2011