JAVASCRIPT LÀM QUẢ BANH DI CHUYỂN THEO ĐƯỜNG PARABOL
Lưu ý. Khi banh đang chạy, click STOP banh sẽ ngừng lại.
Sau khi STOP nếu Click START nữa thì banh lại di chuyển tiếp từ chỗ đã ngừng lại.
Trong khi banh đang di chuyển nếu click START thì banh sẽ trở thành bouncing xuống rồi lên không ngừng và click nút STOP không hiệu quả
Phần script rất quan trọng nên cần quan sát kỷ sau đây khi chép vào notepad.
function diChuyen(ID,L,T){
var object=document.getElementById(ID);
object.style.left=L+'px';
object.style.top=T+'px'; } // Quả banh cần phải có 3 parameters là ID,L,T.
var i=0
function tangDan(){
x=100+12*i; // trị số của x tăng dần theo i. i means increment
y=20+1.2*i*i // hàm số parabol y=x*x.Khi x tăng i thì y tăng i*i
diChuyen('banh',x,y) // passing values banh,x,y to parameters ID,L,T
i=i+1; // i=i+1 nghĩa là i++
if(i>15){clearInterval(t);i=0}
}
Với script trên,quả banh di chuyển đi xuống theo đường parabol.
Thay đổi dấu cộng bằng dấu trừ của 1.2*i*i rồi viết y=300 -1.2*i*i thi quả banh sẽ di chuyển đi lên theo đường parabol .
Nếu không có chữ clearInterval(t) thì quả banh sẽ bouncing không ngừng.
Quý bạn nên học sâu script code nầy vì đó là nền tảng giúp chúng ta có thể tạo bouncing cho quả banh theo những chiều tuỳ ý chúng ta.
Thí dụ nếu chúng ta xóa bỏ parameter L và cũng phải xóa bỏ luôn tất cả những gì có liên hệ đến L rồi viết lại như sau thì sẽ có quả banh bouncing theo chiều thẳng đứng y.
function diChuyen(ID,T){
var object=document.getElementById(ID);
object.style.top=T+'px'; }
var i=0
function tangDan(){
y=300-5*i*i
diChuyen('banh',y)
i=i+1;
if(i>5){i=0;}
Nếu muốn có bouncing theo chiều ngang x thì xóa bỏ parameter T và những gì liên hệ đến T
Những bài kế tiếp sẽ hướng dẫn cách làm quả banh chạy theo đường ellipse, đường vòng tròn, đường cong exponential,đường gợn sóng gọi là sine curve... rất hay ! Cần nên hiểu rõ bài nầy thì sẽ viết code cho những bài đó rất dễ dàng.
