Javascript 让画布元素在按住键的同时移动，然后在放开时停止

代码问题：如果您按住箭头键并查看控制台，则每次按键后都会触发上键。此外，按住箭头键后，对象停止移动

为什么在这种情况下这是一个问题：我希望每次启动箭头键向下时，正方形都会移动，然后在启动键向上时停止

想要的效果：我想按住一个键来移动盒子，然后当我放开键时它停止移动

• 这是可以实现的吗？如果是，大约如何？如果没有，是否有其他方法登记方向

作为记录，我不想使用Jquery。谢谢你的建议

Javascript

keyLeft = 0;
keyRight = 0;
keyNorth = 0;
keyBot = 0;
var interval;
var c = 0;

window.onload=function(){
    addButton.addEventListener
        ('click',function(){addRowCell("table1")},false);
    removeButton.addEventListener
        ('click',function(){deleteRowCell("table1")},false);
    stopButton.addEventListener('click',stop,false);
    startButton.addEventListener('click',initiate,false);
}
//38 up
//37 left
//40 down
//39 right
document.onkeydown = function (e) {

    console.debug(e.keyCode, "down");
    console.debug(e.keyCode, "up");

    switch (e.keyCode){
        case 37:
            initiateLeft();
            break;
        case 38:
            initiateNorth();
            break;
        case 40:
            initiateBot();
            break;
        case 39:
            initiateRight();
            break;
        case 32:
            stop();
            break;
    }
}

function stop(){
    clearInterval(interval);
}
function initiateRight(){
    clearInterval(interval);
    interval = setInterval(right,100);
}
function initiateLeft(){
    clearInterval(interval);
    interval = setInterval(left,100);
}
function initiateNorth(){
    clearInterval(interval);
    c=0;
    interval = setInterval(north,100);
}
function initiateBot(){
    clearInterval(interval);
    interval = setInterval(bot,100);
}

function right(){
    var x = document.getElementById("counter");
    x.value = keyRight;
    var d = document.getElementById("canv1");
    var ctx = d.getContext("2d");
    var ctx1 = document.querySelector('#canv1').getContext('2d');
    ctx1.clearRect(0,0,100,100);    
    ctx.strokeRect(20+keyRight-keyLeft,20-keyNorth+keyBot,40,40);
    keyRight++;
}
function left(){
    var x = document.getElementById("counter");
    x.value = keyLeft;
    var d = document.getElementById("canv1");
    var ctx = d.getContext("2d");
    var ctx1 = document.querySelector('#canv1').getContext('2d');
    ctx1.clearRect(0,0,100,100);
    ctx.strokeRect(20+keyRight-keyLeft,20-keyNorth+keyBot,40,40);
    keyLeft++;
}
function north(){
    var x = document.getElementById("counter");
    x.value = keyNorth;
    var d = document.getElementById("canv1");
    var ctx = d.getContext("2d");
    var ctx1 = document.querySelector('#canv1').getContext('2d');
    ctx1.clearRect(0,0,100,100);
    keyNorth+=(10-c);
    c+=2;
    ctx.strokeRect(20+keyRight-keyLeft,20-keyNorth+keyBot,40,40);
    if(20-keyNorth == 20)
    clearInterval(interval);
}
function bot(){
    var x = document.getElementById("counter");
    x.value = keyBot;
    var d = document.getElementById("canv1");
    var ctx = d.getContext("2d");
    var ctx1 = document.querySelector('#canv1').getContext('2d');
    ctx1.clearRect(0,0,100,100);
    ctx.strokeRect(20+keyRight-keyLeft,20-keyNorth+keyBot,40,40);
    keyBot++;
}

HTML

按空格键暂停。

我希望我没有做你的家庭作业。如果是这样，你应该感到内疚

keyLeft = 0;
keyRight = 0;
keyNorth = 0;
keyBot = 0;
var interval;
var c = 0;



//38 up
//37 left
//40 down
//39 right
document.onkeydown = function (e) {

    console.debug(e.keyCode, "down");
    console.debug(e.keyCode, "up");

    switch (e.keyCode){
        case 37:
            initiateLeft();
            break;
        case 38:
            initiateNorth();
            break;
        case 40:
            initiateBot();
            break;
        case 39:
            initiateRight();
            break;
        case 32:
            stop();
            break;
    }
}

function stop(){

}
function initiateRight(){

    interval = setTimeout(right,100);
}
function initiateLeft(){

    interval = setTimeout(left,100);
}
function initiateNorth(){

    c=0;
    interval = setTimeout(north,100);
}
function initiateBot(){

    interval = setTimeout(bot,100);
}

