Cách di chuyển một đối tượng trong JavaScript

Bạn có thể phản ứng theo một số cách khi một đối tượng rời khỏi khu vực chơi. Tôi sẽ thực hiện quấn, một trong những kỹ thuật đơn giản nhất. Nếu thứ gì đó rời khỏi đường viền ngoài cùng bên phải, chỉ cần để nó nhảy hết sang trái

Mã xử lý cả bốn đường viền

Hàm checkBounds() phụ thuộc vào hằng số. Điều này giúp theo một số cách. Khi bạn nhìn vào mã, thật dễ dàng để xem điều gì đang xảy ra.

Nếu x lớn hơn giá trị lớn nhất của x, hãy đặt nó thành giá trị nhỏ nhất. Bạn gần như không thể viết nó rõ ràng hơn thế này. Nếu kích thước của bề mặt chơi thay đổi, bạn chỉ cần thay đổi giá trị của hằng số.
Tất cả điều này rất hay, nhưng bạn có thể thắc mắc làm thế nào tôi nghĩ ra được giá trị thực cho các hằng số. Trong một số ngôn ngữ, bạn có thể nghĩ ra các thủ thuật toán học hay để dự đoán chính xác giá trị lớn nhất và nhỏ nhất phải là bao nhiêu. Trong JavaScript, kỹ thuật này hơi phức tạp vì môi trường không chính xác.

Bạn không nên lấy các giá trị kích thước từ bề mặt sao?

Trong một thế giới hoàn hảo, tôi sẽ trích xuất các giá trị vị trí từ chính bề mặt chơi. Thật không may, JavaScript/DOM không phải là một khung hoạt hình hoàn hảo. HTML 5 hỗ trợ một thẻ tuyệt vời gọi là canvas, phục vụ như một nền tảng vẽ và tạo hoạt ảnh hoàn hảo, nhưng nó chưa có sẵn trên tất cả các trình duyệt.
Vì tôi đang sử dụng định vị tuyệt đối nên vị trí của nhân vật không được gắn vào bề mặt (như lẽ ra phải thế) mà gắn vào màn hình chính. Điều này hơi khó chịu nhưng một số thử nghiệm
có thể giúp bạn tìm thấy các giá trị phù hợp. Hãy nhớ rằng, ngay khi bạn bắt đầu sử dụng định vị tuyệt đối trên một trang, bạn đã gần như cam kết với nó. Nếu bạn đang sử dụng hoạt ảnh như thế này, có thể bạn muốn sử dụng định vị tuyệt đối ở mọi nơi hoặc thực hiện một số thủ thuật khác để đảm bảo nhân vật ở đúng vị trí bạn muốn mà không ghi đè lên các phần khác của trang. Bất chấp điều đó, việc sử dụng các hằng số giúp mã dễ đọc và dễ bảo trì ngay cả khi bạn phải hack một chút để tìm các giá trị cụ thể mà bạn cần.
Tôi đã chọn một kỹ thuật đơn giản nhưng hiệu quả. Tôi tạm thời bỏ lệnh gọi checkbounds() và chỉ nhìn vào đầu ra để xem giá trị của x và y là gì. Tôi nhìn xem x sẽ lớn như thế nào trước khi sprite kết thúc và viết giá trị ra giấy. Tương tự như vậy, tôi đã tìm thấy các giá trị lớn nhất và nhỏ nhất cho y.
Khi tôi biết những giá trị này, tôi chỉ cần đặt chúng vào hằng số. Tôi không thực sự quan tâm rằng giá trị tối đa của x là 365. Tôi chỉ muốn biết rằng khi tôi loay hoay với x, tôi không muốn nó vượt quá giá trị MAX_X.
Nếu kích thước bề mặt chơi của tôi thay đổi, tôi chỉ cần thay đổi các hằng số và mọi thứ sẽ diễn ra tốt đẹp.
Nếu bạn quan tâm, đây là các kỹ thuật khác mà bạn có thể sử dụng khi nhân vật sắp rời khỏi khu vực thị giác.
Bị thoát. Vật thể bật ra khỏi tường. Điều này được thực hiện bằng cách đảo ngược giá trị dx hoặc dy (tùy thuộc vào đó là tường dọc hay tường ngang).
Dừng lại. Đối tượng chỉ đơn giản là dừng chuyển động khi nó chạm vào tường. Đặt dx và dy thành 0 để đạt được hiệu ứng này.
Tiếp tục. Đối tượng tiếp tục di chuyển mặc dù nó ra khỏi tầm nhìn. Điều này đôi khi được sử dụng cho mô phỏng kiểm soát không lưu (trong đó trực quan hóa vị trí là một phần của trò chơi) hoặc mô phỏng quỹ đạo (trong đó có lẽ vật thể sẽ quay trở lại).
Kết hợp. Đôi khi, bạn sẽ thấy các kết hợp giống như trò chơi nền văn minh mô phỏng bản đồ hình trụ bằng cách dừng ở trên cùng và dưới cùng và cuộn ở hai bên.

Đọc đầu vào từ bàn phím

