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

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

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

8
html isometric javascript tiles transparent

3 ответов

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

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

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

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

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

4

вам нужно использовать преобразования 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/

4

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

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

1