Question

我有一个使用processing.js在纯javascript中制作的网页游戏它在桌面上工作正常，但我希望它能在移动设备上运行。它在这个网站上：https://www.ricarddokifuri.tk/mlg/

我找到了一个检测滑动的功能

function swipedetect(el, callback){

var touchsurface = el,
swipedir,
startX,
startY,
distX,
distY,
threshold = 150, //required min distance traveled to be considered swipe
restraint = 100, // maximum distance allowed at the same time in perpendicular direction
allowedTime = 300, // maximum time allowed to travel that distance
elapsedTime,
startTime,
handleswipe = callback || function(swipedir){}

touchsurface.addEventListener('touchstart', function(e){
    var touchobj = e.changedTouches[0]
    swipedir = 'none'
    dist = 0
    startX = touchobj.pageX
    startY = touchobj.pageY
    startTime = new Date().getTime() // record time when finger first makes contact with surface
    e.preventDefault()
}, false)

touchsurface.addEventListener('touchmove', function(e){
    e.preventDefault() // prevent scrolling when inside DIV
}, false)

touchsurface.addEventListener('touchend', function(e){
    var touchobj = e.changedTouches[0]
    distX = touchobj.pageX - startX // get horizontal dist traveled by finger while in contact with surface
    distY = touchobj.pageY - startY // get vertical dist traveled by finger while in contact with surface
    elapsedTime = new Date().getTime() - startTime // get time elapsed
    if (elapsedTime <= allowedTime){ // first condition for awipe met
        if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint){ // 2nd condition for horizontal swipe met
            swipedir = (distX < 0)? 'left' : 'right' // if dist traveled is negative, it indicates left swipe
        }
        else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint){ // 2nd condition for vertical swipe met
            swipedir = (distY < 0)? 'up' : 'down' // if dist traveled is negative, it indicates up swipe
        }
    }
    handleswipe(swipedir)
    e.preventDefault()
}, false)

}

我可以激活并检测哪个方向像这样滑动

swipedetect(el, function(swipedir){
if (swipedir == 'left')
    alert('You just swiped left!')
});

我移动玩家的功能就像这样

var movePlayer = function(){
if(keyCode === LEFT){
    x -= 3.5*scaless;
}
if(keyCode === RIGHT){
    x += 3.5*scaless;
}
if(keyCode === UP){
    y -= 3.5*scaless;
}  
if(keyCode === DOWN){
    y += 3.5*scaless;
}
};
if(keyPressed){
    movePlayer();
}

如何制作检测滑动的功能，模拟按键？

Answer 1

如果你想重新使用你的movePlayer函数用于键盘和滑动，那么我可能会让它接受一个参数然后从一个keypress事件处理程序调用它，事件键代码来自滑动处理程序和适当的参数。

所以基本上，根据这个：https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

向上，向右，向下，向左的键码是：

UP：38 右：39 下：40 左：37

所以你可以修改你的移动播放器：

var movePlayer = function(keyCode){
    if(keyCode === LEFT){
       x -= 3.5*scaless;
    }
    if(keyCode === RIGHT){
       x += 3.5*scaless;
    }
    if(keyCode === UP){
       y -= 3.5*scaless;
    }  
    if(keyCode === DOWN){
       y += 3.5*scaless;
    }
};

从你的代码片段中，我假设LEFT，RIGHT，UP和DOWN是常量值，在程序的其他地方，所以我会修改我的滑动检测功能，如：

swipedetect(el, function(swipedir){
  if (swipedir == 'left'){
    movePlayer(LEFT);
  }else if(swipedir == 'right'){
    movePlayer(RIGHT);
  }else if(swipedir == 'up'){
    movePlayer(UP);
  }else if(swipedir == 'down'){
    movePlayer(DOWN);
  }
  //you can have the default case in an else here
});

然后，当用户使用键盘传递按下的键的代码（即通过在按键事件处理程序中执行movePlayer（event.keyCode））时，您需要修改调用movePlayer的按键代码。

模拟按键javascript没有JQuery

1 个答案: