javascript - How do you make a rectangle(HTML element) controllable with the arrow keys? -
javascript - How do you make a rectangle(HTML element) controllable with the arrow keys? -
how create rectangle or other html element lets illustration rectangle able move around , have motion controlled arrow keys ( e.keycode , case #) , how create spaces rectangle cannot move into? help appreciated in advance.
an illustration pacman how pac man cant run walls
like this.
$(document).ready(function() { $(document).keydown(function(e) { //left arrow if (e.which == 37) { $('#box').css('left','-=1'); } //up arrow if (e.which == 38) { $('#box').css('top','-=1'); } //right arrow if (e.which == 39) { $('#box').css('left','+=1'); } //down arrow if (e.which == 40) { $('#box').css('top','+=1'); } }); }); you can keycodes here.
that said, best way utilize html5's canvas. quick demonstration div.
javascript html css
Comments
Post a Comment