In this project - I created a directional pad that can be used to guide another object around the screen.
Each of the four directional buttons have code to help them function.
The code is mostly the same but has some changes to reflect the direction of movement.
Code for the up button is provided.
I created two variables xPos and yPos to store the current position and then I either add or subtract from that a value of 10 so that you should see the red dot move by 10 pixels at a time. This could be adjusted, of course, to the needs of the project. The up and down buttons will modify the yPos variable while the left and right buttons will modify the xPos variable. I only look at the left and top values.
I also added a little logic to prevent the dot from going too far and moving off stage or behind the header and footer.
Here is a link to the example.
Directional Pad (HTML5)
I would love to hear what sorts of ideas you might have for using something like this in your learning projects. Please add them to the comments and feel free to ask any questions you might have.