-
Notifications
You must be signed in to change notification settings - Fork 9
/
move_square.js
75 lines (68 loc) · 2.05 KB
/
move_square.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
$(function () {
var rows = 10;
var cols = 10;
var cells = [];
function createGrid(root) {
for(var i = 0; i < cols; i++) {
for(var j = 0; j < cols; j++) {
var cell = $('<div>').addClass('cell');
cell.attr('data-row', i).attr('data-col', j);
cells.push(cell);
root.append(cell);
}
}
};
function moveDown() {
var active = $('.active');
active.removeClass('active');
var row = active.data('row');
var col = active.data('col');
var nextRow = (row + 1) % rows;
var nextCellSelector = '[data-row=' + nextRow + ']' + '[data-col=' + col + ']';
$(nextCellSelector).addClass('active');
}
function moveLeft() {
var active = $('.active');
active.removeClass('active');
var row = active.data('row');
var col = active.data('col');
var nextCol = (col - 1);
nextCol = nextCol < 0 ? nextCol + cols : nextCol;
var nextCellSelector = '[data-row=' + row + ']' + '[data-col=' + nextCol + ']';
$(nextCellSelector).addClass('active');
}
function moveRight() {
var active = $('.active');
active.removeClass('active');
var row = active.data('row');
var col = active.data('col');
var nextCol = (col + 1) % cols;
var nextCellSelector = '[data-row=' + row + ']' + '[data-col=' + nextCol + ']';
$(nextCellSelector).addClass('active');
}
function moveUp() {
var active = $('.active');
active.removeClass('active');
var row = active.data('row');
var col = active.data('col');
var nextRow = (row - 1);
nextRow = nextRow < 0 ? nextRow + rows : nextRow;
var nextCellSelector = '[data-row=' + nextRow + ']' + '[data-col=' + col + ']';
$(nextCellSelector).addClass('active');
}
var moves = {
'97': moveLeft,
'115': moveDown,
'119': moveUp,
'100': moveRight
}
var $root = $('.container');
createGrid($root);
$('.cell').on('click', function (e) {
$('.active').removeClass('active');
$(e.currentTarget).addClass('active');
});
$('body').on('keypress', function (e) {
moves[e.keyCode]();
});
});