Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 18.09.2018, 15:34
Аспирант
Отправить личное сообщение для drakulawz Посмотреть профиль Найти все сообщения от drakulawz
 
Регистрация: 13.08.2018
Сообщений: 79

j0hnik, мдэ....засиделся я сегодня, надо наверное перерыв сделать, только что сам заметил. А я всё гуглю, ищу, чё оно за ошибка такая... Жаль фейспалма тут нет.
Ответить с цитированием
  #12 (permalink)  
Старый 18.09.2018, 15:38
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

drakulawz,
eslint установите если у вас нет, ускоряет фикс такого рода рода ошибок.
Ответить с цитированием
  #13 (permalink)  
Старый 18.09.2018, 17:28
Аспирант
Отправить личное сообщение для drakulawz Посмотреть профиль Найти все сообщения от drakulawz
 
Регистрация: 13.08.2018
Сообщений: 79

Сообщение от j0hnik
eslint установите если у вас нет
когда-то пробовал, какие-то нестыки - ошибка при установке. Сейчас ещё раз попробую.
Ответить с цитированием
  #14 (permalink)  
Старый 18.09.2018, 17:35
Аспирант
Отправить личное сообщение для drakulawz Посмотреть профиль Найти все сообщения от drakulawz
 
Регистрация: 13.08.2018
Сообщений: 79

Сообщение от drakulawz
Сообщение от j0hnik
eslint установите если у вас нет
когда-то пробовал, какие-то нестыки - ошибка при установке. Сейчас ещё раз попробую.
Всё, вспомнил, он же в брекетсе стоит и так по умолчанию, по сему и не ставится... Ну, поставил ещё старую версию - ничего не поменялось.
Да, оно как и раньше, показывает в какой строке ошибка, но если человек жёстко тупит (как я) то даже такой сверх хэлп не помогает.
Ответить с цитированием
  #15 (permalink)  
Старый 19.09.2018, 12:53
Аспирант
Отправить личное сообщение для drakulawz Посмотреть профиль Найти все сообщения от drakulawz
 
Регистрация: 13.08.2018
Сообщений: 79

Не создаю новую тему так как это всё тот же скрипт практически с тем же вопросом. Надеюсь это не проблема.

Сделал разметку, расставил шашки, узнал как их выбирать мышкой. Но! Появились старые и пару новых проблем:
1. Шашки все стали белыми, точнее я могу менять цвет заливки но сделать три верхних ряда и три нижних ряда разного цвета не смог. Может сюда не подходят такие циклы? Или нужно делать, как раньше, - отдельно белые и отдельно синие?
2. Когда выбираю шашки (если включить в скрипт функцию с обрамлением) то, при их выборе мышкой, ко всем рамкам применяется функция select и уже не отменяется. Это происходит из-за того что мой конструктор ссылается на несколько похожих функций? Ведь метод ctx.stroke() есть в функции strokeArc() & selectArc() и, по методу конструктора Arc оно как-то "сливает" эти две функции?
3. Так же есть проблема с выбором - не могу найти правильные координаты для этого. Выбрать шашку могу только по клику на 1/4 круга. Это исправлял с помощью выражения: return x + x > lap.x && x < lap.x + lap.r && y + y > lap.y && y < lap.y + lap.r . Но если, после этого, можно выбрать верхние шашки (хоть и по две в некоторых местах), то при клике на нижние ряды выбирается по 3 сразу. Как правильно координаты взять? Создавать отдельный конструктор для этого?
4. Плюс, после выбора шашки, остаётся кружок - еле заметный но он там есть и если присмотреться то, всё таки, заметный. Я пробовал два варианта: ctx.globalCompositeOperation = 'destination-out' и ctx.clearRect(). Опять таки, из-за конструктора какой-то конфликт или это из-за цикла - после двух кликов удаляются все шашки и в доске делаются дырки. Вообще не пойму как эту функцию правильно осуществить. Может надо заново запускать отрисовку после удаления?

