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

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

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/

在这里我添加了代码并添加了一点，这样你就可以点击设置初始坐标 - 我猜的主要问题是，如果你移动得太快，它的更新速度不够快......

您还可以定义光标所在区域的区域，如果它们移动到区域之外，则将它们标记为作弊者......

Answer 2

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

我定义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 个答案: