Змейка JavaScript
Только начал изучение.
JS Код:
function createMatrix() |
SergeiGeek,
:cray: :cray: :cray:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.cell {
float: left;
height: 12px;
width: 12px;
border: #0000CD 1px solid;
}
#matrix{
width: 280px;
}
.red{
background: #FF0000;
}
</style>
<script>
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)
{
var divs = document.querySelectorAll('.cell');
return divs[--row * 20 + --col]
}
function setCell(row, col, val)
{
getCell(row, col).classList[val ? 'add' : 'remove']('red')
}
window.onload = function()
{
createMatrix();
setCell(1, 1, true);
}
</script>
</head>
<body>
<div id="matrix"></div>
</body>
</html>
|
Великолепно!
Поясните каждый пункт, для более лучшего понимания, если вам не сложно Код:
getCell(row, col).classList[val ? 'add' : 'remove']('red') |
Цитата:
Условный оператор доступ-через-квадратные-скобки |
Спасибо друг! :) А можно теперь задать движение этому квадрату за счет стрелочек клавиатуры. К этому всему я добавил вот что:
document.onkeyDown = function()
{
var KEY_CODE = {
LEFT: 37,
UP: 38,
RIGHT: 39,
DOWN: 40
};
if (event.keyCode == KEY_CODE.LEFT) {
}
Лучше реализовать через IF или SWITCH ? Додумать не могу как заставить квадрат двигаться. |
То что ты мне написал выше.
function getCell(row, col)
37
{
38
var divs = document.querySelectorAll('.cell');
39
return divs[--row * 20 + --col]
40
}
41
42
function setCell(row, col, val)
43
{
44
getCell(row, col).classList[val ? 'add' : 'remove']('red')
45
}
Такое возможно реализовать с помощью JQuerry? |
Цитата:
|
Цитата:
|
змейка игра макет
SergeiGeek,
кликнуть по квадратику потом нажать стрелки на клавиатуре.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.cell {
float: left;
height: 12px;
width: 12px;
border: #0000CD 1px solid;
}
#matrix{
width: 280px;
}
.red{
background: #FF0000;
}
</style>
<script>
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) {
var divs = document.querySelectorAll('.cell');
return divs[row * 20 + col]
}
function setCell(row, col, val) {
var div = getCell(row, col)
div && div.classList[val ? 'add' : 'remove']('red')
}
window.onload = function() {
createMatrix();
setCell(10, 10, true);
var b = {
39: ["left", 1],
37: ["left", -1],
40: ["top", 1],
38: ["top", -1],
top: 10,
left: 10
};
document.body.onkeydown = function(a) {
a = a || window.event;
a = a.keyCode;
if (b[a]) {
setCell(b.top, b.left, false)
var d = b[a][0];
b[d] += b[a][1];
b[d] < 0 && (b[d] = 19)
b[d] %= 20;
setCell(b.top, b.left, true)
}
return false;
};
};
</script>
</head>
<body>
<div id="matrix"></div>
</body>
</html>
|
спасибо! =)
a = a || window.event;
57
a = a.keyCode;
58
if (b[a]) {
59
setCell(b.top, b.left, false)
60
var d = b[a][0];
61
b[d] += b[a][1];
62
b[d] < 0 && (b[d] = 19)
63
b[d] %= 20;
64
setCell(b.top, b.left, true)
красиво это написано, а где можно прочесть про значения %= || += и тд? |
| Часовой пояс GMT +3, время: 21:45. |