Решение: Каждый раз, когда генерируется новое дерево, оно сортирует деревья по позиции Y
trees.sort(function(a, b) {
return parseFloat(a.Y) - parseFloat(b.Y);
});
Итак, допустим, у меня есть этот пустой массив:
trees[];
И у меня есть таймер, генерирующий эти деревья со случайными позициями.
function generateTrees() {
if(tick % 50 === 0) {
trees.push({
X: randomNumber,
Y: randomNumber,
H: 60,
W: 30,
image: treeImage
});
}
}
Так что он генерирует деревья, и все идет хорошо. Но иногда деревья перекрывают друг друга при рисовании, и я в порядке с этим. Но проблема в том, что деревья, сгенерированные над другими деревьями на оси Y, иногда рисуют поверх тех, что ниже, Вот пример. Я пытаюсь смоделировать с высоты птичьего полета 3D-i sh поэтому я хотел бы нарисовать эти объекты за объектами, расположенными ниже по оси Y.
У меня есть этот код для рисования, и я пробовал операторы if, но я не уверен, как бы это сделать с массивами и одним числом 'i':
function draw() {
for(i = 0; i < trees.length; i++) {
ctx.drawImage(trees[i].X,trees[i].Y,trees[i].W,trees[i].H);
}
}
Может ли кто-нибудь указать мне правильное направление на то, как я могу реализовать это решение? Пожалуйста и заранее спасибо.