Bài nầy hướng dẫn quý bạn phương pháp thực hiện một trò chơi cá Dolphin di động ở biển cả theo kinh nghiệm của người viết tìm cách thu gọn bớt những chi tiết để cho dễ hiểu và rất cần thiết bắt buộc phải có mà thôi.
Trước hết chúng ta mở Microsoft Word vẽ 3 cái khung có kích thước in hệt nhau.
Trong khung số 1,vẽ con cá dolphin và nước biển.
Trong khung số 2, paste con cá ở khung số 1 vào rồi thay đổi tư thế của nó và thay đổi hình thức của sóng biển khác với hình số 1.
Trong khung số 3,paste con cá ở khung số 2 vào rồi thay đổi tư thế của nó và vẽ sóng biển khác với khung số 2.
Chụp hình mỗi khung bằng screenshot và tồn trử ở dạng .GIF trong My document.
Mở My document nếu thấy có xuất hiện dolphin1,dolphin2,dolphin3 thì OK.Nếu liền sau những chữ đó có dính thêm chữ gì khác như .gif thì không được vì Javascript sẽ không họat động.
Quý bạn ai không có kinh nghiệm vẽ thì screenshot 3 bức hình nầy.Khi làm screenshot nhớ loại bỏ khung màu đen bằng cách chọn no color và nhớ ba khung phải có kích thước và hình thể in hệt nhau.
Tìm hiểu bảng html trên.
Trước hết phải cho biết tên,độ lớn và source path của bức hình đầu tiên mà chúng ta muốn khởi hành từ đó bằng cách viết trong tags như sau.
img src=”dolphin1.gif” name=”animate” width=”120” height=”90”
Khi mở Browser thì bức hình nầy sẽ hiện ra ngay.Bỏ hết các phần khác phía dưới nó vẫn xuất hịên.Các phần khác dầu có đầy đủ nhưng thiếu bức hình nầy thì html không hoạt động được.
Còn những bức hình khác kế tiếp chưa xuất hịên nhưng đã có sẵn sàng trong files được preloaded vào cache hay memory như diễn tả dưới đây.
Có 2 scripts.
Trong script thứ nhất chuyển đổi 3 tấm hình dolphin1,dolphin2 và dolphin3 thành 3 image objects theo qui định của JavaScript rồi liền sau đó mỗi hình phải nối với source path riêng của nó theo qui định của DOṂ ( Document Object Model ) bằng cách viết như sau.
var image1=new Image() // declare image object như vậy
image1.src="dolphin1.gif" // nối image object với source path của nó
var image2=new Image()
image2.src="dolphin2.gif"
var image3=new Image()
image3.src="dolphin3.gif"
Mục đích của script nầy là muốn Browser preloades files của 3 tấm hình vào memory hay cache ;khi cần thì hình sẽ xuất hiện ngay không chậm trể.
Muốn hiểu sâu chi tiết nầy, quý bạn nên tìm đọc “ How to declare or create an image object in JavaScript ? “
Trong script thứ hai,chúng ta sẽ làm cho những tấm hình trên di động theo phương pháp gọi là slide show .
Có một công thức quan trọng nhất là.
document.images.animate.src=eval(“image”+step+”.src”)
Phần chữ màu lá cây dùng để tiếp xúc với hình theo src (source path) của nó.
Phần chữ màu tím xử dụng eval( ) để evaluate và execute image,step và .src.Đây là new src source path assigned to the image.Nếu thiếu phần chữ màu tím nầy thi step++ tạo increment không thể làm cho những tấm hình dolphin1,dolphin2,dolphin3 lần lượt xuất hiện được.
Nếu chỉ viết document.images.animate.src=”dolphin2.gif “ thì tấm hình số 2 liền xuất hịên sau khi tấm hình số1 biến mất.Còn tấm hình số 3 không thấy xuất hiện tiếp theo cho nên cần phải có phần chữ màu tím và một function moveIt() hoặc function slideIt() để cho cả 3 tấm hình tuần tự xuất hịên không ngừng nghĩ.
Không muốn cho hình di động nữa thì click nút STOP nghĩa là clearInterval(t).
Trong script thứ 2 có thể rút ngắn hơn như sau để càng dễ hiểu hơn.
var animate
var step=1
function moveIt(){
document.images.animate.src=eval("image"+step+".src");
step++
if(step>=4){step=1} }
Nhớ xóa bỏ hết những gì có chữ step2. Kết quả vẫn tốt như ý muốn.
Để dễ hiểu và gọn hơn nữa,chúng ta tránh xử dụng eval() bằng cách dùng cách viết sau đây vẫn cho kết quả rất tốt.
function moveIt(){
document.images.animate.src=window['image'+step].src;
step++
if(step>=4){step=1} };
Theo ý kiến của nhiều programmers kinh nghiệm thì chúng ta không nên dùng eval() với lý do:
It is extremely powerful.It makes your code to be parsed twice .In javaScript,it gives us the bad coding.It is unsafe and also slower because of invoking the interpreter
Mong Quý Bạn tự mình tạo được Slide Show tùy thích.
