Почему не получается подключить обработку клавиатурного ввода?

Question

Юрий Кулаксыз @Kulaxyz

Могу лучше

JavaScript

Почему не получается подключить обработку клавиатурного ввода?

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" 
	<title>GAME</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" /> 	
	<script language="javascript" src="script.js"></script>
</head>
<body>
	<div id="matrix"></div>
</body>
</html>

function createMatrix()
{
	var matrix = document.getElementById('matrix');
	var n = 400;	
	
	for (var i = 0; i < n; i++)
	{
		var div = document.createElement('div');
		div.className = 'cell';
		matrix.appendChild(div);
	}
};
function setCell(row, col, val){
	var cell = ((row * 20) + col) - 21;
	if (val == true){
	document.getElementById('matrix').children[cell].style.backgroundColor = 'red';
} 
else {
	document.getElementById('matrix').children[cell].style.backgroundColor = '';
	 }
};
function randomCell(){
	var cell = Math.floor(Math.random() * 399) + 1;
	document.getElementById('matrix').children[cell].style.backgroundColor = 'black';
};

	function handler(e){
		switch (e.keyCode) {
			case 39: //right
			if(col < 20){
				setCell(row, col, false);
				col++;
				setCell(row, col, true);
				}
			else{
				setCell(row, col, false);
				col = 1;
				setCell(row, col, true);
			}
			break;
		}
	};

window.onload = function()
{

	createMatrix();	
	document.getElementById('matrix').onkeydown = function(){
		handler(e);
	};
	setCell(1, 1, true);
	randomCell();
	 };

#matrix
{
	width: 400px;
	height: 400px;
	border-top: 1px solid #999;
	border-left: 1px solid #999;	
}

#matrix .cell
{
	float: left;
	width: 19px;
	height: 19px;	
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;	
}

Вопрос задан более трёх лет назад
46 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

5 комментариев

Юрий Кулаксыз @Kulaxyz Автор вопроса

Исправил, пропустил, когда копировал. Так тоже не работает. А вторую часть не очень понял, где именно присутствует стиль форматирования С++/C#.

Написано более трёх лет назад

Антон Спирин @rockon404

Kulaxyz, вы не передаете event в handler. Исправить так:

document.getElementById('matrix').onkeydown = function(e){
  handler(e);
};

Но лучше так:

var matrix = document.getElementById('matrix'); // определите один раз и используйте везде

matrix.addEventListener('keydown', handler);

По поводу стиля форматирования. Неправильное форматирование JS:

function createMatrix()
{
  var matrix = document.getElementById('matrix');
  var n = 400;	
  
  for (var i = 0; i < n; i++)
  {
    var div = document.createElement('div');
    div.className = 'cell';
    matrix.appendChild(div);
  }
};

Правильное форматирование JS:

function createMatrix() {
  var matrix = document.getElementById('matrix');
  var n = 400;	
  
  for (var i = 0; i < n; i++) {
    var div = document.createElement('div');
    div.className = 'cell';
    matrix.appendChild(div);
  }
}

Неправильное форматирование CSS:

#matrix
{
  width: 400px;
  height: 400px;
  border-top: 1px solid #999;
  border-left: 1px solid #999;	
}

Правильное форматирование CSS:

#matrix {
  width: 400px;
  height: 400px;
  border-top: 1px solid #999;
  border-left: 1px solid #999;	
}

Написано более трёх лет назад

Юрий Кулаксыз @Kulaxyz Автор вопроса

Антон Спирин, исправил, всё равно не работает, вот пример рабочего кода, можете объяснить, что у меня не так

function createMatrix()
{
	var matrix = document.getElementById('matrix');
	var n = 20 * 20;	
	
	for (var i = 0; i < n; i++)
	{
		var div = document.createElement('div');
		div.className = 'cell';
		matrix.appendChild(div);
	}
}

//
// Чтение ячейки матрицы.
//
function getCell(row, col)
{
	// Функция принимает координаты ячейки
	// должна вернуть true, если она закрашена,
	// false, если не закрашена.
	var cell = ((20*row)+col)-21;
	if (document.getElementById('matrix').children[cell].style.backgroundColor == ''){
		return false;
	}
	else{
		return true;
	}

}

//
// Установка ячейки матрицы.
//
function setCell(row, col, val)
{

	// Функция принимает координаты ячейки
	// если val == true, закрашивает ячейку,
	// иначе убирает закраску.
	var cell = ((20*row)+col)-21;
	if (val == true){
		document.getElementById('matrix').children[cell].style.backgroundColor = 'red';
	}
	else{
		document.getElementById('matrix').children[cell].style.backgroundColor = '';
	}
	
}

//
// Точка входа.
//
window.onload = function()
{
	var matrix = document.getElementById('matrix');
	createMatrix();	
	setCell(1, 1, true);

	var row1 = getRandom(2, 20);
	var col1 = getRandom(2, 20);
	setCell(row1, col1, true);

	var row = 1;
	var col = 1;

	function handler(event) {
		
		var KEY_CODE = {
			LEFT: 37,
			UP: 38,
			RIGHT: 39,
			DOWN: 40
		};
		
		if (event.keyCode == KEY_CODE.RIGHT) {
			if (col < 20){
				setCell(row, col, false);
				col++;
				if (getCell(row, col)){
					alert('Ай маладца!!!');
					location.reload();
				}
				setCell(row, col, true);
			}
		}

		if (event.keyCode == KEY_CODE.LEFT) {
			if (col > 1){
				setCell(row, col, false);
				col = col - 1;
				if (getCell(row, col)){
					alert('Ай маладца!!!');
					location.reload();
				}
				setCell(row, col, true);
			}
		}

		if (event.keyCode == KEY_CODE.DOWN) {
			if (row < 20){
				setCell(row, col, false);
				row = row + 1;
				if (getCell(row, col)){
					alert('Ай маладца!!!');
					location.reload();
				}
				setCell(row, col, true);
			}
		}

		if (event.keyCode == KEY_CODE.UP) {
			if (row > 1){
				setCell(row, col, false);
				row = row - 1;
				if (getCell(row, col)){
					alert('Ай маладца!!!');
					location.reload();
				}
				setCell(row, col, true);
			}
		}
	}

	window.addEventListener('keydown', handler);
	
	function getRandom(min, max){
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}
}

?

Написано более трёх лет назад

Антон Спирин @rockon404

Kulaxyz, в примере слушатель вешается на window, а вы вешаете на matrix.
window.addEventListener('keydown', handler);

Написано более трёх лет назад
Юрий Кулаксыз @Kulaxyz Автор вопроса

Антон Спирин, Спасибо большое, теперь работает, и за советы по форматированию тоже спасибо)

Написано более трёх лет назад