为何按下W/A/S/D键时我的<div>元素无法移动？

问题1：HTML标签语法错误 #

你的<div>标签中id属性的引号未闭合，导致DOM解析异常：

<!-- 错误写法 -->
<div class="block" id="block></div>

<!-- 修正后 -->
<div class="block" id="block"></div>

问题2：CSS语法错误 #

.block样式中width:50px后面缺少分号，导致后续的position: absolute被浏览器忽略，元素无法通过transform正确移动：

/* 错误写法 */
.block{
  background:#444444;
  border-radius:5px;
  border:2px solid black;
  height:50px;
  width:50px
  position: absolute;
}

/* 修正后 */
.block{
  background:#444444;
  border-radius:5px;
  border:2px solid black;
  height:50px;
  width:50px;
  position: absolute;
}

可选优化：确保页面能捕获键盘事件 #

如果页面未获得焦点，键盘事件可能不会触发，可给body添加tabindex属性来解决：

<body tabindex="0">

修复后的完整代码 #

HTML

<!DOCTYPE html>
<html>
<head>
<title>g</title>
<link rel="stylesheet" href="style.css">
</head>
<body tabindex="0">
<div class="block" id="block"></div>
<script src="code.js"></script>
</body>
</html>

CSS

/* CSS styles */
*{
  margin:0;padding:0;
} 

body{
  overflow: hidden;
}

.block{
  background:#444444;
  border-radius:5px;
  border:2px solid black;
  height:50px;
  width:50px;
  position: absolute;
}

JS

//code.js
document.addEventListener('DOMContentLoaded', function() {
  const blockElement = document.querySelector('.block');
  let x = 0;
  let y = 0;

  function updatePosition() {
    blockElement.style.transform = `translate(${x}px, ${y}px)`;
  }

  document.addEventListener('keydown', function(event) {
    switch (event.key) {
      case 'w':
        y -= 10;
        break;
      case 'a':
        x -= 10;
        break;
      case 's':
        y += 10;
        break;
      case 'd':
        x += 10;
        break;
      default:
        return;
    }

    updatePosition();
  });
});

内容的提问来源于stack exchange，提问作者Strannik _Feed