2012-10-15 43 views
10

player stackCó thư viện vật lý JavaScript nào hoạt động với các phần tử HTML như divs thay vì trong canvas không?

Tôi đang làm việc trên một ngăn xếp đơn giản cho trò chơi nơi người chơi di chuyển các phần được đánh số xung quanh để theo dõi họ gần như thế nào để hoàn thành việc thu thập một tay thắng.

Hiện tại tôi đã sử dụng tính năng kéo và phân tách của giao diện người dùng jQuery. Nó là tốt để bắt đầu dễ dàng nhưng miếng có thể được di chuyển chỉ có một mảnh tại một thời điểm: http://cssdeck.com/labs/cowmmudd/4.

  • Tôi muốn thuê ngoài di chuyển các phần xung quanh thành thư viện vật lý JavaScript thực thay vì sử dụng jQuery UI. (Để khi di chuyển màu xanh dương 4 ở hàng trên cùng bên trái, nó sẽ buộc tất cả các mảnh trên hàng đó lại với nhau.)
  • Tôi muốn tiếp tục sử dụng các phần tử HTML bình thường để thể hiện các phần của chúng lý do. (Tất cả các thư viện vật lý Javascript Tôi đã lấy một cái nhìn tại sử dụng canvas nhưng tôi muốn đạt te giống như Google đã từng làm: http://mrdoob.com/projects/chromeexperiments/google-gravity/)

Ai đó có thể cung cấp một ví dụ Minimalistic kiểm soát vị trí và va chạm bình thường, không- các phần tử HTML trong canvas sử dụng thư viện vật lý JavaScript tốt nhất mà chúng biết?

+0

Bạn có chắc chắn sử dụng một thư viện bổ sung bên ngoài là con đường để đi? những gì về chỉ kiểm tra các gạch trong cùng một chiều cao khi thả và nếu chúng có thể được di chuyển trái animate chúng ở đó? –

+1

@BenjaminGruenbaum Tôi không muốn viết nhiều mã không thể duy trì được vì tôi là một noob hoàn chỉnh về vật lý và toán học và hình học, bạn đặt tên cho nó. Tôi muốn khai báo các đặc tính của các đối tượng trò chơi và có một thư viện thích hợp để xử lý các va chạm và sắp đặt cho tôi. –

+1

Phiên bản JS của box2d có trình gỡ lỗi gỡ lỗi bằng canvas, nhưng đó chỉ là mặc định. Bạn có thể hiển thị các đối tượng theo bất kỳ cách nào bạn muốn - mô phỏng và bản vẽ độc lập. –

Trả lời

4

Ví dụ đơn giản nhất tôi đã tìm thấy cho đến nay: http://bl.ocks.org/3411189

Cập nhật: Một thích ứng đơn giản để miếng của tôi: http://cssdeck.com/labs/fe3z2cfx/6

+1

Có phải một trong các liên kết này có bị xóa mà không có cảnh báo hoặc chúng là đồ đạc cố định không? Trong hầu hết các trường hợp, bạn nên dán mã thực tế vào câu trả lời của mình và tham khảo liên kết. Nếu không, câu trả lời của bạn sẽ trở thành vô dụng nếu các nguồn tài nguyên đột nhiên biến mất. Xem thêm http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers –

+0

@RobertHarvey: bạn nói đúng, tôi sẽ chỉnh sửa cssdeck theo lời đề nghị của bạn! –

+0

@RobertHarvey: Tôi đã cập nhật câu trả lời của mình khi nhúng hai đoạn mã JS ngắn và thêm tham chiếu vào các nguồn ban đầu của chúng. –