js实现键盘与按钮控制容器移动

html：

<button id="up">Up</button>
<button id="down">Down</button>
<button id="left">Left</button>
<button id="right">Right</button>


<div id="object" style="width: 50px; height: 50px; background-color: red; position: absolute; "></div>

js：

    //盒子移动

   var object = document.getElementById('object');

var upButton = document.getElementById('up');

var downButton = document.getElementById('down');

var leftButton = document.getElementById('left');

var rightButton = document.getElementById('right');

var isUpPressed = false;

var isDownPressed = false;

var isLeftPressed=false;

var isRightPressed=false;

var velocity = 5; // 每次移动的速度

var width1=50;

let height=50;

function updatePosition() {

  var top = parseInt(object.style.top, 10) || 20;//添加碰撞

  var left=parseInt(object.style.left,10) || 20;

  //碰撞

  if(left>=500) left=500;

  if(top>=500) top=500;

  if (isUpPressed && !isDownPressed) {

    object.style.top = (top - velocity) + 'px';

    object.style.backgroundColor='black';

  } else if (isDownPressed && !isUpPressed) {

    object.style.top = (top + velocity) + 'px';

    object.style.backgroundColor='yellow';

    width1+=1;

    height++;

    object.style.width=width1+'px';

    object.style.height=height+'px';

  }

  else if (isLeftPressed && !isRightPressed) {

    object.style.left = (left - velocity) + 'px';

    object.style.backgroundColor='green';

  }

  else if (isRightPressed && !isLeftPressed) {

    object.style.left = (left + velocity) + 'px';

    object.style.backgroundColor='blue';

  }



}



function onKeyDown(event) {

  if (event.key === 'Up' || event.key === 'ArrowUp' || event.key === 'w') {

    isUpPressed = true;

  } else if (event.key === 'Down' || event.key === 'ArrowDown' || event.key === 's') {

    isDownPressed = true;

  }

  else if (event.key === 'Left' || event.key === 'ArrowLeft' || event.key === 'a') {

    isLeftPressed = true;

  }

  else if (event.key === 'Right' || event.key === 'ArrowRight' || event.key === 'd') {

    isRightPressed = true;

  }

  updatePosition();

}



function onKeyUp(event) {

  if (event.key === 'Up' || event.key === 'ArrowUp' || event.key === 'w') {

    isUpPressed = false;

  } else if (event.key === 'Down' || event.key === 'ArrowDown' || event.key === 's') {

    isDownPressed = false;

  }

  else if (event.key === 'Right' || event.key === 'Arrowright' || event.key === 'd') {

    isRightPressed = false;

  }

  else if (event.key === 'Left' || event.key === 'ArrowLeft' || event.key === 'a') {

    isLeftPressed = false;

  }

  updatePosition();

}



// 监听键盘按下和抬起事件

window.addEventListener('keydown', onKeyDown);

window.addEventListener('keyup', onKeyUp);

// 监听按钮按下和抬起事件

upButton.addEventListener('mousedown', () => isUpPressed = true);

upButton.addEventListener('mouseup', () => isUpPressed = false);

downButton.addEventListener('mousedown', () => isDownPressed = true);

downButton.addEventListener('mouseup', () => isDownPressed = false);

leftButton.addEventListener('mousedown',()=>isLeftPressed=true);

leftButton.addEventListener('mouseup',()=>isLeftPressed=false);

rightButton.addEventListener('mousedown',()=>isRightPressed=true);

rightButton.addEventListener('mouseup',()=>isRightPressed=false);



// 定时更新位置

setInterval(updatePosition, 10);

效果展示：

感谢阅读