HTML5 Canvas: Move object to any clicked objects?
I want to add a a highlight to indicate the last object clicked without adding this to every object click:
this.Marker.y = this.navButton1.y;
this.Marker.x = this.navButton1.x;
According to Google AI this should do the trick:
// Set the initial position of the object to move
var objectToMove = this;
objectToMove.x = 100;
objectToMove.y = 100;
// Add a click event listener to the target object
stage.addEventListener("click", handleTargetClick);
function handleTargetClick(event) {
// Get the clicked object
var target = event.target;
// Make sure the clicked object is not the objectToMove
if (target != objectToMove) {
// Get the position of the target object
var targetX = target.x;
var targetY = target.y;
// Set the objectToMove to the position of the target object
objectToMove.x = targetX;
objectToMove.y = targetY;
}
}
So I added handleTargetClick(); to the click function for my navigation objects, altering the code above to indicate my Marker object: var objectToMove = this.Marker ; but I get the error:
Uncaught TypeError: Cannot read properties of undefined (reading 'target')
var target = event.target;
Shouldn't that code make the clicked object the target, to align the Marker to?
Any helpful hints welcome, thanks!
