25.07.2017, 17:40
|
|
Аспирант
|
|
Регистрация: 02.07.2017
Сообщений: 83
|
|
|
двухмерный массив(2)
привет, есть поле в канвасе, и 2 функции образующих это поле(?), не пойму как они связаны с самим полем. Я понимаю это так, первая функция canvas.onclick - в ней мы делим поле на 30 частей по горизонтали и вертикали, и туда куда мы нажимаем мышкой, ставится единица. Но совсем не понимаю, как функция goLife() связывается с этим полем, как она его делит и как она к нему относится 
В html-run почему-то не рисуется квадрат.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#c1 {
width: 300px;
height: 300px;
border: 3px solid black;
margin: 40px;
}
</style>
</head>
<body>
<canvas id="c1" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');
var mas =[];
canvas.onclick = function(event){
var x = event.offsetX;
var y = event.offsetY;
console.log(x);
console.log(y);
x = Math.floor(x/10); //300 /10 = 30
y = Math.floor(y/10); //300 /10 =
mas[y][x]=1;
console.log(mas);
}
function goLife(){
var n=30, m=30;
for (var i=0; i<m; i++){
mas[i]=[];
for (var j=0; j<n; j++){
mas[i][j]=0;
}
}
}
goLife();
</script
</body>
</html>
Последний раз редактировалось shoopik, 25.07.2017 в 18:18.
|
|
25.07.2017, 18:09
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
shoopik,
Массив mas предварительно стоило бы объявить - смотрите ошибки в консоли.
|
Сообщение от shoopik
|
|
В html-run почему-то не рисуется квадрат.
|
Что-то в коде незаметно никакого рисования
|
|
25.07.2017, 18:14
|
|
Аспирант
|
|
Регистрация: 02.07.2017
Сообщений: 83
|
|
Сообщение от Dilettante_Pro
|
shoopik,
Массив mas предварительно стоило бы объявить - смотрите ошибки в консоли.
Что-то в коде незаметно никакого рисования
|
Исправил ) Я имел ввиду там квадрат канваса, рисования пока здесь нет, стили забыл
Последний раз редактировалось shoopik, 25.07.2017 в 18:19.
|
|
25.07.2017, 22:00
|
|
Аспирант
|
|
Регистрация: 02.07.2017
Сообщений: 83
|
|
|
подумал немного, получается, что при клике x и y координаты передаются в значения [i][j] и ставится значение 1, которое по умолчанию ноль, понимаю как делит квадрат этот х и у, но не понимаю каким образом его делит массив [i] и [j], т.е. каким вобще образом этот массив заносится в это поле
|
|
25.07.2017, 23:41
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
canvas сохранение только отмеченных клеток
shoopik,
 ... для примера
отмеченный квадрат можно стереть повторным кликом.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#c1 {
width: 300px;
height: 300px;
border: 3px solid black;
margin: 40px;
}
</style>
</head>
<body>
<canvas id="c1" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');
var mas = {};
canvas.onclick = function(event){
var x = event.offsetX;
var y = event.offsetY;
console.log(x);
console.log(y);
x = Math.floor(x/10)*10;
y = Math.floor(y/10)*10;
(mas[y]= mas[y]||{}) && mas[y][x]==1 ? (delete mas[y][x],!Object.keys(mas[y]).length && delete mas[y],ctx.clearRect(x,y,10,10)) : (mas[y][x]=1,ctx.fillRect(x,y,10,10));
console.log(mas);
}
</script>
</body>
</html>
|
|
26.07.2017, 00:48
|
|
Аспирант
|
|
Регистрация: 02.07.2017
Сообщений: 83
|
|
|
Сообщение от рони
|
(mas[y]= mas[y]||{}) && mas[y][x]==1 ? (delete mas[y][x],!Object.keys(mas[y]).length && delete mas[y],ctx.clearRect(x,y,10,10)) : (mas[y][x]=1,ctx.fillRect(x,y,10,10));
|
Можно поподробней вот это место ? Сложновато для меня,
(mas[y]= mas[y]||{})
если значение [y] в массиве равен самому себе или хоть чему ? 
и mas[y][x]==1 - значениям [y] и [x] - присвоена единица, тогда мы
delete mas[y][x] - удаляем это значение,
!Object.keys(mas[y]).length - длина массива Y, не понимаю что делает она и восклицательный знак перед ней)))
&& delete mas[y],ctx.clearRect(x,y,10,10)) - и удаляем массив [y] и очищаем этот квадратик
или же если условие не выполняется, мы присваиваем квадратику единичку и заполняем его  |
|
26.07.2017, 01:08
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
Сообщение от shoopik
|
|
(mas[y]= mas[y]||{})
|
if(mas[y]=== null) mas[y] = {}
else mas[y] =mas[y]
|
Сообщение от shoopik
|
|
!Object.keys(mas[y]).length
|
нет ключей length = 0 , !0 === true.
условно if(mas[y] === {}) то удаляем mas[y] , так как он пуст.
Последний раз редактировалось рони, 26.07.2017 в 01:11.
|
|
26.07.2017, 10:42
|
|
Аспирант
|
|
Регистрация: 02.07.2017
Сообщений: 83
|
|
|
Сообщение от рони
|
if(mas[y]=== null) mas[y] = {}
else mas[y] =mas[y]
нет ключей length = 0 , !0 === true.
условно if(mas[y] === {}) то удаляем mas[y] , так как он пуст.
|
Спасибо, эт я понял, не совсем понял запись вида:
(mas[y]= mas[y]||{}) && mas[y][x]==1 ? (delete mas[y][x],!Object.keys(mas[y]).length && delete mas[y],ctx.clearRect(x,y,10,10)) : (mas[y][x]=1,ctx.fillRect(x,y,10,10));
Получается здесь типа такого:
если выполняется условие
mas[y]= mas[y]||{}) && mas[y][x]==1
тогда жс делает
1) delete mas[y][x], 2) !Object.keys(mas[y]).length && delete mas[y], 3) ctx.clearRect(x,y,10,10))
-вот эту часть не понял, по отдельности то понял, как они вместе работают я не понял
например есть mas[150][50]
1) delete mas[150][50] - удаляет эти элементы, дальше идёт
2)мы же уже удалили, зачем опять ? он же пустой у нас
и всё равно не догоняю запись такую: !x && y - я понял что они по отдельности делают, не понял про &&, перечитал про логические операторы, не догоняю
|
Цитата:
|
|
В классическом программировании И возвращает true, если оба аргумента истинны, а иначе – false:
|
3) очищает квадратик, ну это понял
если условие не выполняется , тогда
(mas[y][x]=1,ctx.fillRect(x,y,10,10))
Последний раз редактировалось shoopik, 26.07.2017 в 10:47.
|
|
26.07.2017, 11:51
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
Сообщение от shoopik
|
|
1) delete mas[150][50] - удаляет эти элементы, дальше идёт
|
удаляет один!!! элемент из обьекта(в одной строке может быть много элементов mas[150][49],mas[150][70], и т.д.)
|
Сообщение от shoopik
|
|
2)мы же уже удалили, зачем опять ? он же пустой у нас
|
если выше удалили последний элемент, то удалить и сам обьект (строку mas[150])
|
Сообщение от shoopik
|
|
(mas[y]= mas[y]||{}) && mas[y][x]==1 ? (delete mas[y][x],!Object.keys(mas[y]).length && delete mas[y],ctx.clearRect(x,y,10,10)) : (mas[y][x]=1,ctx.fillRect(x,y,10,10));
|
если строки нет то создать и если в этой строке есть ячейка по адресу x, то удалить ячейку, удалить строку если ячейка последняя была, стереть квадрат с поля с координатами x,y иначе создать ячейку, записать в неё 1 и нарисовать квадрат с координатами x,y .
Последний раз редактировалось рони, 26.07.2017 в 11:54.
|
|
26.07.2017, 12:32
|
|
Аспирант
|
|
Регистрация: 02.07.2017
Сообщений: 83
|
|
спасибо за объяснение, теперь понял  |
|
|
|
