カーソルが画像に達したときにカーソルで画像を動かすことはできますか？

Question

私は、カーソルで動いているイメージに基づいて、ゲームを作成しています。私は、マウスをボックスの外に移動させ、マウスをフィニッシュまで動かすことによって、プレーヤーが不正行為をすることを可能にしたくありません。私が現在行っている設定を使用している場合、画像はマウスの位置に移動します。何か案が？

コード：

 

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

Answer 1

を使用すると、カーソルが内にあり、ちょうど彼らが地域の外に移動した場合詐欺師としてそれらをラベル付けしたいのdivの領域を定義することができ

私はかどうかを知りませんそれはあなたが望むものですが、私はそれが助けになると思います。

私がと定義したのは、カーソルが文書から出るときに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){ 
 
    \t $("#image").css({left:e.pageX, top:e.pageY}); 
 
    } 
 
\t \t checkCursor(); 
 
}); 
 

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

 
function checkCursor(){ 
 
\t 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

はたぶん、あなたはそう、チートイベントをトリガすることができます：

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); 
}); 

迷路の2つの部分（あるいはそれにかかわらず）がきわめて近いかもしれないが小さすぎると、クイックゲームでうまく動作しない可能性があります。

編集：JSFiddle、https://jsfiddle.net/3x7cgLdr/22/

は、ここで私は、コードに追加して、初期座標を設定するためにクリックすることができるようにビットを追加しました - 私は推測する主な問題は、あなたがあまりにも速く移動した場合、それは十分に速く更新doesntのことです...あなたがまた...