Я делаю игру, в которой персонаж игрока перемещается по сетке, которая является изображением SVG. Я не могу найти, как определить, будут ли координаты, по которым персонаж будет двигаться, быть цветом, который не допускает движения.
Само движение работает просто отлично, и, как и ожидалось, я просто не могу понять, как проверить цвет или есть другой способ обнаружить столкновение на одном SVG-изображении.
Вот SVG в файле HTML:
<svg width="600" height="580">
<svg viewBox="0 0 100 100" id="ViewBox">
<image x="0" y="0" xlink:href="doodmap.svg"></image>
<image x="40" y="40" width="18" height="18" xlink:href="Mage.svg"id="PlayerSprite"/>
</svg>
</svg>
Вот моя функция перемещения в файле javascript:
function downmove(){
if(playerstats.position.y < 580){
playerstats.position.y += 20;
viewboxy += 20;
document.getElementById("PlayerSprite").setAttribute("y", playerstats.position.y);
document.getElementById("ViewBox").setAttribute("viewBox", viewboxx + " " + viewboxy + " 100 100");
PMove();
}
}
Я ожидаю, что смогу определить цвет следующего квадрата и двигаться только в том случае, если следующий квадрат не определенного цвета.