Bạn có thể sử dụng JavaScript để đọc trực tiếp từ bàn phím. Đọc từ bàn phím có thể hữu ích trong một số trường hợp, nhưng nó đặc biệt tiện dụng trong các ứng dụng hoạt hình và trò chơi đơn giản.
Hình 8-2 ​​cho thấy một chương trình với một quả bóng đang chuyển động.

Hình 8-2.
Bạn có thể di chuyển quả bóng bằng các phím mũi tên.
Bàn phím. trang html không có nút vì các phím mũi tên được sử dụng để quản lý tất cả đầu vào.
Bạn biết tôi sắp nói gì mà. Hãy xem qua thứ này trong trình duyệt của bạn vì nó không có bất kỳ sự hấp dẫn nào trừ khi bạn chạy nó và nhấn vào một số phím mũi tên.

Xây dựng trang bàn phím

Trang bàn phím rất giống phong trào. trang html được hiển thị trước đó trong chương này.

Bàn phím. trang html rất giống với phong trào. trang html được mô tả ở đầu chương. Loại tình huống này là khi việc xây dựng mã có thể tái sử dụng thực sự hiệu quả. Về cơ bản tôi đã sao chép phong trào. html và thực hiện một vài thay đổi nhỏ nhưng quan trọng.
Nhập chuyển động. tập lệnh js. Trang này sử dụng các chức năng tương tự như chuyển động. trang html, vì vậy chỉ cần nhập tập lệnh.
Thêm tập lệnh khác dành riêng cho việc đọc bàn phím. Bạn cần một vài sửa đổi, được đặt trong tệp tập lệnh thứ hai có tên là bàn phím. js.
Giữ phần còn lại của trang tương tự. Bạn vẫn gọi init() khi phần thân tải và bạn vẫn muốn thiết kế trực quan giống như vậy, ngoại trừ các nút.
Các div bề mặt và sprite giống hệt với chuyển động. thiết kế html.
Lấy biểu mẫu ra. Trang này phản hồi với bàn phím, vì vậy bạn không cần biểu mẫu nữa.

Nhìn qua bàn phím. tập lệnh js

Hãy nhớ rằng chương trình này bắt đầu với phong trào. tập lệnh js. Đối với trình duyệt, toàn bộ tệp script đó đã được tải trước bàn phím. tập lệnh js xuất hiện. Nền tảng cơ bản đã có sẵn từ phong trào. Tập lệnh bàn phím chỉ xử lý các sửa đổi để hỗ trợ bàn phím hoạt động

Ghi đè hàm init()

Làm việc với bàn phím vẫn yêu cầu khởi tạo. Tôi cần thêm một chút công việc trong hàm init(), vì vậy tôi tạo một phiên bản mới thay thế phiên bản được tạo trong chuyển động. js.

Thứ tự bạn nhập tập lệnh rất quan trọng. Nếu bạn sao chép một chức năng, trình duyệt chỉ diễn giải chức năng cuối cùng mà nó đọc.

Thiết lập trình xử lý sự kiện

Trong hàm init() của tôi, tôi vẫn muốn khởi tạo sprite (như tôi đã làm trong chuyển động. js). Khi bạn muốn đọc bàn phím, bạn cần nhấn vào tiện ích xử lý sự kiện của trình duyệt. Các trình duyệt cung cấp hỗ trợ cơ bản cho các sự kiện dựa trên trang (như body. tải và nút. onclick), nhưng chúng cũng cung cấp mức hỗ trợ thấp hơn cho đầu vào cơ bản hơn như đầu vào bằng bàn phím và chuột.
Nếu bạn muốn đọc đầu vào cấp thấp hơn này, bạn cần chỉ định một chức năng sẽ phản hồi đầu vào.

Dòng này chỉ định rằng một chức năng đặc biệt có tên là keyListener sẽ được gọi bất cứ khi nào người dùng nhấn một phím. Hãy ghi nhớ những điều sau đây khi tạo loại trình xử lý sự kiện này.
1. Trình xử lý sự kiện nên được gọi trong init().
Bạn có thể muốn xử lý bàn phím khả dụng ngay lập tức, vì vậy bạn nên thiết lập trình xử lý sự kiện trong hàm init().
2. Hàm được gọi như thể nó là một biến.
Đây là một cú pháp hơi khác so với những gì bạn đã thấy trước đây. Khi bạn tạo các trình xử lý hàm trong HTML, bạn chỉ cần cung cấp một chuỗi đại diện cho tên hàm hoàn chỉnh với các tham số (nút onclick = “doS SomethingO”). Khi bạn gọi một hàm trong JavaScript (trái ngược với việc gọi hàm trong HTML), tên hàm thực sự giống như một biến, vì vậy nó không yêu cầu dấu ngoặc kép.
Nếu bạn muốn biết sự thật, hàm là biến trong JavaScript. Lần tới khi ai đó nói với bạn rằng JavaScript là một “ngôn ngữ đồ chơi”, hãy đề cập rằng nó hỗ trợ tự động hủy tham chiếu các con trỏ hàm. Sau đó chạy đi trước khi người đó hỏi bạn điều đó có nghĩa là gì. (Đó là những gì tôi làm. )
3. Bạn cần tạo một hàm với tên được chỉ định.
Nếu bạn có mã này trong init, trình duyệt sẽ gọi một hàm gọi là keyListener() bất cứ khi nào một phím được nhấn. (Bạn có thể gọi hàm này bằng cách khác, nhưng keyListener() là một cái tên khá hay vì nó lắng nghe các lần nhấn phím. )