var canv = $('#canv')[0],
        ctx = canv.getContext('2d');

    var ww = 800,
        k = 20,
        kk = k - 5,
        w = ww - k / 2,
        v = w / 8,
        vv = v / 2,
        vd = vv + k,
        dr = vv - 10,
        up = v * 5,
        width = $('#w').val(), // высота из инпута;
        hight = $('#h').val(), // ширина из инпута;
        offset = 0; // переменная для анимирования таргета шашек;

    canv.width = width; //ширина канваса;
    canv.height = hight; //высота канваса;
    ctx.strokeRect(kk, kk, ww, ww); // внешняя рамка доски;
    ctx.strokeRect(k, k, w, w); // внутренняя рамка;
    ctx.fillRect(k, k, w, w); // заливка доски;

    // функция отрисовки шашек;
    var fillArc = function (x, y, r, sa, ea, cw) {
        for (var j = 0; j < 8; j++) {
            if (j == 3 || j == 4) continue; // переход между белыми и синими;
            ctx.fillStyle = j < 4 ? 'white' : 'blue'; //НЕ РАБОТАЕТ!
            ctx.beginPath();
            ctx.arc(x, y, r, sa, ea, cw);
            ctx.fill();
        }
    };

    // функция обрамления шашек;
    var strokeArc = function (x, y, r, sa, ea, cw) {
        for (var j = 0; j < 8; j++) {
            if (j == 3 || j == 4) continue; // переход между белыми и синими;
            ctx.strokeStyle = j < 4 ? 'blue' : 'white'; //НЕ РАБОТАЕТ!
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.arc(x, y, r, sa, ea, cw);
            ctx.stroke();
        }
    };

    // функция выделения шашек;
    var selectArc = function (x, y, r, sa, ea, cw) {
        ctx.strokeStyle = 'green';
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.setLineDash([8, 2]);
        ctx.lineDashOffset = -offset;
        ctx.arc(x, y, r, sa, ea, cw);
        ctx.stroke();

    };

    // реализация "бегущей" преривистой для функции выделения;
    function march() {
        offset++;
        if (offset > 100) {
            offset = 0;
        }
        selectArc();
        setTimeout(march, 20);
    };

    // функция удаления остаточного круга после взятия в таргет шашки;
    //    var circle = function (x, y, r, sa, ea, cw) {
    //        ctx.globalCompositeOperation = 'destination-out'
    //        ctx.arc(x, y, r, sa, ea, cw);
    //        ctx.fill();
    //    }

    // конструктор создания элементов кроме разметки доски;
    var Arc = function (x, y, r, sa, ea, cw) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.sa = sa;
        this.ea = ea;
        this.cw = true;
        this.selected = false;
    };

    // прототип шаблонов для отрисовок;
    Arc.prototype = {
        draw: function () {
            fillArc(this.x, this.y, this.r, this.sa, this.ea, this.cw);
        },
        frame: function () {
            strokeArc(this.x, this.y, this.r, this.sa, this.ea, this.cw);
        },
        stroke: function () {
            march();
            selectArc(this.x, this.y, this.r, this.sa, this.ea, this.cw);
        },
        //        clearCrcl: function () {
        //            circle(this.x, this.y, this.r, this.sa, this.ea, this.cw);
        //        },
        select: function () {
            this.selected = !this.selected;
        }
    };

    // создание разметки шахматной доски;
    for (var i = 0; i < 8; i += 2) {
        for (var j = 0; j < 8; j += 2) {
            ctx.clearRect(k + i * v, k + j * v, v, v);
            ctx.clearRect(k + (i + 1) * v, k + (j + 1) * v, v, v);
        }
    }

    var i = 0,
        lap = []; // массив с отрисованными объектами;

    // цикл отрисовки шашек;
    for (var j = 0; j < 8; j++) {
        if (j == 3 || j == 4) continue; // пропуск двух средних рядов клеток;
        for (var i = 0; i < 16; i += 4) {
            ctx.fillStyle = j > 4 ? 'white' : 'blue';
            lap.push(new Arc(vd + v * ((j + 1) % 2) + i * vv, (vd + v * j), dr, 0, Math.PI * 2, true));
        }
    };

    // функция для проверки координат клика;
    var isCursorInArc = function (x, y, lap) {
        return x > lap.x && x < lap.x + lap.r && y > lap.y && y < lap.y + lap.r;
    };

    // функция активация выделения шашки;
    canv.onclick = function (e) {
        var x = e.x,
            y = e.y;
        for (i in lap) {
            if (isCursorInArc(x, y, lap[i])) {
                lap[i].select();
            }
        }
    };

    // рисование шашек и рамки (после клика);
    setInterval(function () {
        for (i in lap) {
            lap[i].draw();
            lap[i].frame();
            if (lap[i].selected) {
                lap[i].stroke();
            }
        }
    }, 30);

Последний раз редактировалось drakulawz, 19.09.2018 в 12:57.
Ответить с цитированием
  #16 (permalink)  
Старый 19.09.2018, 13:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

drakulawz,
Сообщение от Rise
преимущества ООП подхода в общем и классов в частности
медитировать тут
https://javascript.ru/forum/project/...tml#post464453
Ответить с цитированием
  #17 (permalink)  
Старый 19.09.2018, 15:55
Аспирант
Отправить личное сообщение для drakulawz Посмотреть профиль Найти все сообщения от drakulawz
 
Регистрация: 13.08.2018
Сообщений: 79

Сообщение от рони
медитировать тут
...пожалуй лучше начать с азов.
Пройдусь по видеоурокам по канвасу. Ещё и js нативный надо подтянуть нехило, тугова-то у меня с этими всеми колбэками. Да, и как правильно писать код толком не пойму, только то и делаю, что пародирую...
Сейчас вот только понял, как важно писать сноски к каждой функции - реально помогает лучше ориентироваться в коде - прогресс!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите разобраться с функцией .height() kos0760 Элементы интерфейса 2 24.05.2017 23:51
canvas рисование окружности imedia Элементы интерфейса 2 30.05.2014 17:40
Рисование линий на JS без canvas grego Events/DOM/Window 3 17.10.2013 11:34
помогите разобраться с SWFObject iskatel111 Events/DOM/Window 0 11.09.2012 20:28
Подсчёт дней до конца акции - помогите разобраться со скриптом Chataine Общие вопросы Javascript 0 24.07.2011 14:48