JSFiddle - React, Tailwind, and code Playground
HTML
<div class="big-box">
<ul>
<li>New Game</li>
<li>Continue</li>
<li>Quit</li>
</ul>
</div>
CSS
.big-box {
background-color:#ddd;
width:300px;
margin:auto;
position:relative;
padding:5px 35px;
}
.big-box ul {
list-style:none inside none;
padding:0;
font-size:40px;
}
.pointer:before {
content:url("http://static2.wikia.nocookie.net/__cb20121113193557/finalfantasy/images/1/1b/FF1_PSP_cursor.png");
position:absolute;
left:0px;
}
JavaScript
//SET UP VARIABLES//
var cells = document.getElementsByTagName("li");
var cursorposition = 0;
var maxposition = cells.length-1;
var ScrollKeysToDisable = new Array(35, 36, 37, 38, 39, 40, 8);
//LOAD MEDIA//
var beep = new Audio('http://rpg.hamsterrepublic.com/wiki-images/8/8e/Confirm8-Bit.ogg');
var select = new Audio('http://rpg.hamsterrepublic.com/wiki-images/2/21/Collision8-Bit.ogg');
cells[cursorposition].className = cells[cursorposition].className + " pointer";
//ON KEYPRESS//
$(document).on('keydown', function (e) {
//GET ALL THESE VARIABLES EACH KEYPRESS//
var key = e.which; //THE KEY THAT IS PRESSED IN KEYCODE//
var char = String.fromCharCode(key); //THE KEY THAT IS PRESSED IN STRING FORM//
//DOWN ARROW//
if (e.keyCode == 40 && cursorposition < maxposition) {
cursorposition += 1;
}
//UP ARROW//
if (e.keyCode == 38 && cursorposition > 0) {
cursorposition -= 1;
}
//LEFT ARROW//
if (e.keyCode == 37) {
}
//RIGHT ARROW//
if (e.keyCode == 39) {
}
//PLAY BEEP//
if (e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 40) {
beep.currentTime = 0;
beep.play();
}
//ENTER//
if (e.keyCode == 13) {
}
//CATCH ALL ALPHANUMERIC KEYS//
if (e.shiftKey && e.keyCode > 47 && e.keyCode < 91) {
}
//CONVERT TO LOWERCASE IF SHIFT NOT HELD//
if (!e.shiftKey && e.keyCode > 47 && e.keyCode < 91) {
if (e.keyCode > 57) {
var char = String.fromCharCode(key + 32);
}
}
//SPACEBAR//
if (e.keyCode == 32 && macroName == 'cursortable') {
}
//BACKSPACE//
if (e.keyCode == 8 && macroName == 'cursortable') {
}
//PLAY SELECT//
if (e.keyCode == 8 || e.keyCode == 32 || e.keyCode == 13 || e.keyCode > 47 && e.keyCode < 91) {
select.currentTime = 0;
select.play();
}
//PREVENT DISABLED KEYS//
if ($.inArray(key,...