Ideas to Inspire #2

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.

2 Likes

Hi Greg,

Much appreciate your dedication in creating projects with our product :heart_eyes:

A suggestion from our side is that you can add JavaScript to the On Key Press event of the slide. Later on, you can use the arrows on the keyboard to adjust movement.
Or else, you can take a look at the slider object. Please watch the written tutorials as well as videos here for more insights:

Hope the information helps.

Regards,
Quynh Anh

1 Like

Thank you, @QuynhAnh_Vu for sharing your thoughts.

1 Like

Hi Greg,

Love that you are doing these Ideas to Inspire!

This idea reminded me of something similar I was experimenting with awhile back. The idea was to create a keyboard accessible Image Pan-n-Zoom-n-Rotate. Never got to refine it so it is pretty rough.

AccessiblePanAndZoom.approj (476 KB)

I will add that I only have very basic javascript skills so I’m sure that this code could be improved.

Keep up with the ideas!!

Cheers,
Keith

2 Likes

Looks like a great start to something, @Keith - Keep the fuel burnin’!