当光标到达图像时，是否可以使图像随光标移动？答案

【问题标题】：Is it possible to make an image move with the cursor when the cursor reaches the image?当光标到达图像时，是否可以使图像随光标移动？
【发布时间】：2016-05-22 12:31:29
【问题描述】：

我正在根据随光标移动的图像创建游戏。我不希望玩家能够通过将鼠标移出框外然后将鼠标移动到终点来作弊。如果使用我目前的设置，图像将移动到我的鼠标所在的位置。有什么想法吗？

代码：

  

$(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"/>

JsFiddle：https://jsfiddle.net/3x7cgLdr/

【问题讨论】：

标签： javascript jquery html css ajax

【解决方案1】：

我不知道这是否是你想要的，但我认为它会有所帮助。

我定义了var startMove，当光标离开文档时它将是false，直到鼠标靠近图像50处才变成true，然后图像将开始移动。 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');}
}

这添加到整个代码中：

  

 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"/>

【讨论】：

【解决方案2】：

如果光标一次移动得太远，也许你可以触发作弊事件，所以：

var x=1, y=1, percentAway=30; // start position of cursor...

$(document).mousemove(function(e){
    if(e.pageX > x*(1+(percentAway/100)) || e.pageX < x*(1-(percentAway/100)) || e.pageY > y*(1+(percentAway/100)) || e.pageY < y*(1-(percentAway/100))) {
        // cheater! greater than 5% away from its last position
        // do something bad to them!
        console.log('cheater: '+x+'-'+y);
    } else {
       // not a cheater, probably
       x = e.pageX; y = e.pageY;
       $("#image").css({left:e.pageX, top:e.pageY});
    }
});

// click to set the start position... replace this in your code with the space they should start
$(document).click(function(e) {
  x = e.pageX;
  y = e.pageY;
  console.log(x + '-' + y);
});

如果迷宫的两个部分（或其他任何部分）可以非常接近，但太小，这可能不适合快速游戏，您可能希望减少 (1-2%)。

编辑：JSFiddle，https://jsfiddle.net/3x7cgLdr/22/

这里我在代码中添加并添加了一点，以便您可以单击设置初始坐标 - 我猜主要问题是如果您移动得太快，它不会更新足够快...

您还可以定义您希望光标所在的 div 区域，如果他们移出该区域，只需将其标记为作弊者...

【讨论】：