METHODS MAKING OBJECT MOVING
BY JAVASCRIPT.
Với JavaScript,chúng ta có nhiều phương pháp làm hình
chuyển động để có thể tạo ra những trò chơi gọi là games.
Trong bài nầy, tôi giúp quý bạn tìm hiểu những phương pháp
làm một hình di động và nhiều hình di động cùng một lúc.
Quý bạn nếu được Trời cho thông minh hơn, có thể dựa vào
đây để tự tạo cho riêng mình những trò chơi theo ý muốn.Cố nhiên
những trò chơi viết bằng JavaScript sẽ chậm hơn viết bằng C++.
(In JavaScript you can design any games by your imagination, but
they are slower than using language programming C++)
Trong mỗi script :
-Chúng ta cần phải có hình vẽ và cần phải biết cách ấn
định kích thước,vị trí của hình vẽ để hình xuất hiện theo ý muốn.
Quý bạn nên học cách dùng Microsoft
Word để tự vẽ hình theo ý
muốn.Rất dễ và rất dễ nếu chịu
khó hay kiên nhẩn.
- Phải biết cách viết để function tạo ra chuyển động có
thể tiếp cận (access ) với hình vẽ.
- Phải biết cách xử dụng increment để hình vẽ chuyển
động.
- Phải biết cách làm cho hình vẽ bouncing nghĩa là hình vẽ
trở về vị trí mà chúng ta muốn rồi bắt đầu di chuyển trở lại và tiếp tục
như vậy cho đến chúng ta muốn chuyển động dừng lại.
I-LÀM MỘT HÌNH DI
ĐỘNG ĐƠN GIẢN.
PHƯƠNG PHÁP 1.
Xử dụng loc++ gọi
là increment làm hình chuyển động.
<body>
<img id="ball"
style="position:absolute;left:10;top:150;width:25;height:25;"src="ball2.gif">
<script>
var loc = 0 ;
var obj = document.getElementById("ball");
function doMove(){
loc ++;
obj.style.left = loc ;
if(loc >=250){ loc =
0 }
t =
setTimeout(doMove,20);
}
</script>
<span
onClick="doMove()">START</span>
<span
onClick="clearTimeout(t)">STOP</span>
</body>
PHƯƠNG PHÁP 2. Xử
dụng parseInt() và increment làm hình chuyển
động.
<body>
<img id="ball"
style="position:absolute;left:10;top:150;width:25;height:25;"src="ball2.gif">
<script>
function doMove(){
var obj = document.getElementById("ball");
obj.style.left = parseInt(obj.style.left)+5+"px";
var x = parseInt(obj.style.left);
if(x >= 650){obj.style.left="10px";}
t=setTimeout(doMove,20); }
<span onClick="doMove()">START</span>
<span onClick="clearTimeout(t)">STOP</span>
</body></script>
 |
| Đây là hình quả banh vẽ bằng Microsoft Word rồi lưu trử theo dạng ball2.gif |
HÌNH DI CHUYỂN
THEO TỌA ĐỘ X,Y
<body>
<img id="ball"
style="position:absolute;left:10;top:150;width:25;height:25;"
src="ball2.gif">
<script>
function doMove(){
var
obj=document.getElementById("ball");
var x = parseInt(obj.style.left);
var y = parseInt(obj.style.top);
x = x+1;
y = y+1;
obj.style.left =
x+"px";
obj.style.top =
y+"px";
t=setTimeout(doMove,20);
}
</script>
<span onclick =
"doMove()">START </span>
<span
onClick="clearTimeout(t)">STOP</span>
</body>
GHI CHÚ -CẮT
NGHĨA.
Quan sát 3 thí dụ trên,chúng ta thấy như sau.
-Trước tiên phải làm cho hình xuất hiện có ID và có kích
thước theo ý muốn.
-Tiếp theo phải dùng một phương pháp của DOM là document.getElementById("ball")
để tiếp cận với ID của hình và đăt một tên mới cho hình theo
ý muốn để dành chỗ trong memory.Tên mới do chúng ta tự chọn .Thi dụ ở
đây chúng ta đặt tên là var obj.
-Tiếp theo chúng ta phải ấnh định hình sẽ di chuyển về
chiều hướng nào.Dùng dấu chấm để nối tên của hình mà chúng ta đã đặt tên với chiều hướng di chuyển.
-Khi hình di chuyển thì tạo ra khoảng cách thay đổi theo
thời gian nên chúng ta phải chọn tuỳ thích var x ,var y, var loc, var pos làm khoảng cách
đó.(loc là location, pos là position)
-Dùng increment x++ hoặc x=x+1 thĩ khoảng cách sẽ gia tăng
dần nên tạo ra hình di chuyển.
-Trước khi cho hình di chuyển cần phải ấn định thời gian
tính bằng millisecond theo 2 cách setTimeout() hoặc setInterval().
II-LÀM NHIỀU HÌNH
VẼ DI ĐỘNG CÙNG MỘT LÚC TRÊN NHIỀU QUỶ ĐẠO KHÁC NHAU.
Còn tiếp
Thí dụ 1-
Đơn Giản.
Dùng phương pháp passData() để
đưa 3 data của object vào làm parameters của function
doMove(ID, L, T)
<body>
<img id="ball"
style="position:absolute;left:10;top:150;width:25;height:25;"src="ball2.gif">
<script>
function
doMove(ID,L,T){
var
obj=document.getElementById(ID);
obj.style.left
= L +"px" ;
obj.style.top
= T +"px" ;}
var i=0;
function passData(){
x = 30 +
15*i;
y = 100
+ 10*i
doMove("ball",x,y)// passing 3
data to function doMove
i=i+1;
if(i>15){i=0};}
</script>
<a href="javascript: var t = setInterval('passData()',800)">START</a>
<span onClick="clearInterval(t)">STOP</span>
</body>
Thí dụ 2-
Đưa 6 data của 2 objects vào
làm parameters của function doMove(ID1,L1,T1,ID2,L2,T2) .
Bắn rocket vào phi đạn
ball.
<body>
<img id="ball"
style="position:absolute;left:10;top:150;width:25;height:25;"src="ball2.gif">
<img id="rocket"
style="position:absolute;left:80;top:250;width:25;height:25;"src="rocket1.gif">
<script>
function
doMove(ID1,L1,T1,ID2,L2,T2){
var
obj=document.getElementById(ID1);
obj.style.left
= L1 +"px" ;
obj.style.top
= T1 +"px" ;
var
rocket1=document.getElementById(ID2);
rocket1.style.left = L2 +"px" ;
rocket1.style.top = T2 +"px" ;
}
var i=0;
function
passData(){
x1 = 200
+ 15*i;
y1 = 120
+ 10*i
x2 = 90 +
25*i;
y2 = 70 +
15*i
doMove("ball",x1,y1,"rocket",x2,y2)// passing 6 data to function doMove
i=i+1;
if(i>15){i=0;obj.style.left==0;}
}
function
fireRocket(){
var
obj=document.getElementById("ball");
var
x=parseInt(obj.style.left);
var
y=parseInt(obj.style.top);
var
rocket1=document.getElementById("rocket");
rocket1.style.left
= x;
rocket1.style.top
= y;
clearInterval(t); }
</script>
<a href="javascript: var t =
setInterval('passData()',200)">START</a>
<span
onClick="fireRocket()">STOP</span>
</body>
