HTML / JS / CSS Изометрическая сетка с полупрозрачными прозрачными плитками

Question

Я пытаюсь создать веб-приложение / игру, которая использует боковой «изометрический» вид и прозрачные плитки. Я могу отобразить их нормально (но не очень), используя формулу PHP, которая просто устанавливает каждый div (каждую плитку) как position: absolute и устанавливает верхний и левый параметры. Проблема в том, как отловить щелчки на плитке и позволить плиткам с прозрачными битами переходить на плитку под ней.

Пример моей проблемы на http://stuff.adammw.homeip.net/other/fv/farmville_2.html

Answer 1

Вам необходимо использовать преобразования CSS3 или матричное преобразование в IE.

Синтаксис выглядит примерно так:

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

Пара хороших примеров:

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

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

Answer 2

Вы не сможете сделать это с самими элементами плитки, так как они всегда прямоугольные. Вам нужно будет отслеживать положение мыши внутри родительского элемента, содержащего все плитки, и вручную определять, какие пиксели соответствуют каким плиткам.

Для изометрического отображения положения на плитку это было бы легко, но для этого нужно было бы взять точку в качестве точки «на земле»; это не позволит вам использовать данные маски изображения для проверки объектов, таких как деревья, которые визуализируются перед землей. (Вы хотите сделать это в любом случае? В настоящее время некоторые деревья полностью затеняют плитку под ними.)

Если вам действительно нужно провести тест по маскам изображения, вы можете:

а. Напишите сценарий для извлечения данных маски из изображения и включения их в источник JavaScript в виде закодированных двоичных битовых масок. Я сделал это для обнаружения столкновений в играх JavaScript, но это не очень весело, так как может занять много места, и вам придется реэкспортировать данные при обновлении графики.

б. Извлеките данные изображения для тестирования, используя <canvas> и getImageData. В этот момент вы можете рассмотреть возможность использования canvas для рендеринга, учитывая, что вы уже потеряли пользователей IE.

Answer 3

Поскольку это игра на основе плиток, возможно, вам следует просто определить, с какой плиткой взаимодействует пользователь, с помощью простой формулы. Используйте некоторый JavaScript, чтобы определить координаты щелчка или другого действия. затем сделайте некоторую арифметику, чтобы выяснить, на какую плитку действовать. Имеет ли это смысл?

В противном случае, я согласен с Бобинсом. Ваш подход, вероятно, не сработает легко.