Lưới Isometric HTML/JS/CSS với gạch nhấp nửa trong suốt

Question

Tôi đang cố tạo ứng dụng web/trò chơi sử dụng chế độ xem 'isometric' bên cạnh và các ô trong suốt. Tôi có thể hiển thị chúng ok (nhưng không tuyệt vời) bằng cách sử dụng một công thức PHP mà chỉ cần đặt mỗi div (mỗi gạch) như vị trí: tuyệt đối và thiết lập các tham số trên cùng và bên trái. Vấn đề là làm cách nào để tôi nắm bắt các nhấp chuột trên một ô xếp và cho phép các ô có các bit trong suốt nhấp qua vào ô bên dưới nó.

Một ví dụ về vấn đề của tôi là tại http://stuff.adammw.homeip.net/other/fv/farmville_2.html

Answer 1

Bạn sẽ không thể làm điều này với các yếu tố ngói bản thân, vì họ luôn hình chữ nhật. Bạn sẽ phải theo dõi vị trí chuột trong phần tử cha có chứa tất cả các ô và tự tìm ra các pixel tương ứng với các ô nào.

Để lập bản đồ đẳng vị của vị trí này, việc này sẽ dễ dàng, nhưng điều đó sẽ lấy vị trí điểm như một vị trí 'trên mặt đất'; nó sẽ không cho phép bạn sử dụng dữ liệu mặt nạ của hình ảnh đối với các đối tượng thử nghiệm như những cây biểu hiện trước mặt đất. (Bạn có muốn làm điều đó anyway Hiện nay một số cây hoàn toàn che khuất ngói đất bên dưới họ?.)

Nếu bạn thực sự cần phải nhấn thử nghiệm đối với mặt nạ hình ảnh, bạn có thể:

a. viết kịch bản để trích xuất dữ liệu mặt nạ từ hình ảnh và đưa nó vào nguồn JavaScript dưới dạng bitmap nhị phân được mã hóa. Tôi đã làm điều này để phát hiện va chạm trong các trò chơi JavaScript, nhưng nó không có nhiều niềm vui vì nó có thể mất nhiều không gian và bạn phải tái xuất dữ liệu khi bạn cập nhật đồ họa.

b. trích xuất dữ liệu hình ảnh để thử nghiệm bằng cách sử dụng <canvas> và getImageData. Tại thời điểm đó, bạn có thể cân nhắc sử dụng canvas để hiển thị, vì bạn đã mất người dùng IE.

Answer 2

Vì đây là trò chơi dựa trên hình xếp, có thể bạn chỉ cần xác định ô mà người dùng đang tương tác bằng cách sử dụng công thức đơn giản. Sử dụng một số javascript để xác định tọa độ của một nhấp chuột hoặc hành động khác. sau đó làm một số số học để tìm ra những gì gạch để hành động trên. Điều đó có ý nghĩa?

Nếu không, tôi đồng ý với bobince. Bạn đang tiếp cận có lẽ sẽ không làm việc dễ dàng.

Answer 3

Bạn cần sử dụng biến đổi css3 hoặc biến đổi ma trận trong IE.

Cú pháp trông giống như sau:

-webkit-transform: skew(0deg, -30deg) scale(1, 1.16); 
-moz-transform: skew(0deg, -30deg) scale(1, 1.16); 

Một vài ví dụ điển hình:

http://www.fofronline.com/experiments/cube/index.html

http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/