Classic point and click navigation

I was wondering if it was possible to implement “a point and click navigate system” like in the classic point & click style games of the 1990s. For example, the student clicks somewhere on background image and an animated object ( e.g character) moves to that on screen coordinate / location.

Hi Eugene,

Please take a look at the attached project to see if this is what you need:
Classic point and click navigation.approj (232 KB)

To achieve that, I use the Motion Path and Multiple Timelines features:


Thank you very much Yen for the quick reply. I had thought about motions paths and hotspots.

I have an idea about creating a ‘point and click adventure game’ and take advantage of the already integrated interactivities – hotspots, quizzes etc. It would be great if the user/ player was able to move a 2d character/ animation freely around the stage / scene. I suppose something like on mouse click move object (e.g 2d character) to position ( x – y coordinates) . This would suppose that there would be a grid with a clickable areas.

Best regards,

Hi Eugene,

Thank you for getting back to me!
I am afraid that it’s impossible for a character to move freely around the stage/ scene as you described.


Is it possible to get the top and left position of a mouse click event in JS?

Hi Ali,

You can use e.originalEvent to get the mouse event, and use coordinate properties of the mouse event (such as clientX, clientY, pageX, pageY, offsetX, offsetY) to get the clicked position.

var mouseEvent = e.originalEvent;
console.log('Viewport coordinate: ' + mouseEvent.clientX + ', ' + mouseEvent.clientY
    + '. Page coordinate: ' + mouseEvent.pageX + ', ' + mouseEvent.pageY
    + '. Target coordinate: ' + mouseEvent.offsetX + ', ' + mouseEvent.offsetY);

Please refer to this page for mouse event properties: MouseEvent - Web APIs | MDN