function right(){

    var x = document.getElementById("counter");
    x.value = keyRight;
    var d = document.getElementById("canv1");
    var ctx = d.getContext("2d");
    var ctx1 = document.querySelector('#canv1').getContext('2d');
    ctx1.clearRect(0,0,100,100);    
    ctx.strokeRect(20+keyRight-keyLeft,20-keyNorth+keyBot,40,40);
    keyRight++;
}
function left(){
    var x = document.getElementById("counter");
    x.value = keyLeft;
    var d = document.getElementById("canv1");
    var ctx = d.getContext("2d");
    var ctx1 = document.querySelector('#canv1').getContext('2d');
    ctx1.clearRect(0,0,100,100);
    ctx.strokeRect(20+keyRight-keyLeft,20-keyNorth+keyBot,40,40);
    keyLeft++;
}
function north(){
    var x = document.getElementById("counter");
    x.value = keyNorth;
    var d = document.getElementById("canv1");
    var ctx = d.getContext("2d");
    var ctx1 = document.querySelector('#canv1').getContext('2d');
    ctx1.clearRect(0,0,100,100);
    keyNorth+=(10-c);
    c+=2;
    ctx.strokeRect(20+keyRight-keyLeft,20-keyNorth+keyBot,40,40);
}
function bot(){
    var x = document.getElementById("counter");
    x.value = keyBot;
    var d = document.getElementById("canv1");
    var ctx = d.getContext("2d");
    var ctx1 = document.querySelector('#canv1').getContext('2d');
    ctx1.clearRect(0,0,100,100);
    ctx.strokeRect(20+keyRight-keyLeft,20-keyNorth+keyBot,40,40);
    keyBot++;
}

---

@MindaugasVečkys如果这是你的意思，我已经在帖子中添加了HTML。如果你问我是否可以在代码中添加HTML，是的，那很好！哈哈，为什么你认为这是家庭作业xD？我正在为我的网站做一个小游戏。谢谢你的提示，尽管它很有效。@Genome314，你永远不知道。：）很高兴看到它对你有帮助。

keyLeft = 0;
keyRight = 0;
keyNorth = 0;
keyBot = 0;
var interval;
var c = 0;



//38 up
//37 left
//40 down
//39 right
document.onkeydown = function (e) {

    console.debug(e.keyCode, "down");
    console.debug(e.keyCode, "up");

    switch (e.keyCode){
        case 37:
            initiateLeft();
            break;
        case 38:
            initiateNorth();
            break;
        case 40:
            initiateBot();
            break;
        case 39:
            initiateRight();
            break;
        case 32:
            stop();
            break;
    }
}

function stop(){

}
function initiateRight(){

    interval = setTimeout(right,100);
}
function initiateLeft(){

    interval = setTimeout(left,100);
}
function initiateNorth(){

    c=0;
    interval = setTimeout(north,100);
}
function initiateBot(){

    interval = setTimeout(bot,100);
}

function right(){

    var x = document.getElementById("counter");
    x.value = keyRight;
    var d = document.getElementById("canv1");
    var ctx = d.getContext("2d");
    var ctx1 = document.querySelector('#canv1').getContext('2d');
    ctx1.clearRect(0,0,100,100);    
    ctx.strokeRect(20+keyRight-keyLeft,20-keyNorth+keyBot,40,40);
    keyRight++;
}
function left(){
    var x = document.getElementById("counter");
    x.value = keyLeft;
    var d = document.getElementById("canv1");
    var ctx = d.getContext("2d");
    var ctx1 = document.querySelector('#canv1').getContext('2d');
    ctx1.clearRect(0,0,100,100);
    ctx.strokeRect(20+keyRight-keyLeft,20-keyNorth+keyBot,40,40);
    keyLeft++;
}
function north(){
    var x = document.getElementById("counter");
    x.value = keyNorth;
    var d = document.getElementById("canv1");
    var ctx = d.getContext("2d");
    var ctx1 = document.querySelector('#canv1').getContext('2d');
    ctx1.clearRect(0,0,100,100);
    keyNorth+=(10-c);
    c+=2;
    ctx.strokeRect(20+keyRight-keyLeft,20-keyNorth+keyBot,40,40);
}
function bot(){
    var x = document.getElementById("counter");
    x.value = keyBot;
    var d = document.getElementById("canv1");
    var ctx = d.getContext("2d");
    var ctx1 = document.querySelector('#canv1').getContext('2d');
    ctx1.clearRect(0,0,100,100);
    ctx.strokeRect(20+keyRight-keyLeft,20-keyNorth+keyBot,40,40);
    keyBot++;
}