java画布中让整个图一起移动_在按住键的同时让画布元素移动然后在放开时停止...

Problem with code: 如果按住箭头键并查看控制台 - 键盘在每次击键后都会触发 . 此外，按住箭头键后对象停止移动 .

Why this is a problem in this context: 我希望每次触发箭头keydown时移动方块，然后在触发keyup时停止 .

Desired effect ：我想按住一个键来移动盒子，然后当我松开键时它停止移动 .

这可以实现吗？如果是这样，大概怎么样？如果没有，是否有另一种注册方向的方法？

为了记录，我不想使用Jquery . 感谢您的任何提示或建议 .

使用Javascript

keyLeft = 0;

keyRight = 0;

keyNorth = 0;

keyBot = 0;

var interval;

var c = 0;

window.οnlοad=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

Press spacebar to pause.