HTML/JS/CSS Изометрическая Сетка полупрозрачным щелчком - через мозаики
Я пытаюсь создать веб-приложение / игра, которая использует сторону - на 'изометрическом' представлении и прозрачных мозаиках. Я могу отобразить их хорошо (но не великий) использование формулы PHP, которая просто устанавливает каждое отделение (каждая мозаика) как position:absolute и устанавливает главные и левые параметры. Проблема состоит в том, как делают я ловлю, нажимает на мозаику, и позвольте мозаикам прозрачным щелчком битов - до мозаики ниже ее.
Пример моей проблемы по http://stuff.adammw.homeip.net/other/fv/farmville_2.html
3 ответа
Вы не сможете сделать это с элементами плитки сами по себе, так как они всегда прямоугольные. Вам нужно будет отслеживать положение мыши в родительском элементе, содержащем все плитки, и вручную определять, какие пиксели соответствуют каким плиткам.
Для изометрического отображения положения на плитку это было бы легко, но для этого нужно было бы принять положение точки как место «на земле»; это не позволит вам использовать данные маски изображения для проверки объектов, таких как деревья, которые визуализируются перед землей. (Вы все равно хотите это сделать? В настоящее время некоторые деревья полностью закрывают плитку земли под ними.)
Если вам действительно нужно выполнить проверку попадания по маске изображения, вы можете:
a. напишите сценарий для извлечения данных маски из изображения и включения их в исходный код JavaScript в виде закодированных двоичных битовых масок. Я сделал это для обнаружения столкновений в играх на JavaScript, но это не очень весело, поскольку может занимать много места, и вам придется повторно экспортировать данные при обновлении графики.
б. извлеките данные изображения для тестирования с помощью и getImageData . В этот момент вы также можете рассмотреть возможность использования холста для рендеринга, учитывая, что вы уже потеряли пользователей IE.
Поскольку это это игра, основанная на плитках, возможно, вам стоит просто определить, с какой плиткой взаимодействует пользователь, используя простую формулу. Используйте какой-нибудь javascript, чтобы определить координаты щелчка или другого действия. затем выполните арифметические действия, чтобы выяснить, на какой плитке действовать. Имеет ли это смысл?
В остальном я согласен с bobince. Ваш подход, вероятно, будет нелегким.
Вам необходимо использовать преобразования 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 /