Как этот объект может быть добавлен к определенной плитке на изометрической карте?

Question

У меня есть изометрическая карта с выбираемыми плитками. Карта состоит из матрицы, такой как $('div').gameMap({map:[[{"tile":"tile_0","object":"anObjectOnTile"},{"tile":"tile_3","object":""}], [{...}]],mapsize:3}); Если у плитки есть что-то в пределах object:"", то у этой плитки есть этот объект (в моем случае, изображение нефтяной вышки) поверх этой плитки.

Существует кнопка «Поместить», при нажатии которой объект нефтяной вышки должен быть помещен поверх текущей выбранной плитки.

Однако я столкнулся с двумя проблемами:

1. Зная, какая плитка выбрана в данный момент

2. Добавление одной нефтяной вышки

Сначала я хотел найти способ изменить матрицу карты, чтобы вставить имя объекта (oilDerrick) в параметр объекта плитки, но теперь я думаю, что лучшим решением было бы добавить oilDerrick к плитке. , Я не могу понять, как добавить к определенной плитке, а не каждую плитку.

У меня настроен код для просмотра и игры: http://jsfiddle.net/briz/jdhPW/13/

Для просмотра в матрице карты установлен объект oilDerrick, который можно удалить, удалив слово oilDerrick в матрице

Я играл с $(".tile").append($('.oilDerrick'));, хотя я знал, что это добавится к каждой плитке. Но я просто недостаточно знаю о добавлении, чтобы понять, как ограничить его одним экземпляром.

Каждая плитка имеет уникальный идентификатор. Я также попробовал это, чтобы добавить oilDerrick к определенной плитке:

$("#placeButton").click(function()
{
      for (var y in config.map) 
      {
            for (var x in config.map[y]) 
            {
                document.getElementById(obj.attr('id') + '_tile_' + x + '_' +y).appendChild(".oilDerrick");
            }
      }
}

Но это тоже не помогло. Я думаю, что я иду в правильном направлении, хотя? Кто-нибудь может помочь?

Answer 1

Я сделал некоторые изменения .

В вашем коде небольшой беспорядок.Например, вы используете jquery, но существует множество прямых манипуляций с DOM.

.style.background = ...
// should be
.css("background",...)

И самое важное:

document.getElementById(...)
// should be
$("#...")

Проще, не правда ли?Тогда проблема решается просто путем создания переменной currentTile, и когда пользователь выбирает один тайл, он сохраняет его.Если щелкнуть «место», $(currentTile).append($('.oilDerrick')); И нефтяная вышка переместится туда, где находится выбранная плитка.

В любом случае, более подробную информацию вы можете увидеть в ссылке.