Phản ứng với tổ hợp phím

Sau khi bạn đã thiết lập một trình xử lý sự kiện, bạn cần viết hàm để phản hồi các lần nhấn phím, đây là một nhiệm vụ khá dễ dàng. Đây là mã keyListener (được tìm thấy trong bàn phím. js).

Mã này lấy một đối tượng sự kiện nếu cần, sau đó phân tích đối tượng đó để tìm ra phím nào (nếu có) đã được nhấn. Sau đó nó gọi hàm moveSprite() để di chuyển sprite. Đây là mức thấp nhất.
1. Các chức năng sự kiện có các đối tượng sự kiện.
Chỉ biết rằng một sự kiện đã xảy ra là chưa đủ. Bạn cần biết người dùng đã nhấn phím nào. May mắn thay, các trình duyệt đều có sẵn một đối tượng sự kiện cho bạn biết điều gì đã xảy ra.
2. Nhiều trình duyệt chuyển sự kiện dưới dạng tham số.
Khi bạn tạo một chức năng sự kiện, trình duyệt sẽ tự động gán một tham số đặc biệt cho chức năng đó. Tham số này (thường được gọi là e) đại diện cho sự kiện. Chỉ cần thực hiện chức năng với một tham số gọi là e, và hầu hết các trình duyệt tạo e tự động.

3. Internet Explorer cần thêm một chút trợ giúp.
IE không tự động tạo đối tượng sự kiện cho bạn, vì vậy bạn cần tạo đối tượng đó một cách cụ thể.

4. Bạn có thể sử dụng e để tìm ra phím nào người dùng đã nhấn.
Đối tượng e có một số thuộc tính tiện lợi, bao gồm keyCode. Thuộc tính này trả về một số cho bạn biết người dùng đã nhấn phím nào.
Tìm kiếm nhanh đối tượng sự kiện JavaScript để tìm hiểu các loại thủ thuật sự kiện khác. Tôi đang trình bày các tính năng quan trọng nhất ở đây, nhưng đây chỉ là phần giới thiệu về nhiều điều thú vị mà bạn có thể làm với các sự kiện.
5. So sánh thuộc tính keycode của đối tượng sự kiện với các mã khóa tương ứng với các khóa mà bạn quan tâm.
Bạn có thể tìm ra mã phím của bất kỳ phím nào trên bàn phím của mình và bạn có thể sử dụng các câu lệnh if cơ bản để phản hồi một cách thích hợp. (Tôi giải thích mã khóa trong phần sau. )

6. Gọi các biến thể thích hợp của moveSprite.
Nếu người dùng nhấn phím mũi tên trái, hãy di chuyển sprite sang trái. Bạn có thể sử dụng hàm moveSprite() được xác định trong chuyển động. js cho cái này.

Giải mã bí ẩn mã khóa

Khi bạn xem qua mã trong hàm keyListener, bạn có thể thấy một số số lẻ trong đó. Ví dụ: mã tìm kiếm phím mũi tên trái thực sự so sánh phím e. keyCode thành giá trị 3 7. Bí ẩn lớn là tất cả các số trong hàm keyListener (trong phần trước) đến từ đâu.
Những con số này được gọi là mã khóa. Chúng là các biểu diễn số của các phím vật lý trên bàn phím. Mỗi phím vật lý trên bàn phím đều có mã phím tương ứng. Mã phím được ánh xạ tới phím vật lý, có nghĩa là mã phím tương ứng với một phím giống nhau ngay cả khi ánh xạ bàn phím bị thay đổi (ví dụ: sang ngôn ngữ nước ngoài hoặc cài đặt đầu vào thay thế).
Làm sao tôi biết rằng phím mũi tên trái tương ứng với mã khóa 37? . Tôi vừa viết một chương trình để nói với tôi. Hình 8-3 hiển thị readKeys. html đang hoạt động.

Hình 8-3.
Chương trình này đọc bàn phím và báo cáo mã phím.
Chạy readKeys và nhấn một vài phím. Sau đó, bạn có thể dễ dàng xác định mã phím nào liên quan đến phím nào. Bạn cũng có thể muốn xem mã ở định dạng này nếu bạn hơi bối rối; .
Nếu bạn sử dụng máy tính xách tay hoặc bàn phím quốc tế, hãy lưu ý rằng một số mã phím có thể không chuẩn, đặc biệt là các phím của bàn phím số. Cố gắng sử dụng các phím tiêu chuẩn nếu bạn muốn đảm bảo rằng chương trình của mình hoạt động trên tất cả các bàn phím.

