Activate the mouseenter event as soon as an animated element makes contact with the cursor

Question

Activate the mouseenter event as soon as an animated element makes contact with the cursor

As I venture into the world of web development, I am currently working on creating a game where the main objective is to avoid touching moving circles with the cursor. My approach involved using a mouseenter event as shown in the JSFiddle example below:

$("#"+circleName).mouseenter(function(){
    $(this).attr("class", "redcircle");
    });

While this successfully changes the color of the circles to red when the cursor hovers over them, it fails to detect collisions when the circle passes through the stationary cursor. Is there a more effective method to achieve this?

After modifying the mouseenter event to a hover event, I noticed that it detects contact between the animated circles and the motionless cursor. However, there appears to be a slight delay. Can anyone offer insights into why this might occur?

This issue seems reminiscent of a problem discussed here, hinting at a potential browser bug impacting the functionality:

getting a mouseenter event from a still mouse entering an animated element

Check out the Fiddle here: http://jsfiddle.net/nbsteuv/6yok3s56/4/

javascript jquery html css animation

Answer 1

Answer №1

To enhance user interaction, I would recommend storing the current mouse coordinates and checking for intersections whenever a circle is moved.

var currentX, currentY;

$( "#container-element-id" ).mousemove(function( event ) {
  currentX = event.pageX;
  currentY = event.pageY;
});

Create a function to determine if a point lies within a circle...

function checkPointInCircle(pointX,pointY,circleX,circleY)
{
    // Perform necessary calculations here
}

Subsequently, in your animation script, verify for any intersection each time the circle changes position...

if(checkPointInCircle(currentX, currentY, circle.positionLeft, circle.positionTop))
{
    // Modify circle color to red
}

Answer 2

To enhance user interaction, I would recommend storing the current mouse coordinates and checking for intersections whenever a circle is moved.

var currentX, currentY;

$( "#container-element-id" ).mousemove(function( event ) {
  currentX = event.pageX;
  currentY = event.pageY;
});

Create a function to determine if a point lies within a circle...

function checkPointInCircle(pointX,pointY,circleX,circleY)
{
    // Perform necessary calculations here
}

Subsequently, in your animation script, verify for any intersection each time the circle changes position...

if(checkPointInCircle(currentX, currentY, circle.positionLeft, circle.positionTop))
{
    // Modify circle color to red
}

Activate the mouseenter event as soon as an animated element makes contact with the cursor

Answer №1

Similar questions

Brochure displaying shattered tiles using ionic

Avoid re-running the onScroll function until completion

The function signature '() => void' cannot be assigned to a variable of type 'string'

Troubleshooting jQuery compatibility issue in IE6 when using javascript and loading content through ajax

Having trouble importing from the src folder in Expo React

Converting Venn diagram code from JavaScript <script> tags to Angular 2: A step-by-step guide

Present the retrieved JSON data values in an alternative layout on the table

Creating interactive PDF files using ReactJS

How do I submit a form using jQuery .ajax() or .post() in a native iPhone Phonegap application?

Establish the year that automatically appears when using Pickadate.js

Using the goBack function in React Router does not add the previous location to the stack

working with assigning values to rvalues in JavaScript

What exactly are Node.js core files?

pagination of data tables on the server side

Styles in print CSS are not effective in an Angular project

Switch the functionality of a Google Chrome extension back and forth numerous times

Mocha: A Unique Perspective on Testing the express.Router Instance

Can Spring Boot be set up to return JSON instead of HTML for InvalidTokenException when configuring OAuth2?

Troubleshooting the issue with the htmlFor attribute

Typescript is failing to compile classes in a reliable sequential order