Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Шахматы HTML5

Автор: Areostar 8.9.2020, 21:46

как создать доску понял

Код


  <script>
            var canvas = document.getElementById("color_chessboard");
            var context = canvas.getContext('2d');
            canvas.width  = 300;
            canvas.height = 300;
            context.strokeStyle = '#B70A02'; // меняем цвет рамки
            context.strokeRect(15, 15, 266, 266);
            context.strokeRect(18, 18, 260, 260);
            context.fillStyle = '#AF5200'; // меняем цвет клеток
            context.fillRect(20, 20, 256, 256);
            for (i = 0; i < 8; i += 2)
                for (j = 0; j < 8; j += 2) {
                context.clearRect(20 + i * 32, 20 + j * 32, 32, 32);
                context.clearRect(20 + (i + 1) * 32, 20 + (j + 1) * 32, 32, 32);
            }
        </script>

1) Имеются SVG шахматных фигур как добавить их на доску?
2) как лучше реализовать drag and drop

Автор: ksnk 9.9.2020, 23:06

Нарисовать, очевидно...
https://stackoverflow.com/questions/3768565/drawing-an-svg-file-on-a-html5-canvas
?
Вариантов Драг и дропа дофига - можно по клику или началу драга на канвасе вычислять фигуру, в которую кликают и ставить над канвасом элемент с этой фигурой. Его драгать в нужное место, после чего ставить на доску и выкидывать-скрывать элемент. Тут довольно просто для броузера, но возможны сложности в реализации.
Проще каждую фигуру отдельным html элементом делать с абсолютным позиционированием и пользоваться стандартными D&D библиотечками.

Автор: Areostar 10.9.2020, 12:57

Спасибо за ответ!