Move an Image by keyboard in HTML5

One of the things I’ve wanted to get into is this whole HTML5 games/web apps. I think a good way to learn a programming language or scripting, is to learn some of the basics, such as making something move through arrow keys and by moving things based on the mouse’s position. When I learned Lingo and Actionscript 3, I developed mini games and seeing what I could come up with. The last post I did used the mouse, so I thought why not switch it up a bit and use the keyboard. Below is a snippet of my code.

If you refer back to some of my other HTML5 postings about making an image show up in HTML5, you will see where I got the _player. I am using those source files to start with.

Keycodes:

  • 37 – Left
  • 38 – Up
  • 39 – Right
  • 40 – Down
  • 13 – Enter
  • 32 – Space

 

window.addEventListener('keydown', keyDownHandler, true);

function keyDownHandler(evt){
switch(evt.keyCode){
case 37:
_player, x-=5;
break;
case 39:
_player, x+=5;
break;

case 40:
_player, y+=5;
break;

case 38:
animate();
break;

}
}