Не создаю новую тему так как это всё тот же скрипт практически с тем же вопросом. Надеюсь это не проблема.
Сделал разметку, расставил шашки, узнал как их выбирать мышкой. Но! Появились старые и пару новых проблем:
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);
