Задать вопрос
  • Каким образом лучше реализовать такую карту на canvas?

    WblCHA
    @WblCHA
    Foint

    Alixx, опечатка же.)

    Почему же здесь так же не получится?

    Если так, то да, но тогда, имхо, лучше сделать наоборот, свг держать дисплей нон и когда надо диплей блок/флот/что угодно. Причём можно сделать визабилити хайден или опасити 0, чтобы даже теоретического мерцания не было.
  • Каким образом лучше реализовать такую карту на canvas?

    WblCHA
    @WblCHA
    Почему? А elementfrompoint разве не подойдёт?

    Возможно, я чего-то не понимаю, но каким образом он может вообще подойти? Канвас же будет на переднем плане. Разве что elementsFromFoint, но если нужен эвент на ховер, то эта операция на моусмув будет достаточно ресурсопрожорлива, хотя здесь могу ошибаться.

    Но! Не получится для фона загружать картинки целиком - они весят десятки мб и размером 20000х10000px (примерно пишу). Не каждый слабый комп/ноут такое потянет. Поэтому такие картинки нарежу на квадраты и буду подгружать по мере надобности.

    Разумно. Так же предложу дополнительно сжать изображения, до 90-95%, если речь о жпг, глазом не отличишь от оригинала.

    А как с свг? Его можно загрузить целиком, да, но спозиционировать и уменьшить масштаб под текущий размер фона можно?

    Естественно.
  • Каким образом лучше реализовать такую карту на canvas?

    WblCHA
    @WblCHA
    даже для рисования можно поверх всего канвас налепить и по нему рисовать путь

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

    И как быть с передвиганием карты?

    Тут как раз вообще нет проблем, будет 1 большой свг с множеством элементов внутри. Достаточно будет просто сдвигать свг. Или же просто использовать стандартные полосы прокрутки.

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

    Я не думаю, что возникнут проблемы с производительностью, а значит ничего не мешает сразу отрендерить весь свг. По сути, это дом, часть дома будет за границами экрана, что абсолютно нормально.

    В целом, если что, пиши сюда, мне самому интересно, если найдутся какие-то неприятные (или приятные) нюансы, которые я пропустил.
  • Каким образом лучше реализовать такую карту на canvas?

    WblCHA
    @WblCHA
    нельзя рисовать путь как в paint

    Alixx, до сих пор не могу понять зачем это надо, но ладно.
    Есть полилайн: https://www.w3schools.com/graphics/svg_polyline.asp
    Если нужны кривые, то тогда путь, но он сложнее: https://www.w3schools.com/graphics/svg_path.asp

    И прямой доступ к объектам через инструмент. Т.о. можно просто в стилях объектов менять их места, удалять и менять как угодно.

    И каким же образом это является минусом? Вернее это минус, только канвас от него вообще никак не спасает, как и всё, что находится у клиента.
    Во-первых, все данные, с которыми будет работать код у клиента, будет, внезапно, в самом коде. То есть изменение дома приведёт лишь к визуальным изменением у клиента, не более.
    Во-вторых, всё, что не относится к отображению информации, должно выполняться на сервере.
    В-третьих, на сервере должна проводиться полная проверка валидности действий, поскольку клиенту ничего не мешает отправить запрос серверу через тот же fetch, вручную прописав всё, что он хочет.

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

    И будет постоянная динамика - одновременное движение и героев других игроков и их круги обзора

    Это всё статика (почти). Обзор всё равно завязан на иконке/фигурке игрока и с свг будет достаточно перемещать весь элемент героя со всем, что к нему относится.
    Единственное "но": если объекты надо перемещать с разной скоростью, то реализацию надо будет писать самому. Или искать готовую. Но в канвасах её итак и так придётся реализовывать.

    анимация разных объектов и природы (напр., течение воды).

    У меня большие сомнения, что ты собираешься реализовывать детализированную анимацию с кучей кадров. То есть всё это можно реализовать через видео/таймауты, но тут надо смотреть, конечно.
    В любом случае никто не мешает использовать анимированный канвас на фоне прозрачного элемента свг.

    И про динамику ты неверно меня поняла. У тебя динамики будет минимум. В большинстве текущих браузерных игр канвас необходим, т.к. каждый следующий кадр будет практически новым, а у тебя есть карта, которая сама по себе статична. Объекты на карте большую часть времени тоже статичны.
    На выходе у тебя получится статичная игра с элементами динамики, а ты в первую очередь смотришь на динамичные игры с элементами статики, что в корне неверно.
  • Каким образом лучше реализовать такую карту на canvas?

    WblCHA
    @WblCHA
    Alixx, что за абсолютное непонимания, что каждой технологии своё место?
    Хорошо, давай взглянем на https://surviv.io/, вся игра на канвасе, кроме, внезапно, всех кликабельных элементов, они на дивах.
    Искать схожий пример мне лень, поскольку абсолютное большинство браузерных игр вообще не имеют кликабельного интерфейса непосредственно во время игры.
    Канвас нужен при постоянной динамике, тебе же нужна практически статичная сцена со множеством кликабельных элементов сложной формы. Так скажи мне, зачем тебе в таких условиях канвас? В 99% играх позиция мыши использует лишь для расчёт направления? И это очень простая операция, в отличии от расчёта пересечений с объектами сложной формы.

    Короче, хочешь писать на канвасах? Пиши. Только я себе слабо представляю, как ты реализуешь всё, что задумала за адекватное количество времени.
  • Как исправить выведение [object Object] из функции?

    WblCHA
    @WblCHA
    for (const x = 0; x <= n; x++)

    На этих строчках у вас дичь какая-то.
  • Как найти пересечения элементов в массиве?

    WblCHA
    @WblCHA
    Роман Якимчук, спасибо, хорошая статья, только её стоило прочитать и вам:

    However, I should be aware of what are the constraints of the software I’m writing. If I knew the list would accommodate a few pairs of elements and never grow in size, and if the sequence is in the heart of a process that potentially can block the render thread for too long, I would put more thinking on it.

    Отличное уточнение, которое как раз под ваш случай.
  • Как найти пересечения элементов в массиве?

    WblCHA
    @WblCHA
    Роман Якимчук, подобные мелкие оптимизации вообще-то делаются на автомате в процессе написания простейшего кода, так что нет, я не придираюсь.
  • Каким образом лучше реализовать такую карту на canvas?

    WblCHA
    @WblCHA
    Alixx, и да, я уже полгода пытаюсь начать делать (лень) нечто схожее, что и ты, так что я тебе расписал то, как я такое реализовывал бы.
    Изначально я тоже планировал делать всё через канвас, но потом я пришёл к выводу, что это крайне геморойно.
  • Каким образом лучше реализовать такую карту на canvas?

    WblCHA
    @WblCHA
    Рисовать путь надо "как в paint",

    Alixx, зачем? Это довольно сложная и очень бесполезная реализация в рамках данной задачи. Тебе достаточно фиксировать по каким объектам свг прошёлся курсор во время указания пути.

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

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

    У пользователя есть прямой доступ ко всем элементам через инструмент разработчика.

    И?

    Плавной последовательной анимации не сделать - только то, что может css + js.

    Эм, а что мешает? Более того, с учётом того, что это часть дома, транзишн на элементы свг также прекрасно воздействует, в то время как на канвасе всю плавность придётся реализовывать самой.

    Получается как-то ещё более загонно, чем на канвасе.

    Канвас 2д ─ это достаточно низкоуровневые операции, в следствии чего множество желаемых эффектов придётся воплощать самостоятельно.
    Так что если есть такое большое желание поработать с канвасом, то готовься страдать.)
  • Каким образом лучше реализовать такую карту на canvas?

    WblCHA
    @WblCHA
    Alixx, ничего не мешает делать всё тоже самое через свг.
    Вот сайт по созданию структуры БД, полностью на свг: https://nosqldbm.ru/
  • Каким образом лучше реализовать такую карту на canvas?

    WblCHA
    @WblCHA
    Alixx, в данном случае можно полностью всё сделать на свг.
    Собственно, мне неясно что тебе неясно из скинутых мной ссылок? Карту можно на бекграунд поставить, но лучше разрезать и в свг запихнуть фоном запихнуть. Хотя можно и неразрезать, а просто цссом смещать картинку в нужную позицию.
    Впрочем, чтобы сгенерировать path для свг стоит разметить области и далее пнгшку в свг конвертировать.
  • Как найти пересечения элементов в массиве?

    WblCHA
    @WblCHA
    return [...list, [from, to]];

    Роман Якимчук, серьёзно? На каждой итерации пересоздавать массив?
  • Как из объекта получить 5 свойств с наибольшим весом?

    WblCHA
    @WblCHA
    alex4answ, но мой вариант скорее к лаконичным относится, если нужна скорость, то как минимум, скорее всего, надо будет от сорта отказаться, но не факт, потому что он, очевидно, хорошо оптимизирован и собственноручное решение банально может оказаться хуже.
    Впрочем, ещё всё очень сильно будет зависеть от количества ключей в объекте.
  • Как сократить код JS?

    WblCHA
    @WblCHA
    Василий Банников, дык там неважно, что лежит, конструкция ТСа найдёт ту же ноду, что у него есть, там нету опция найти чт-то другое.
  • Как сократить код JS?

    WblCHA
    @WblCHA
    Василий Банников, Daniil Vasilyev,
    Господа, может я упоролся, но разве эта всратая конструкция:

    document.querySelectorAll(`.value1 [class^=line]`).forEach(div => {
          document.querySelector(`.value1 .${div.className}`).classList.add('visible');
        });

    не равнозначна этой?
    document.querySelectorAll(`.value1 [class^=line]`).forEach(div => {
          div.classList.add('visible');
        });

    ТС же ищет то, что уже нашёл, разве нет?
  • Как исправить выведение [object Object] из функции?

    WblCHA
    @WblCHA
    DmитрNй ---, да уж... Питонист пришёл в жс и забыл, что это другой язык.
    Что это?
    for( i in a.length)
    Что это?
    [(a[i],b[i])]
    И что это за использование объектов вместо массивов?
    var a = {}
        var b = {}
        var c = {}
        for (var x = 0; x < (n+1); x++) {
            a[x] = [(Math.round(cos(2*pi/n*x)*r))]
            b[x] = [(Math.round(sin(2*pi/n*x)*r))]
        for( i in a.length) {
            c[i] = [(a[i],b[i])]
        }
  • Как решить вопрос с нестабильным скриптом npm run dev?

    WblCHA
    @WblCHA
    Quintis, естественно, без всл на моём рабочем ноуте работать в принципе невозможно, особенно с гитом. Разница в скорости работы огромная и чем слабее железо, тем выше разница.
  • Кто несёт ответственность за гарантию ноутбука?

    WblCHA
    @WblCHA
    Вот тут они, вероятно, неправы.

    Думаю таки правы, поскольку:
    повреждения, возникшие по вине пользователя

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