Javascript "Jigsaw puzzle" với hình dạng bất thường .png

Question

Soooo, những gì tôi đang cố gắng làm về bản chất là một trò chơi ghép hình. Ở phía bên trái là một khu vực có một tá các tệp .png chồng chéo của các mảnh giấy "bị xé" (tất cả các hình dạng bất thường khác nhau với alpha) khi đặt lại với nhau, để ở bên phải, tạo thành một tờ giấy với ghi chú trên đó. Một hình ảnh (bỏ qua các phần đã xoay):

Tôi không biết điều gì mới, nhưng hai vấn đề chính của tôi khi phát triển là nó phải hoạt động trên các thiết bị ie8 + và trên cảm ứng. Vì vậy, điều này có nghĩa là không có đèn flash (nơi này sẽ được rất dễ dàng) và không có vải (ngu ngốc tức là); mà lá tôi với js và có thể svg?

Phần kéo và thả trong js đủ dễ nhưng vấn đề tôi gặp phải là, vì tôi chắc chắn bạn biết, kênh alpha bị bỏ qua và phần tách rời không phải là hình chữ nhật. Mà làm cho điều này không sử dụng được cho rằng miếng là một chồng với các mảnh chồng lên nhau.

Tôi có thể thực hiện phát hiện lần truy cập dạng hạt khi thả bằng cách sử dụng bản đồ hình ảnh và đặt biến trên di chuột qua.

Tôi đã xem xét rất nhiều (ở đây + google) và đã thử một số ý tưởng nhưng tôi không thể giải quyết vấn đề chọn/kéo hình dạng bất thường. Bất kỳ ý tưởng?

Cảm ơn thời gian của bạn.

Answer 1

Không phải là ExplorerCanvas một tùy chọn cho bạn? Tôi nghĩ rằng điều đó sẽ cho phép bạn tạo ra một giải pháp dựa trên canvas. Đó sẽ là tốt hơn nhiều so với bất cứ điều gì thực hiện với đồng bằng thao tác phần tử html thông qua javascript

Answer 2

Low-tech giải pháp

yếu tố lồng nhau với vị trí tuyệt đối

Nếu bạn sẵn sàng chi tiêu thêm một chút thời gian, có một cách để đạt được điều này khá chặt chẽ, mà không cần phải sử dụng Flash, Canvas, SVG hoặc thậm chí là bản đồ hình ảnh. Và không giống như bản đồ hình ảnh, nó cho phép bạn lồng nội dung liên quan bên trong mỗi điểm phát sóng nếu cần (ví dụ: cửa sổ bật lên).

Trong trường hợp đơn giản nhất, bạn có thể sử dụng một điểm phát sóng siêu liên kết hình chữ nhật đơn cho mỗi phần của câu đố. Rõ ràng là hạn chế rất nhiều phạm vi của các hình dạng bạn có thể hỗ trợ (mà không can thiệp với các yếu tố chồng chéo).

Tuy nhiên, nếu bạn lấy thẻ siêu liên kết đó và cung cấp cho nó một số thẻ con, và cung cấp cho từng vị trí tuyệt đối (liên quan đến siêu kết nối) và áp dụng phần thích hợp của hình ảnh vào nền sau đó bạn có thể "xây dựng" hình dạng bất thường hình ảnh chiếm một điểm nóng bất thường duy nhất, với sự can thiệp tương đối ít với các yếu tố chồng chéo.

Có hiệu lực, hình ảnh (có các vùng trong suốt) được coi là tệp sprite, với thẻ siêu liên kết và thẻ con span mỗi phần chiếm một phần của tệp "sprite". Hầu hết các phần trong suốt của hình ảnh sẽ không bị chiếm bởi thẻ siêu liên kết hoặc thẻ span.

Hầu hết các hình có thể được tạo bằng thẻ siêu liên kết và 4 - 10 nhịp. Cấp, càng có nhiều hình dạng bất thường, thì càng có nhiều nhịp nó sẽ đòi hỏi.

Tôi đã thực hiện việc này trước đây, để tạo điểm phát sóng cho từng tiểu bang trên bản đồ Hoa Kỳ mà không sử dụng bản đồ hình ảnh (hoặc Flash, Canvas, SVG) và nó không có vấn đề gì suy nghĩ.Nó chỉ đòi hỏi một chút thời gian để tìm ra các chi tiết về cách chia nhỏ từng hình dạng thành số lượng hình chữ nhật phù hợp.

Việc nắm bắt

Làm tròn lỗi trên thiết bị di động

Dưới đây là đánh bắt, và đó là một doozy. Khi một trang web được chia tỷ lệ trên thiết bị di động (và trang thông thường hầu như luôn được thu nhỏ trên các thiết bị nhỏ hơn), giới thiệu lỗi làm tròn vị trí px của thẻ siêu liên kết và thẻ span có thể thay đổi ít nhất 1 pixel theo chiều ngang và/hoặc theo chiều dọc. Điều này cũng xảy ra nếu các trình duyệt trên máy tính được thu nhỏ; nó chỉ là các trình duyệt máy tính để bàn thường không được thu nhỏ.

Điều gì sẽ xảy ra là bạn sẽ có xu hướng gió lên với 1 pixel hoặc hơn tách (hoặc chồng chéo) giữa các phần khác nhau của mỗi hình dạng. Trong nhiều trường hợp, điều đó sẽ có xu hướng rất rõ ràng và không được chấp nhận một cách trực quan. Và tùy thuộc vào việc triển khai, các vị trí có thể thay đổi bằng 2px hoặc 3px. Khi nó xảy ra rất khó để giải quyết, và có giới hạn cho bao nhiêu của nó có thể được giải quyết.

Cuối cùng tôi đã kiểm tra, Firefox là trình duyệt duy nhất đủ thông minh về làm tròn giá trị px trên các trang được chia tỷ lệ để tránh sự cố này. Hy vọng rằng các trình duyệt khác cuối cùng sẽ hỗ trợ nó tốt hơn, vì ngay cả các trang đơn giản thường bị lỗi làm tròn.

Giải pháp

riêng những hình ảnh từ các điểm nóng

Các lỗi làm tròn số là không nhiều của một vấn đề với các điểm nóng (trong đó chính xác là không quan trọng). Trường hợp nó thực sự gây ra vấn đề là với hình ảnh (khi bạn nhìn thấy một hình ảnh không xếp hàng ở nơi cần).

Có thể để tránh điều tồi tệ nhất của hình ảnh làm tròn lỗi bằng cách làm như sau:

• có một bộ mã HTML cho các điểm nóng, giống như mô tả ở trên, ngoại trừ không hiển thị bất kỳ phần hình ảnh trong các điểm nóng. Cung cấp cho họ tất cả nguồn gốc trong suốt.
• Có một bộ mã HTML khác cho hình ảnh. Mỗi phần tử sẽ là một phần tử hình chữ nhật duy nhất hiển thị tất cả hình ảnh.
• Đặt mỗi hình ảnh ở cùng vị trí với điểm phát sóng có liên quan.
• Đảm bảo tập hợp các điểm phát sóng và tập hợp các hình ảnh đều có cùng thứ tự z-index. Tất cả các điểm nóng sẽ nằm trên tất cả các hình ảnh, nhưng trong các điểm nóng và trong các hình ảnh, thứ tự cần nhất quán.
• Khi điểm phát sóng cho một đoạn được kéo, hãy cập nhật vị trí của hình ảnh liên quan để giữ chúng ở cùng một vị trí. Trong thực tế, hình ảnh đổ bóng lên điểm nóng trong khi nó đang bị kéo.