Добавление слушателя события 'mousedown' в сетку, которая будет запускать все ячейки, если не происходит событие 'mouseup' - PullRequest
Новая
       40

Добавление слушателя события 'mousedown' в сетку, которая будет запускать все ячейки, если не происходит событие 'mouseup'

1 голос
/ 10 апреля 2020

Я все еще работал над проектом Graph Visualizer и не могу понять, как добавить mousedown прослушиватель событий во все ячейки. Я пытаюсь нарисовать структуру, похожую на стену. Позвольте мне объяснить, когда происходит событие mousedown, когда ячейка станет стеной (я добавлю немного цвета), и если событие mouseup не произойдет, все ячейки, через которые пройдет курсор, также станут стеной. Здесь я сталкиваюсь с двумя проблемами: мне удалось добавить прослушиватель событий в каждую ячейку, но я не могу определить, какая это была ячейка. Кроме того, я хотел бы знать, как создать непрерывные стены на mousedown.

. Любые предложения или советы высоко ценятся. 

var gridCols = 60;
var gridRows = Math.floor(screen.height / 25) - 2;
gridContainer.style.left = (screen.width-25*gridCols)/screen.width * 50+"%";
var matrix = [];
var found = false;


function sleep(ms) 
{
	return new Promise(resolve => setTimeout(resolve, ms));
}

function getCell(row, col)
{
	return document.querySelector(".row:nth-child("+(row+1)+") .gridsquare:nth-child("+(col+1)+")");
}

for(var i=0; i<20; i++) 
{
    matrix[i] = [];
    for(var j=0; j<60; j++) 
        matrix[i][j] = false;
}

function addWall()
{
	console.log('called');
}

function genDivs(rows, cols)
{ 
	var e = document.getElementById("gridContainer");
	for(var r = 0; r < rows; r++)
	{ 
		var row = document.createElement("div"); 
		row.className = "row";
		for(var c = 0; c < cols; c++)
		{ 
			var cell = document.createElement("div"); 
			if(r == 10 && c == 20)
				cell.className = "gridsquare begin";
			else if(r == 10 && c == 40)
				cell.className = "gridsquare end";
		    else
		    	cell.className = "gridsquare"; 
		    row.appendChild(cell); 
		    row.addEventListener("mousedown", addWall)
		} 
		e.appendChild(row); 
	}
}

async function dfs(i, j)
{
	if(found || i >= 20 || j >= 60 || i < 0 || j < 0 || matrix[i][j])
		return;
	if(i == 10 && j == 40)
	{
		found = true;
		return;
	}
	matrix[i][j] = true;
	getCell(i, j).style.background = "magenta";
	await sleep(5);
	await dfs(i+1, j);
	await dfs(i, j+1);
	await dfs(i-1, j);
	await dfs(i, j-1);
}

genDivs(20, gridCols);
//dfs(10, 10);
<!DOCTYPE html>
<html>
<head>
	<style>
		#gridContainer
		{
			outline: 1px solid rgb(175, 216, 248);
			font-size: 0;
			position: absolute;
		}
		.row
		{
			
		}
		.gridsquare
		{
			width: 25px;
			height: 25px;
			box-shadow: 0 1px 0 rgb(175, 216, 248) inset, 1px 0px 0px rgb(175, 216, 248) inset;
			display: inline-block;
		}
		.begin
		{
			background-color: purple;
		}
		.end
		{
			background-color: magenta;
		}
	</style>
</head>
<body>
	<div id="gridContainer"></div>
	<script type="text/javascript" src="HomeScript.js"></script>
</body>
</html>

1 Ответ

2 голосов
/ 10 апреля 2020

Вы можете использовать связывание для привязки контекста. 

row.addEventListener("mousedown", addWall.bind(null, r, c));

Затем вы можете получить строку и столбец: 

function addWall(row, cell) {
  console.log("called:" + [row, cell]);
}

В то же время, я думаю, вам нужно привязать метод к ячейке не ряд В ячейке Coz вы можете получить и строку, и идентификатор ячейки.

Обновленный код: 

function addWallCell(row, cell) {
  console.log("called:" + [row, cell]);
}

Связать ячейку: 

// rest of code
else cell.className = "gridsquare";
cell.addEventListener("mousedown", addWallCell.bind(null, r, c));
row.appendChild(cell);

Рабочий образец: 

var gridCols = 60;
var gridRows = Math.floor(screen.height / 25) - 2;
gridContainer.style.left =
  ((screen.width - 25 * gridCols) / screen.width) * 50 + "%";
var matrix = [];
var found = false;

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

function getCell(row, col) {
  return document.querySelector(
    ".row:nth-child(" + (row + 1) + ") .gridsquare:nth-child(" + (col + 1) + ")"
  );
}

for (var i = 0; i < 20; i++) {
  matrix[i] = [];
  for (var j = 0; j < 60; j++) matrix[i][j] = false;
}

function addWall(row, cell) {
  console.log("called:" + [row, cell]);
}
function addWallCell(row, cell) {
  console.log("called:" + [row, cell]);
}

function genDivs(rows, cols) {
  var e = document.getElementById("gridContainer");
  for (var r = 0; r < rows; r++) {
    var row = document.createElement("div");
    row.className = "row";
    for (var c = 0; c < cols; c++) {
      var cell = document.createElement("div");
      if (r == 10 && c == 20) cell.className = "gridsquare begin";
      else if (r == 10 && c == 40) cell.className = "gridsquare end";
      else cell.className = "gridsquare";
      cell.addEventListener("mousedown", addWallCell.bind(null, r, c));
      row.appendChild(cell);
    //   row.addEventListener("mousedown", addWall.bind(null, r, c));
    }
    e.appendChild(row);
  }
}

async function dfs(i, j) {
  if (found || i >= 20 || j >= 60 || i < 0 || j < 0 || matrix[i][j]) return;
  if (i == 10 && j == 40) {
    found = true;
    return;
  }
  matrix[i][j] = true;
  getCell(i, j).style.background = "magenta";
  await sleep(5);
  await dfs(i + 1, j);
  await dfs(i, j + 1);
  await dfs(i - 1, j);
  await dfs(i, j - 1);
}

genDivs(20, gridCols);
#gridContainer {
  outline: 1px solid rgb(175, 216, 248);
  font-size: 0;
  position: absolute;
}

.row {}

.gridsquare {
  width: 25px;
  height: 25px;
  box-shadow: 0 1px 0 rgb(175, 216, 248) inset, 1px 0px 0px rgb(175, 216, 248) inset;
  display: inline-block;
}

.begin {
  background-color: purple;
}

.end {
  background-color: magenta;
}
<div id="gridContainer"></div>
...