Theo Chuột

Bạn có thể tạo trình xử lý sự kiện để đọc chuột. Hình 8-4 cho thấy một chương trình như vậy.

Hình 8-4. Bây giờ sprite ở lại với con chuột.

Đạt được hiệu ứng này thực sự khá dễ dàng khi bạn biết cách đọc bàn phím, bởi vì nó hoạt động gần như chính xác theo cùng một cách.

Nhìn qua HTML

Mã cho followMouse. html đủ đơn giản để tôi giữ nó trong một tệp

Thiết lập HTML

Trang HTML rất đơn giản. Lần này tôi để con chuột chiếm toàn bộ trang. Không cần đường viền, vì sprite sẽ không thể rời khỏi trang. (Nếu chuột rời khỏi trang, nó sẽ không gửi thông báo sự kiện nữa. )
Chỉ cần tạo sprite có hình ảnh như bình thường và nhớ gọi init() khi phần thân tải.

Đang khởi tạo mã

Việc khởi tạo khá đơn giản.
1. Tạo biến toàn cục cho sprite.
Xác định biến sprite bên ngoài bất kỳ chức năng nào để nó sẽ có sẵn cho tất cả chúng.

2. Xây dựng sprite trong init().
Hàm init() là một nơi tuyệt vời để tạo sprite.

3. Thiết lập trình xử lý sự kiện cho chuyển động của chuột.
Thiết lập trình xử lý sự kiện trong init(). Lần này bạn đang lắng nghe các sự kiện chuột, vì vậy hãy gọi cái này là mouseListener.

Xây dựng trình nghe chuột

Trình nghe chuột hoạt động giống như trình nghe bàn phím. Trình nghe chuột được gọi bất cứ khi nào chuột di chuyển và nó kiểm tra đối tượng sự kiện để xác định vị trí hiện tại của chuột. Sau đó, nó sử dụng giá trị đó để đặt sprite.
1. Lấy đối tượng sự kiện.
Sử dụng kỹ thuật đa nền tảng để lấy đối tượng sự kiện.

2. Xác định chiều rộng và chiều cao của sprite.
Các thuộc tính trên cùng và bên trái sẽ trỏ đến góc trên cùng bên trái của sprite. Có vẻ tự nhiên hơn khi đặt con chuột ở giữa nhân vật. Để tính trung tâm, bạn cần các giá trị chiều cao và chiều rộng. Đừng quên thêm các giá trị này vào local style cho sprite.

3. Bạn thấy. trangX và e. pageY để lấy vị trí chuột.
Các thuộc tính này trả về vị trí hiện tại của con chuột trên trang.
4. Xác định x và y dưới con trỏ chuột.
Trừ một nửa chiều rộng của sprite khỏi giá trị x của chuột (e. pageX) để vị trí nằm ngang của sprite được căn giữa vào con chuột. Lặp lại với vị trí y.

5. Di chuyển chuột đến tọa độ x và y mới.
Sử dụng các kỹ thuật chuyển đổi để di chuyển sprite đến vị trí mới.

Một hiệu ứng thú vị khác là nhân vật bị ảnh hưởng bởi con chuột. Đừng bắt nó trực tiếp đi theo con chuột mà hãy kiểm tra xem con chuột đang ở đâu trong mối quan hệ với nhân vật. Ví dụ: yêu cầu nhân vật di chuyển lên nếu chuột ở trên nhân vật.
Đạt được hiệu ứng này thực sự khá dễ dàng khi bạn biết cách đọc bàn phím, bởi vì nó hoạt động gần như giống hệt nhau.

Nhìn qua HTML

Mã cho followMouse. html đủ đơn giản để tôi giữ nó trong một tệp

Thiết lập HTML

Trang HTML rất đơn giản. Lần này tôi để con chuột chiếm toàn bộ trang. Không cần đường viền, vì sprite sẽ không thể rời khỏi trang. (Nếu chuột rời khỏi trang, nó sẽ không gửi thông báo sự kiện nữa. )
Chỉ cần tạo sprite có hình ảnh như bình thường và nhớ gọi init() khi phần thân tải.

Đang khởi tạo mã

Việc khởi tạo khá đơn giản.
1. Tạo biến toàn cục cho sprite.
Xác định biến sprite bên ngoài bất kỳ chức năng nào để nó sẽ có sẵn cho tất cả chúng.

2. Xây dựng sprite trong init().
Hàm init() là một nơi tuyệt vời để tạo sprite.

3. Thiết lập trình xử lý sự kiện cho chuyển động của chuột.
Thiết lập trình xử lý sự kiện trong init(). Lần này bạn đang lắng nghe các sự kiện chuột, vì vậy hãy gọi cái này là mouseListener.

Xây dựng trình nghe chuột

Trình nghe chuột hoạt động giống như trình nghe bàn phím. Trình nghe chuột được gọi bất cứ khi nào chuột di chuyển và nó kiểm tra đối tượng sự kiện để xác định vị trí hiện tại của chuột. Sau đó, nó sử dụng giá trị đó để đặt sprite.
1. Lấy đối tượng sự kiện.
Sử dụng kỹ thuật đa nền tảng để lấy đối tượng sự kiện.

