Làm cho một quả bóng vải di chuyển trơn tru

Question

Tôi đã viết một trò chơi pong nhiều, nhưng vì một ~ 60ms lag bóng nảy của tôi không di chuyển trơn tru. The game itself is available here, nhưng vì nó chỉ hoạt động trên chrome, và chính trang web được viết bằng ngôn ngữ mẹ đẻ của tôi (cũng có thể bạn rõ ràng là cần hai trình duyệt để cho nó làm việc), đây là jsfiddle của vấn đề:

http://jsfiddle.net/yc6Lb/75/

Như bạn thấy trong fiddle, dx và dy được xác định và làm mới mỗi giây được định nghĩa là speed. Tôi cần ba biến đó để duy trì liên tục (tôi biết rằng chúng đang khiến quả bóng không di chuyển trơn tru).

Bây giờ câu hỏi: Có bất kỳ thủ thuật nào để không chạm vào các biến đó, nhưng làm cho quả bóng trông giống như nó di chuyển trơn tru? Tôi đã suy nghĩ về việc vẽ vị trí mới của quả bóng + vẽ lại vị trí trước đó của quả bóng với độ mờ 50%, nhưng tôi chưa thử nghiệm nó. Có giải pháp nào khác cho vấn đề này không?

Answer 1

Tôi nghĩ, như @ Jason nói, bạn có thể có bước chính xác như bạn muốn trong hoạt ảnh (sử dụng animationFrame chẳng hạn) và xử lý riêng vấn đề nhận thông tin từ xa.
Tuy nhiên, để khắc phục nhanh, bạn có thể sử dụng mẹo mà đôi khi tôi sử dụng: có hiệu ứng đường/bóng bằng cách xóa context2d với độ mờ giảm xuống.
Vì vậy, các chức năng rõ ràng trở thành:

function clear() { 
    cxt.globalAlpha=0.3; 
    cxt.fillStyle='#FFFFFF'; 
    cxt.fillRect(0, 0, WIDTH, HEIGHT); 
    cxt.globalAlpha=1; 
} 

sau đó bạn phải không rõ ràng trong lễ bốc thăm() chức năng, và gọi để xóa() trong vòng lặp bốc thăm.

tôi cập nhật fiddle của bạn:

http://jsfiddle.net/gamealchemist/yc6Lb/86/

chơi với alpha để có được hiệu quả mong muốn.

Rq: bạn có thể muốn xóa toàn bộ một số phần của màn hình (như điểm số) và chỉ sử dụng độ mờ thấp hơn trong phần hoạt ảnh của canvas.

Answer 2

Bạn có thể đạt được một chút hiệu suất từ ​​việc không thực hiện phép tính 2 * pi trong mỗi vòng lặp. Làm tròn nó thành giá trị tĩnh là 6,28.

Bạn cũng có thể muốn xem processing.js, điều này có thể tăng tốc mọi thứ.

Answer 3

Không có gì sai với toán học của bạn. Bạn nên sử dụng requestAnimationFrame. Thay đổi hàm init của bạn để nó trông như thế này:

function init() { 
    window.requestAnimationFrame(init, cxt) 
    draw(); 
} 

Here's a working JSFiddle example

Bạn sẽ có lẽ cũng cần một polyfill for requestAnimationFrame để làm cho nó làm việc trên tất cả các trình duyệt.

Answer 4

này là xấu xí, nhưng đây là một tài liệu tham khảo FPS cho bạn: http://jsfiddle.net/yc6Lb/84/

Cụ thể sử dụng requestAnimationFrame() và có một bộ đếm FPS. Lưu ý sự khác biệt hiệu suất :)

Dưới đây là một BEAUTIFUL MÃ phiên bản: http://jsfiddle.net/neuroflux/Ey9uz/1/
Bạn đang chào đón nhất!