javascript - 如何在javascript中使用键盘移动对象

标签 javascript html canvas keylistener frame-rate

当我移动物体时,它很慢并且不会沿对 Angular 线移动,只会上下左右移动。

我该如何解决这个问题,这是开始的好方法还是我应该以其他方式解决?

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
canvas.width = 600;
canvas.height = 600;
var object = {
    height: 40,
    width: 40,
    x: 10,
    y: 10, 
    color: "#FF0000"        
}

document.addEventListener('keydown', function(event) {
    //left
    if(event.keyCode == 37) {
        object.x -= 1;
    }
    //top
    else if(event.keyCode == 38) {
        object.y -= 1;
    }
    //right
    else if(event.keyCode == 39) {
        object.x += 1;
    }
    //bottom
    else if(event.keyCode == 40) {
        object.y += 1;
    }
});

function renderCanvas(){
    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, 600, 600);
} 
function renderObject(){
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(object.x, object.y, object.width, object.height);
}
function run(){
    renderCanvas();
    renderObject();
}

setInterval(run, 10);

这是一个 jsfiddle

我是 javascript 的新手,我真的需要这方面的帮助 ;)

最佳答案

使用标志或带有标志的对象,在按下和释放按键时更新标志:

var Keys = {
        up: false,
        down: false,
        left: false,
        right: false
    };

然后更新关键事件:

window.onkeydown = function(e) {
    var kc = e.keyCode;
    e.preventDefault();

    if      (kc === 37) Keys.left = true;  // only one key per event
    else if (kc === 38) Keys.up = true;    // so check exclusively
    else if (kc === 39) Keys.right = true;
    else if (kc === 40) Keys.down = true;
};

window.onkeyup = function(e) {
    var kc = e.keyCode;
    e.preventDefault();

    if      (kc === 37) Keys.left = false;
    else if (kc === 38) Keys.up = false;
    else if (kc === 39) Keys.right = false;
    else if (kc === 40) Keys.down = false;
};

这将允许您检查同时按下的键(如果您想连续移动,您需要循环检查键对象的状态,否则您将得到重复延迟):

if (Keys.up) {
    dy+=3;
}
else if (Keys.down) {  // both up and down does not work so check excl.
    dy-=3;
}

if (Keys.left) {
    dx+=3;
}
else if (Keys.right) {
    dx-=3;
}

FIDDLE

关于javascript - 如何在javascript中使用键盘移动对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23585320/

相关文章:

javascript - RxJS 中的排序导致 "out of memory"错误

html - CSS 背景颜色不起作用?

javascript - 简单的 Javascript 碰撞检测?

javascript - Jquery 将参数添加到 $.ajax 上的函数

html - 将 CSS Resize 属性添加到 Canvas 元素

javascript - 使用 <a href ="#id"> 时将目标对齐到中间

javascript - 如何快速更新一个大的 BufferGeometry?

javascript - Three.js 为什么渲染器带有视口(viewport)和剪刀,而我有一个完整的黑色 Canvas

javascript - 继续在 HTML Canvas 中绘制线条

HTML5 获取 Canvas 中的 alpha 像素数