2. Xác định chiều rộng và chiều cao của sprite.
Các thuộc tính trên cùng và bên trái sẽ trỏ đến góc trên cùng bên trái của sprite. Có vẻ tự nhiên hơn khi đặt con chuột ở giữa nhân vật. Để tính trung tâm, bạn cần các giá trị chiều cao và chiều rộng. Đừng quên thêm các giá trị này vào local style cho sprite.

3. Bạn thấy. trangX và e. pageY để lấy vị trí chuột.
Các thuộc tính này trả về vị trí hiện tại của con chuột trên trang.
4. Xác định x và y dưới con trỏ chuột.
Trừ một nửa chiều rộng của sprite khỏi giá trị x của chuột (e. pageX) để vị trí nằm ngang của sprite được căn giữa vào con chuột. Lặp lại với vị trí y.

5. Di chuyển chuột đến tọa độ x và y mới.
Sử dụng các kỹ thuật chuyển đổi để di chuyển sprite đến vị trí mới.

Một hiệu ứng thú vị khác là nhân vật bị ảnh hưởng bởi con chuột. Đừng bắt nó trực tiếp đi theo con chuột mà hãy kiểm tra xem con chuột đang ở đâu trong mối quan hệ với nhân vật. Ví dụ: yêu cầu nhân vật di chuyển lên nếu chuột ở trên nhân vật.

chuyển động tự động

Bạn có thể tự động di chuyển nhân vật bằng cách gắn bộ đếm thời gian đặc biệt vào đối tượng. Hình 8-5 cho thấy quả bóng di chuyển tự động trên trang.
Hẹn giờ. html đơn giản một cách đáng ngạc nhiên, bởi vì nó vay mượn hầu hết mọi thứ từ mã khác.

HTML và CSS hoàn toàn giống với nút. Mã HTML. Hầu hết JavaScript đến từ chuyển động. js. Điều duy nhất thực sự mới là một thay đổi nhỏ nhưng quan trọng trong phương thức init().
JavaScript chứa một hàm rất hữu ích gọi là setlinterval, hàm này nhận hai tham số.
Một lời gọi hàm. Tạo một chuỗi chứa lệnh gọi hàm bao gồm bất kỳ tham số nào của nó.
Khoảng thời gian tính bằng mili giây. Bạn có thể chỉ định một khoảng thời gian trong 1.000 giây. Nếu khoảng thời gian là 500, hàm đã cho sẽ được gọi hai lần mỗi giây; .

Hình 8-5.
Ma nữ này đang tự di chuyển. (Tôi đã thêm mũi tên để hiển thị chuyển động. )
Bạn có thể đặt khoảng thời gian ở bất kỳ tốc độ nào bạn muốn, nhưng điều đó không đảm bảo mọi thứ sẽ hoạt động nhanh như vậy. Nếu bạn đặt mã phức tạp vào một chức năng và yêu cầu trình duyệt thực thi mã đó 1.000 lần mỗi giây, thì có thể nó sẽ không theo kịp (đặc biệt nếu người dùng có máy chậm hơn bạn).
Trình duyệt gọi chức năng được chỉ định trong khoảng thời gian được chỉ định. Đặt bất kỳ mã nào bạn muốn lặp lại bên trong hàm đã cho.
Đừng đặt bất cứ thứ gì không cần thiết vào hàm ngắt quãng. Bởi vì mã này xảy ra vài lần mỗi giây nên nó được gọi là đường dẫn quan trọng và bất kỳ quá trình xử lý lãng phí nào ở đây đều có thể làm chậm nghiêm trọng toàn bộ chương trình. Cố gắng làm cho mã trong hàm khoảng thời gian sạch nhất có thể. (Đó là lý do tại sao tôi tạo sprite như một biến toàn cục. Tôi không muốn tạo lại sprite 20 lần mỗi giây, khiến chương trình của tôi không thể xử lý được đối với các trình duyệt chậm hơn. )
Bằng cách sử dụng các đối tượng chuyển động tự động, bạn có cơ hội chơi với các loại phát hiện ranh giới khác. Nếu bạn muốn biết cách làm cho một thứ gì đó nảy lên khi chạm vào cạnh, hãy xem phần nảy. html và thoát. js trên một trong các trang web đồng hành cùng với mã khác được nêu trong chương này.

Hoạt hình hoán đổi hình ảnh

Loại hoạt ảnh khác mà bạn có thể thực hiện liên quan đến việc thay đổi hình ảnh nhanh chóng. Nhìn vào Hình 8-6 để thấy một khung hình hoạt hình.

Hình 8-6.
Ma nữ này đang đá.
Hoạt ảnh chưa bao giờ dễ dàng hiển thị trong ảnh chụp màn hình tĩnh, vì vậy, Hình 8-7 hiển thị chuỗi hình ảnh được sử dụng để xây dựng nhân vật đá bóng.

