Áp dụng những kiến thức đã thu lượm được qua các bài hướng dẫn cách làm hình di động bằng javaScript code đã posted trong Blogger nầy ,chúng ta có thể tự tạo ra trò chơi gọi là game.
Bảng html trên là một thí dụ về game làm cho 3 vật chuyển động theo chiều hướng khác nhau.
Lấy screenshot của 3 hình vẽ kèm trong bảng html rồi tồn trử trong My documents với 3 tên : saucer1.gif, saucer2.gif và chim.gif
1-Nếu thay thế saucer1 bằng quả banh ball cho rơi theo đường parabol và viết lại script như sau thì quả banh sẽ rơi trúng vào saucer2 và con chim đang di chuyển.
function doMove(ID,L,T){
var object1=document.getElementById(ID);
object1.style.left=L+'px';
object1.style.top=T+'px';
var object2=document.getElementById('saucer2');
object2.style.top=Math.floor(Math.random ()*60)
var object3=document.getElementById('chim');
object3.style.left=Math.floor(Math.random()*80)+10;}
var speed=50;
var i=0 ;
function changeSpeed(){
x=0.4*i*speed;
y=2.8*i*i
doMove('ball',x,y) ;
i++ ;
if(i>=10){ i=0 ;} }
function stop(){
if(i=0) ; clearInterval(t) }
2-Nếu đem tốc độ velocity và gia tốc acceleration xử dụng vào sự chuyển động như script dưới đây thi thì tọa độ di chuyển sẽ tiếp tục tăng dần chứ không còn ở trong giới hạn cố định.Muốn dừng lại phải click chữ STOP.
function doMove(ID,L){
var object1=document.getElementById(ID);
object1.style.left=L+'px';
var object2=document.getElementById('saucer2');
object2.style.left=parseInt(object2.style.left)+1+'px';
var object3=document.getElementById('chim');
object3.style.left=Math.floor(Math.random()*20); }
var veloc=60;
var accel=1 ;
var i=0 ;
function changeVeloc(){
veloc=parseInt(veloc)+parseInt(accel); // velocity = velocity+acceleration
x=0.2*i*veloc ;
doMove('saucer1',x) ;
i++ ;
if(i>=12){ i=0 ;} }
function stop(){
