JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js"></script>
<div id="wrap">
<div id="d1">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div id="d2">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div id="d3">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div id="d4">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div id="d5">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<p>Кубик № <span id="stroka">0</span>
</p>
<p>Ряд №<span id="ryad">0</span>
</p>
</div>
CSS
.block {
height: 30px;
width:30px;
border: 1px solid black;
display: inline-block;
}
JavaScript
var i = 1;
var m = 1;
function showPos() {
$("#stroka").text(i);
$("#ryad").text(m);
}
function paintBlock() {
$('.block').css('background', 'red');
$('#d' + m + ' .block:nth-child(' + i + ')').css("background", "black");
}
shortcut.add("Right", function () {
i++;
if (i > 6) {
i = 1;
m++;
}
if (m > 5) {
m = 1;
}
paintBlock();
showPos();
});
shortcut.add("Left", function () {
i--;
if (i < 1) {
i = 6;
m--;
}
if (m < 1) {
m = 5;
}
paintBlock();
showPos();
});
shortcut.add("Down", function () {
m++;
if (m > 5) {
m = 1;
i++;
}
if (i > 6) {
i = 1;
}
paintBlock();
showPos();
});
shortcut.add("Up", function () {
m--;
if (m < 1) {
m = 5;
i--;
}
if (i < 1) {
i = 6;
}
paintBlock();
showPos();
});
showPos();
paintBlock();