Hình 8-7.
Tôi đã sử dụng loạt ảnh này để tạo hoạt ảnh.
Bạn có thể sử dụng bất kỳ chuỗi hình ảnh nào bạn muốn. Tôi lấy những hình ảnh này từ một trang có tên là Reiner’s Tilesets (http. //reinerstileset. 4 người chơi. de/ tiếng anh. html). Nó bao gồm một số lượng lớn các họa tiết, mỗi họa tiết có một số hình ảnh động. Những hình ảnh động này được gọi là Freya.

Chuẩn bị hình ảnh

Bạn có thể tạo hình ảnh của riêng mình hoặc bạn có thể lấy chúng từ một trang web như Reiner’s Tilesets. Trong mọi trường hợp, có một số điều cần lưu ý khi xây dựng hình ảnh động.
Giữ chúng nhỏ. Hình ảnh lớn hơn sẽ mất nhiều thời gian để tải xuống và sẽ không trao đổi mượt mà như hình ảnh nhỏ. Hình ảnh của tôi có kích thước 128 x 128 pixel, đây là kích thước phù hợp.
Cân nhắc thêm tính minh bạch. Các hình ảnh từ Reiner's Tilesets có nền màu nâu. Tôi đã làm nền trong suốt bằng cách sử dụng trình chỉnh sửa đồ họa yêu thích của mình (GIMP).
Thay đổi định dạng tệp. Những hình ảnh đã đến. định dạng bmp, không hiệu quả và không hỗ trợ tính minh bạch. Tôi đã lưu chúng dưới dạng. ảnh gif để làm cho chúng nhỏ hơn và cho phép nền trong suốt.
Cân nhắc đổi tên. Tôi đã đổi tên các hình ảnh để làm cho tên đơn giản hơn và để loại bỏ khoảng trắng khỏi tên tệp. Tôi gọi những hình ảnh là kick0 0. gif cho kick12. gif.
Đặt hình ảnh động vào thư mục con. Với những hình ảnh trang thông thường, tôi thường thấy một thư mục con không hữu ích. Khi bạn bắt đầu xây dựng hoạt hình, bạn có thể dễ dàng có rất nhiều hình ảnh nhỏ chạy xung quanh. Đây là một nơi tốt cho một thư mục con.
Hãy chắc chắn rằng bạn có quyền sử dụng hình ảnh. Chỉ vì bạn có thể sử dụng một hình ảnh không có nghĩa là bạn nên. Cố gắng xin phép chủ sở hữu hình ảnh, trích dẫn nguồn của bạn và lưu trữ hình ảnh trên máy chủ của riêng bạn. Đó chỉ là quyền công dân tốt.

xây dựng trang

Mã cho hoạt ảnh chỉ sử dụng các biến thể của những điều bạn đã thực hiện. một hàm setlinterval và một số mã hóa DOM

HTML cực kỳ đơn giản

1. Thiết lập phần thân bằng phương thức init().
Như thường lệ, sự kiện onclick của phần thân gọi một phương thức init() để khởi động mọi thứ.
2. Tạo một div sprite.
Tạo div có tên sprite. Bởi vì bạn sẽ không thay đổi vị trí của div này (chưa) nên bạn không cần phải lo lắng về kiểu cục bộ.
3. Đặt tên cho hình ảnh.
Trong chương trình này, bạn muốn tạo hiệu ứng động cho img bên trong div, vì vậy bạn cần cung cấp cho nó một id.
Xây dựng các biến toàn cục
Mã JavaScript không quá khó nhưng cần một chút suy nghĩ.
1. Tạo một mảng tên hình ảnh.
Bạn có một danh sách hình ảnh để làm việc với. Cách dễ nhất để hỗ trợ điều này là với một mảng tên hình ảnh. Mỗi phần tử của mảng là tên tệp của một hình ảnh. Đặt chúng theo thứ tự bạn muốn các khung hoạt hình được hiển thị.

2. Xây dựng một biến khung để giữ số khung hiện tại.
Vì hoạt ảnh này có 12 khung hình nên biến khung hình sẽ tăng từ 0
đến 11.

3. Thiết lập spritelmage.
Biến này sẽ là tham chiếu đến thẻ img bên trong thẻ sprite.

Thiết lập khoảng thời gian

Hàm init() gắn biến spritelmage vào đối tượng hình ảnh và thiết lập phương thức animate() để chạy mười lần mỗi giây

Hoạt hình sprite

Hoạt ảnh thực sự xảy ra trong hàm animate() (bạn đã đoán ra rồi). Chức năng rất đơn giản.
1. Tăng bộ đếm khung.
Thêm một vào biến khung.

2. Kiểm tra giới hạn.
Bất cứ khi nào bạn thay đổi một biến, bạn nên xem xét liệu nó có thể vượt quá giới hạn hay không. Tôi đang sử dụng khung làm chỉ mục trong mảng imgList, vì vậy tôi kiểm tra xem khung đó luôn nhỏ hơn độ dài của imgList.

3. Đặt lại khung nếu cần.
Nếu bộ đếm khung hình quá cao, hãy đặt lại về 0 và bắt đầu lại hoạt ảnh.
4. Sao chép tên tệp hình ảnh từ mảng vào thuộc tính src của
đối tượng spritelmage.
Bước này sẽ hiển thị tệp đã cho.

Cải thiện hình ảnh động với tải trước

Khi bạn chạy chương trình hoán đổi hình ảnh, bạn sẽ gặp một số độ trễ trong lần tải đầu tiên khi tất cả các hình ảnh được tải. (Làm cho hình ảnh nhỏ hơn và lưu chúng vào. gif hoặc. định dạng png giúp với sự chậm trễ. ) Hầu hết các trình duyệt đều lưu trữ hình ảnh cục bộ, vì vậy hình ảnh sẽ sinh động mượt mà sau lần duyệt đầu tiên.
Nếu bạn muốn hoạt ảnh mượt mà hơn, bạn có thể sử dụng kỹ thuật gọi là tải trước. Điều này làm cho tất cả các hình ảnh được tải trước khi hoạt ảnh bắt đầu. tải trước. html thực hiện một vài thay đổi để tải trước hình ảnh. (Tôi không hiển thị hình vì nó trông giống như hình ảnh đối với người dùng. )

Không có thay đổi trong mã HTML. Những thay đổi duy nhất là trong mã JavaScript

Đây là cách tải trước hoạt động

1. Thay đổi tên mảng thành imgFiles.
Sự khác biệt này tuy nhỏ nhưng quan trọng. Mảng không đại diện cho hình ảnh thực, nhưng tên tệp của hình ảnh. Bạn cần tạo một mảng khác để chứa dữ liệu hình ảnh thực tế.
2. Tạo một mảng hình ảnh.
JavaScript có loại dữ liệu được thiết kế đặc biệt để giữ dữ liệu hình ảnh. Mảng hình ảnh chứa dữ liệu hình ảnh thực tế (không chỉ tên tệp mà cả hình ảnh thực tế). Mảng hình ảnh phải là toàn cầu.
3. Tạo một hàm để điền vào mảng hình ảnh.
Hàm loadlmages() tạo mảng dữ liệu hình ảnh. Gọi
loadImages() từ init().
4. Tạo một vòng lặp đi qua từng phần tử của mảng imgFiles.
Bạn xây dựng một đối tượng hình ảnh tương ứng với mỗi tên tệp, vì vậy độ dài của hai mảng cần phải bằng nhau.
5. Xây dựng một đối tượng hình ảnh mới cho mỗi tên tệp.
Sử dụng cấu trúc Image() mới để tạo đối tượng hình ảnh đại diện cho dữ liệu hình ảnh được liên kết với một tệp cụ thể.
6. Đính kèm đối tượng hình ảnh đó vào mảng hình ảnh().
Mảng này hiện chứa tất cả dữ liệu hình ảnh.
7. Sửa đổi animate() để đọc từ mảng images().
Hàm animate() hiện đọc từ mảng images(). Do dữ liệu ảnh đã được load sẵn vào mảng nên hiển thị mượt mà hơn.
Tải trước hình ảnh không làm hoạt ảnh nhanh hơn. Nó chỉ trì hoãn hình ảnh động cho đến khi tất cả các hình ảnh được tải vào bộ nhớ cache, làm cho nó trông mượt mà hơn. Một số trình duyệt vẫn phát hoạt ảnh trước khi bộ đệm tải xong, nhưng kỹ thuật này vẫn có lợi.
Ngay cả khi bạn không thích hoạt ảnh, những kỹ thuật này vẫn có thể hữu ích. Bạn có thể sử dụng kỹ thuật setlinterval() cho bất kỳ loại mã lặp nào mà bạn muốn, bao gồm hiển thị động của các menu hoặc các thành phần trang khác. Trên thực tế, trước khi CSS trở thành kỹ thuật được ưa chuộng, hầu hết các menu động đều sử dụng hoạt ảnh JavaScript.

Làm việc với ảnh ghép

Một cách tiếp cận phổ biến khác đối với hoạt hình hoán đổi hình ảnh là kết hợp tất cả các hình ảnh thành một tệp đồ họa duy nhất và sử dụng các kỹ thuật CSS để chỉ hiển thị một phần của hình ảnh đó. Hình 8-8 cho bạn thấy ý tôi là gì.

Hình 8-8.
Hình ảnh kết hợp chopper.
Tệp ảnh này chứa một số ảnh trực thăng. Mỗi hình ảnh phụ hiển thị một vị trí khác nhau của rôto chính và rôto đuôi. hợp chất. trang html hiển thị hình ảnh này, nhưng nó chỉ hiển thị một phần của hình ảnh tại một thời điểm. Một phần của hình ảnh được hiển thị được thay đổi nhanh chóng để tạo ra hình ảnh động. Kỹ thuật này có một số ưu điểm.
Một hình ảnh tải hiệu quả hơn nhiều hình ảnh riêng biệt.
Toàn bộ hình ảnh tải cùng một lúc, loại bỏ độ trễ liên quan đến nhiều hình ảnh
Bạn có thể kết hợp các hình ảnh rất phức tạp với nhiều hoạt ảnh theo cách này.
HTML hoàn chỉnh trông giống như Hình 8-9 (tất nhiên, ngoại trừ, bạn có thể thấy các cánh quạt của máy bay trực thăng đang quay trên trang thực).

Hình 8-9.
Hình ảnh được di chuyển trong div để tạo hiệu ứng động.

Chuẩn bị hình ảnh

Việc chuẩn bị một hình ảnh để sử dụng theo cách này cần phải cẩn thận. Bạn phải lập kế hoạch để đảm bảo dễ dàng tạo hiệu ứng động cho hình ảnh.
Kết hợp tất cả hình ảnh thành một tệp. Sử dụng công cụ chỉnh sửa hình ảnh, chẳng hạn như Gimp hoặc Photoshop.
‘ Đảm bảo rằng tất cả các hình ảnh con đều có cùng kích thước. Cuộc sống của bạn sẽ dễ dàng hơn nếu tất cả các hình ảnh có kích thước phù hợp. Tất cả các hình ảnh chopper đều cao 64 pixel và rộng 132 pixel.
‘ Đặt tất cả các ảnh con cách nhau một khoảng như nhau. Các hình ảnh cách nhau 132 pixel.
‘ Sắp xếp hình ảnh theo hàng hoặc cột. Nếu bạn có một hình ảnh động, hãy đặt nó vào một hàng hoặc cột để đơn giản hóa phép toán của bạn. Bạn có thể kết hợp nhiều hình ảnh hơn để tạo ra các hoạt ảnh phức tạp hơn (ví dụ: một chuỗi các chu kỳ đi bộ theo mỗi hướng.
Hình ảnh cụ thể được sử dụng trong ví dụ này là từ SpriteLib của Ari (www. bayyogi. com/fun/spritelib. html), một nguồn đồ họa trò chơi mã nguồn mở tuyệt vời. Tôi đã sửa đổi hình ảnh một chút để sử dụng trong ví dụ này.

Thiết lập HTML và CSS

Giống như nhiều ví dụ về hoạt ảnh, mã HTML khá tối thiểu. Tất cả những gì cần thiết là một div có thuộc tính id.

Như bạn có thể thấy, div thậm chí không có hình ảnh trong đó. Hình ảnh được đặt và thao tác thông qua CSS với thuộc tính hình ảnh nền.

CSS cũng khá đơn giản

CSS thực hiện một số nhiệm vụ quan trọng

1. Áp dụng hình ảnh.
Toàn bộ hình ảnh được áp dụng làm hình nền của div.
2. Thay đổi kích thước div.
Kích thước div được điều chỉnh để phản ánh kích thước của một ảnh phụ. Nếu bạn nhìn vào HTML tại thời điểm này, div trông giống như một hình ảnh bình thường, chỉ hiển thị hình ảnh con đầu tiên của chiếc trực thăng.
3. Đặt vị trí nền ban đầu.
Chỉ hiển thị bộ cắt đầu tiên nhưng toàn bộ hình ảnh (với bốn bộ cắt) được gắn vào div. Tôi sử dụng CSS để di chuyển hình ảnh sao cho các khung hình động khác nhau xuất hiện trong không gian hiển thị của div. Vị trí ban đầu là 0px 0px, nghĩa là góc trên bên trái của hình ảnh được căn chỉnh với góc trên bên trái của div.
Toàn bộ hoạt hình máy bay trực thăng này có vẻ như chứa nhiều đau buồn không cần thiết. Bạn có thể hỏi tại sao tôi lại bận tâm khi tôi chỉ có thể sử dụng ảnh GIF động. Câu trả lời là kiểm soát. Tôi có thể sử dụng những lựa chọn thay thế đó và đôi khi chúng sẽ là lựa chọn tốt hơn. Tuy nhiên, nếu bạn biết cách điều khiển hoạt ảnh trực tiếp thông qua JavaScript, bạn có thể làm những việc mà bạn không thể làm bằng cách khác, chẳng hạn như thay đổi tốc độ hoạt ảnh hoặc đóng băng trên một khung hình cụ thể.

Viết JavaScript

Chiến lược chung là chạy một vòng lặp hoạt ảnh thông thường nhưng thay đổi vị trí nền của div mỗi khung để nó hiển thị một khung khác của hoạt ảnh. Khung hình thứ hai của hoạt hình xảy ra ở pixel 132, vì vậy nếu bạn di chuyển hình nền sang bên trái 132px, bạn sẽ thấy khung hình thứ hai. Tôi đã lưu trữ vị trí cần thiết để hiển thị từng khung hình trong một mảng có tên là offset. Phần lớn chương trình này trông giống như mã hoán đổi hình ảnh trước đó

Làm cách nào để di chuyển một đối tượng bằng js?

Làm cách nào để di chuyển div trong JavaScript?

Làm cách nào để sử dụng các phím mũi tên trong JavaScript?

Phương thức Move trong JavaScript là gì?