时间戳

首页 > 解决方案 > 如何在左右滑动行和列时降低响应鼠标事件的灵敏度？

javascript - 如何在左右滑动行和列时降低响应鼠标事件的灵敏度？

问题描述

我最近一直在尝试开发“休闲游戏”，我特别想用网格和彩色瓷砖做一些事情。我正在开发一个名为“Kolourz”的演示项目，您只需在其中滑动行和列以尝试使所有颜色对齐（或其他任何东西；这是一个愚蠢的游戏）。

我让所有这些都可以正常工作，但我遇到的是，每当我按住鼠标按钮并朝一个方向“滑动”时，它会随着移动瓷砖而疯狂！向左或向右的控制似乎比向上或向下多一点，但我认为这只是因为手动灵巧。

下面是检测鼠标事件的代码：

$('.tile').mousedown(function(e1){
   e1.preventDefault();
    
    $('.tile').on('mousemove', function (event) {
        if (event.buttons==1){
            let targetCell = event.target.id;
            console.log(targetCell);
        if (typeof(last_position.x) != 'undefined') {
            var deltaX = last_position.x - event.offsetX,
                deltaY = last_position.y - event.offsetY;
            if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 0) {
                //left
                moveLeft(targetCell);
                targetCell="";
            } else if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX < 0) {
                //right
                moveRight(targetCell);
                targetCell="";
            } else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY > 0) {
                //up
                moveUp(targetCell);
                targetCell="";
            } else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY < 0) {
                //down
                moveDown(targetCell);
                targetCell="";                
            }
          
        }
        last_position = {
            x : event.offsetX,
            y : event.offsetY
        };
        }
    });
    
});     

  $('.tile').mouseup(function(){
    $(this).unbind("mousemove");
    $(this).unbind("mousedown");
});

这是响应的代码：


const moveRight = (rowCol) => {
    let tempId = rowCol.split("-");
    let row = tempId[0];

    let tempColor = $(`#${row}-7`).css('background-color');

    for (let i=colorArray.length;i>0;i--) {
        $(`#${row}-${i}`).css('background-color',$(`#${row}-${i-1}`).css('background-color'));
    }

    $(`#${row}-0`).css('background-color',tempColor);
}


const moveLeft = (rowCol) => {
    let tempId = rowCol.split("-");
    let row = tempId[0];

    let tempColor = $(`#${row}-0`).css('background-color');

    for (let i=0;i<colorArray.length-1;i++){
        $(`#${row}-${i}`).css('background-color',$(`#${row}-${i+1}`).css('background-color'));
    }

    $(`#${row}-7`).css('background-color',tempColor);
}

const moveUp = (rowCol) => {
    let tempId = rowCol.split("-");
    let col = tempId[1];

    let tempColor = $(`#0-${col}`).css('background-color');

    for (let i = 0; i< colorArray.length-1;i++) {
        $(`#${i}-${col}`).css('background-color',$(`#${i+1}-${col}`).css('background-color'));
    }

    $(`#7-${col}`).css('background-color',tempColor);
}

const moveDown = (rowCol) => {
    let tempId = rowCol.split("-");
    let col = tempId[1];

    let tempColor = $(`#7-${col}`).css('background-color');

    for (let i = colorArray.length-1;i>0;i--) {
        $(`#${i}-${col}`).css('background-color',$(`#${i-1}-${col}`).css('background-color'));
    }

    $(`#0-${col}`).css('background-color',tempColor);
}

我只是拿了一堆 div，给它们一个 ID 来对应它们的行和列，然后当玩家通过单击鼠标“滑动”一行并拖动它时调用函数来移动该行。该函数将 id 解析回行和列并循环颜色。但它的发展速度太快了！

这是带有完整代码的仓库

标签： javascriptjquerymouseevent2d-games

解决方案

看起来您已经解决了游戏中的问题，只需单击两次（单击一次是您要移动的图块，然后是移动它的方向）。

关于如何通过滑动实现您想要的一些想法：

  1. 由于一次鼠标移动，您可以限制允许移动的量。如果您要进行平滑滚动，则夹紧到一两个距离的网格单元可能会有所帮助。

  2. 您可以将每次滑动发生的移动次数限制为一次。您可以通过设置一个标志来做到这一点，以便在您第一次移动时不允许任何其他标志，或者在您处理一次移动后取消注册“onmousemove”功能。

推荐阅读