Can an image be coded to follow the cursor once it reaches the image itself?

Question

Can an image be coded to follow the cursor once it reaches the image itself?

I'm in the process of developing a game where an image follows the cursor. I want to prevent players from cheating by moving the cursor outside the designated area and then reaching the finish line. Currently, the image moves wherever my cursor goes. Any suggestions on how to address this?

Here is the code snippet:

  

$(document).mousemove(function(e){
    $("#image").css({left:e.pageX, top:e.pageY});
});

    * {cursor: none;}
#image{
position:absolute;
width:25px;
height:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>      
    <img id="image" src="http://static.micheljansen.org/uploads/mac-osx-arrow-cursor.png"/>

Check out the JsFiddle demo here: https://jsfiddle.net/3x7cgLdr/

javascript jquery html css ajax

Answer 1

Answer №1

Perhaps this solution may be what you're looking for and could offer some assistance.

In the code snippet below, I have defined a variable var startMove which starts as false when the cursor moves away from the document. It will only change to true when the mouse comes within 50 units of the image, triggering the movement of the image. For a live example, refer to: https://jsfiddle.net/IA7medd/3x7cgLdr/2/

var startMove;
$(document).mousemove(function(e){
    var difLeft = $('#image').offset().left - e.pageX;
    var difTop = $('#image').offset().top - e.pageY;
    if(difLeft < 50 && difLeft > -50 && difTop < 50 && difTop > -50 ){
      startMove = true;
    }
    if(startMove){
        $("#image").css({left:e.pageX, top:e.pageY});
    }
        checkCursor();
});

$(document).mouseleave(function(){
    startMove = false;
})

function checkCursor(){
    if(startMove){$('html').removeClass('showCursor');}
  else{$('html').addClass('showCursor');}
}

This added into the whole code:

  

 var startMove;
$(document).mousemove(function(e){
    var difLeft = $('#image').offset().left - e.pageX;
    var difTop = $('#image').offset().top - e.pageY;
    if(difLeft < 10 && difLeft > -10 && difTop < 10 && difTop > -10 ){
      startMove = true;
    }
    if(startMove){
    $("#image").css({left:e.pageX, top:e.pageY});
    }
checkCursor();
});

$(document).mouseleave(function(){
    startMove = false;
})

function checkCursor(){
if(startMove){$('html').removeClass('showCursor');}
  else{$('html').addClass('showCursor');}
}

    html {cursor: none;}
html.showCursor{cursor: default;}
#image{
position:absolute;
width:25px;
height:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>      
    <img id="image" src="http://static.micheljansen.org/uploads/mac-osx-arrow-cursor.png"/>

Answer 2

Perhaps this solution may be what you're looking for and could offer some assistance.

In the code snippet below, I have defined a variable var startMove which starts as false when the cursor moves away from the document. It will only change to true when the mouse comes within 50 units of the image, triggering the movement of the image. For a live example, refer to: https://jsfiddle.net/IA7medd/3x7cgLdr/2/

var startMove;
$(document).mousemove(function(e){
    var difLeft = $('#image').offset().left - e.pageX;
    var difTop = $('#image').offset().top - e.pageY;
    if(difLeft < 50 && difLeft > -50 && difTop < 50 && difTop > -50 ){
      startMove = true;
    }
    if(startMove){
        $("#image").css({left:e.pageX, top:e.pageY});
    }
        checkCursor();
});

$(document).mouseleave(function(){
    startMove = false;
})

function checkCursor(){
    if(startMove){$('html').removeClass('showCursor');}
  else{$('html').addClass('showCursor');}
}

This added into the whole code:

  

 var startMove;
$(document).mousemove(function(e){
    var difLeft = $('#image').offset().left - e.pageX;
    var difTop = $('#image').offset().top - e.pageY;
    if(difLeft < 10 && difLeft > -10 && difTop < 10 && difTop > -10 ){
      startMove = true;
    }
    if(startMove){
    $("#image").css({left:e.pageX, top:e.pageY});
    }
checkCursor();
});

$(document).mouseleave(function(){
    startMove = false;
})

function checkCursor(){
if(startMove){$('html').removeClass('showCursor');}
  else{$('html').addClass('showCursor');}
}

    html {cursor: none;}
html.showCursor{cursor: default;}
#image{
position:absolute;
width:25px;
height:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>      
    <img id="image" src="http://static.micheljansen.org/uploads/mac-osx-arrow-cursor.png"/>

Answer 3

Answer №2

Perhaps implementing a cheat detection system by monitoring the cursor movement could be beneficial. Here's an idea:

let x=1, y=1, percentThreshold=30; // initial cursor position...

$(document).mousemove(function(e){
    if(e.pageX > x*(1+(percentThreshold/100)) || e.pageX < x*(1-(percentThreshold/100)) || e.pageY > y*(1+(percentThreshold/100)) || e.pageY < y*(1-(percentThreshold/100))) {
        // The user is trying to cheat by moving too far from the original position
        // Take action against cheating behavior!
        console.log('Cheater detected at: '+x+'-'+y);
    } else {
       // Normal cursor movement
       x = e.pageX; y = e.pageY;
       $("#image").css({left:e.pageX, top:e.pageY});
    }
});

// Click to set the starting point... customize this based on game requirements
$(document).click(function(e) {
  x = e.pageX;
  y = e.pageY;
  console.log('Initial coordinates: ' + x + '-' + y);
});

You may need to adjust the percentage threshold (1-2% for close maze sections) based on your game setup. Finding the right balance is crucial for optimal gameplay.

Also, consider defining specific areas within the div where the cursor should remain and flagging users who move outside those boundaries as cheaters.

For further reference, check out the updated JSFiddle link here.

This revised code includes a feature to set initial coordinates via click, addressing the issue of delayed updates during fast movements.

Answer 4

Perhaps implementing a cheat detection system by monitoring the cursor movement could be beneficial. Here's an idea:

let x=1, y=1, percentThreshold=30; // initial cursor position...

$(document).mousemove(function(e){
    if(e.pageX > x*(1+(percentThreshold/100)) || e.pageX < x*(1-(percentThreshold/100)) || e.pageY > y*(1+(percentThreshold/100)) || e.pageY < y*(1-(percentThreshold/100))) {
        // The user is trying to cheat by moving too far from the original position
        // Take action against cheating behavior!
        console.log('Cheater detected at: '+x+'-'+y);
    } else {
       // Normal cursor movement
       x = e.pageX; y = e.pageY;
       $("#image").css({left:e.pageX, top:e.pageY});
    }
});

// Click to set the starting point... customize this based on game requirements
$(document).click(function(e) {
  x = e.pageX;
  y = e.pageY;
  console.log('Initial coordinates: ' + x + '-' + y);
});

You may need to adjust the percentage threshold (1-2% for close maze sections) based on your game setup. Finding the right balance is crucial for optimal gameplay.

Also, consider defining specific areas within the div where the cursor should remain and flagging users who move outside those boundaries as cheaters.

For further reference, check out the updated JSFiddle link here.

This revised code includes a feature to set initial coordinates via click, addressing the issue of delayed updates during fast movements.

Can an image be coded to follow the cursor once it reaches the image itself?

Answer №1

Answer №2

Similar questions

Exploring date range options in Highcharts for viewing data from a specific selected date

Contrasting assign and modify operations on arrays

What is the best way to use node.js to send a .json file via HTTP POST request?

What is the method to update the title dynamically in the view page source?

Do we need to eliminate the callback function once it has been called or executed in JavaScript?

Mobile-friendly website with consistent design across all devices

Retrieve the name of the file from a given URL by using JavaScript/jQuery, even when only the directory path is

How to activate an ASP.NET LinkButton using JavaScript

When utilizing the "nofollow/sponsored" attribute, window.open will open in a new window as opposed to a new tab

Tips for making a draggable div come to the forefront upon clicking

Personalizing the mat-checkbox

Grab the webpage's URL by collecting the link from the src attribute of the script tag using XSLT

best practices for passing variables between multiple files within a nodejs application

Shopify Inventory Dropdown Tailored to Stock Levels

Detecting a failed Promise with an Observable in Angular 6

Adding multiple text as label and sublabel in a React MUI Tooltip can be achieved by utilizing the appropriate

Is the format of this HTML tag correct?

A modern alternative to using the outdated `confirm` method in

How can I display multiple lines of dynamic data using JavaScript in a Highcharts chart?

Is there a way to prevent autoplay on swiper only on one slide based on a specific condition?