Javascript 画布为ipad和其他设备的屏幕添加箭头键控件

在画布中，根据键盘的箭头键移动对象。但我想在屏幕上添加箭头键控件，这样用户就可以在ipad上或智能手机设备上用鼠标或触摸来移动那个物体

我想做的就是，根据方向按钮触发鼠标向下的键盘事件

$('#down').click(function(e)
{
    //?????
});

Html

Down
向上的
左边
赖特

Javascript

function update() {

    // check the keys and do the movement.
    if (keys[38]) {
        if (velY > -speed) {
            velY--;
        }
    }

    if (keys[40]) {
        if (velY < speed) {
            velY++;
        }
    }
    if (keys[39]) {
        if (velX < speed) {
            velX++;
        }
    }
    if (keys[37]) {
        if (velX > -speed) {
            velX--;
        }
    }

    // apply some friction to y velocity.
    velY *= friction;
    y += velY;

    // apply some friction to x velocity.
    velX *= friction;
    x += velX;

    // bounds checking
    if (x >= 295) {
        x = 295;
    } else if (x <= 5) {
        x = 5;
    }

    if (y > 295) {
        y = 295;
    } else if (y <= 5) {
        y = 5;
    }

    // do the drawing
    ctx.clearRect(0, 0, 300, 300);
    ctx.beginPath();
    ctx.arc(x, y, 5, 0, Math.PI * 2);
    ctx.fill();

    setTimeout(update, 10);
}

update();

// key events
document.body.addEventListener("keydown", function (e) {
    keys[e.keyCode] = true;
});
document.body.addEventListener("keyup", function (e) {
    keys[e.keyCode] = false;
});

函数更新（）{
//检查键并进行移动。
如果（键[38]）{
如果（速度>速度）{
弗利——；
}
}
如果（键[40]）{
如果（速度<速度）{
vc++；
}
}
如果（键[39]）{
如果（velX<速度）{
velX++；
}
}
如果（键[37]）{
如果（velX>-速度）{
绒毛--；
}
}
//对y轴速度施加一些摩擦力。
=摩擦；
y+=0；
//对x速度施加一些摩擦力。
velX*=摩擦；
x+=velX；
//边界检查
如果（x>=295）{
x=295；
}否则，如果（x295）{
y=295；
}否则，如果（y当你可以使用时，你为什么要这样做？你有不止一个触摸事件，你有一些事件，比如移动手指、触摸屏幕等等，我有一个很长的过程，添加多个事件，但它非常简单

function upTrue(){keys[38] = true;}
function upFalse(){keys[38] = false;}

var upKey = document.getElementById('up');
upKey.addEventListener('mousedown', upTrue);
upKey.addEventListener('touchstart', upTrue);
upKey.addEventListener('mouseup', upFalse);
upKey.addEventListener('touchend', upFalse);

完全可以为其他三个方向添加事件
这应该可以帮助您解决以下问题：）想一想，也许在画布上使用触控，观察事件相对于球的位置来决定移动方向会是一个很好的主动触控。也意味着更少的听众抵制！将触控移出按钮边界将意味着取消事件不会触发。使用一个附在整个文档上的取消事件。
文档。body.addEventListener（'touchend'，函数（e）{var i=keys.length；而（i--）keys[i]=false；}，false）
function upTrue(){keys[38] = true;}
function upFalse(){keys[38] = false;}

var upKey = document.getElementById('up');
upKey.addEventListener('mousedown', upTrue);
upKey.addEventListener('touchstart', upTrue);
upKey.addEventListener('mouseup', upFalse);
upKey.addEventListener('touchend', upFalse);