In this post we have the idea of randomly positioning something on the screen.
For this example it is nothing more than a small red box but it could be something like an image.
This project only requires three lines of JavaScript.
1. Randomly choose the x-coordinate
2. Randomly choose the y-coordinate
3. Animate the box to the coordinates
I specifically chose my random number values in order to keep the little red box within the bounds of the larger black box – so those values can be modified to suit your boundaries.
Two things of note in this project.
1. The random number selection looks like it might pick to a value of 1 more than I said but in reality, the random number generator always picks a number less than one. That means we need to multiply that value to one higher as the multiplication will equal 485 at one point but since the random generator will never pick the number 1 – the multiplication will never equal 486.
2. You will notice a small letter ‘c’ in the naming of the box for the animation. It is important to put that small ‘c’ in with the name so that it can address the canvas object. This is part of how Captivate packages things up so don’t forget that little ‘c’.
A working sample plus a view of the code is found below.
Please post any questions that you might have.
So – How might you find a way to use this idea in a project?
The post Random Positioning – JavaScript Idea Series appeared first on eLearning.
Idea #2 in the JavaScript Idea Series – Random Positioning
The post Random Positioning – JavaScript Idea Series appeared first on eLearning.Read MoreBlog, eLearning Projects, Tips and Tricks, blog, elearning projects, JavaScript