在 Canvas 中,根据键盘的方向键移动对象。但我想在屏幕中添加箭头键控件,以便用户可以使用鼠标或 ipad 或智能手机设备中的触摸来移动该对象。
我想做的就是根据方向按钮触发 mousedown 上的键盘事件。
$('#down').click(function(e)
{
//?????
});
HTML
<div class="keys" id="down">Down</div>
<div class="keys" id="up">Up</div>
<div class="keys" id="left">Left</div>
<div class="keys" id="right">Right</div>
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;
});
如何从鼠标按下或触摸事件触发键盘事件。
最佳答案
我有一个很长的过程,需要添加多个事件,但它非常简单。
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);
您可以通过添加其他三个方向的事件
关于javascript - Canvas 将箭头键控件添加到 ipad 和其他设备的屏幕上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26052884/