двухмерный массив(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,
Массив mas предварительно стоило бы объявить - смотрите ошибки в консоли. Цитата:
|
Цитата:
|
подумал немного, получается, что при клике x и y координаты передаются в значения [i][j] и ставится значение 1, которое по умолчанию ноль, понимаю как делит квадрат этот х и у, но не понимаю каким образом его делит массив [i] и [j], т.е. каким вобще образом этот массив заносится в это поле
|
canvas сохранение только отмеченных клеток
shoopik,
:write: ... для примера отмеченный квадрат можно стереть повторным кликом.
<!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>
|
Цитата:
(mas[y]= mas[y]||{}) если значение [y] в массиве равен самому себе или хоть чему ? :help: и 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] и очищаем этот квадратик или же если условие не выполняется, мы присваиваем квадратику единичку и заполняем его :D |
Цитата:
else mas[y] =mas[y] Цитата:
условно 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))-вот эту часть не понял, по отдельности то понял, как они вместе работают я не понял :D например есть mas[150][50] 1) delete mas[150][50] - удаляет эти элементы, дальше идёт 2)мы же уже удалили, зачем опять ? он же пустой у нас и всё равно не догоняю запись такую: !x && y - я понял что они по отдельности делают, не понял про &&, перечитал про логические операторы, не догоняю Цитата:
если условие не выполняется , тогда (mas[y][x]=1,ctx.fillRect(x,y,10,10)) |
Цитата:
Цитата:
Цитата:
|
спасибо за объяснение, теперь понял :thanks:
|
| Часовой пояс GMT +3, время: 19:02. |