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

Popular posts from this blog

assembly - What is the addressing mode for ld, add, and rjmp instructions? -

vowpalwabbit - Interpreting Vowpal Wabbit results: Why are some lines appended by "h"? -

Is there a way to convert an HTML page styled with Bootstrap CSS into email-compatible html? -