Question

我使用html和CSS在div中创建了一个对象，以使其成为我正在制作的游戏的播放器，并且按下箭头键时无法移动播放器。有人知道我的代码有什么问题吗？

这是Javascript：

var player = document.getElementById("player");    
var velocity = 5;    
let player = {    
  height:20,    
  width:20,    
  x:200,    
  y:200    
}    
document.addEventListener("keydown", function(event){    
if(event.keyCode === 37){    
    player.x -= velocity:           
else if(event.keyCode ===38){    
    player.y -=velocity;    
}    
});

怎么了？

Answer 1

使用简单的Javascript移动div，只需在文档上添加switch keydown事件，然后自定义div（玩家）的CSS左上角

var player = $('#player');
var velocity = 5;
$(document).keydown(function(e) {
  switch (e.which) {
    case 37:
      player.css('left', player.offset().left - velocity);
      break;
    case 38:
      player.css('top', player.offset().top - velocity);
      break;
    case 39:
      player.css('left', player.offset().left + velocity);
      break;
    case 40:
      player.css('top', player.offset().top + velocity);
      break;
  }
})

#player {
  background: #ccc;
  height: 50px;
  width: 50px;
  position: absolute;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>
  <div id="player"></div>
</body>

</html>

Answer 2

除了Ibnelaiq的答案外，这是一种确保玩家能够更好地移动的方法-

var key = [];
function keys(db, e) {
  var code = e.which || e.keyCode;
  if (db == false && key.includes(code) === false) {
    key.push(code);
  } else if (db === true) {
    key.splice(key.indexOf(code));
  }
}
setInterval(() => {
  console.log(key);
}, 30);
document.getElementsByClassName('game')[0].getContext('2d').fillText('Click here and press keys', 10, 10);

.game {
  background-color: #f1f1f1;
  outline: none;
  border: 1px solid black;
}

<canvas class='game' tabindex='1' width='400px' height='290px' onkeydown='keys(false, event)' onkeyup='keys(true, event)'>

这是什么：

<canvas>（尽管不限于<canvas>）等待keydown并将event.keycode或event.which添加到数组中。它还等待keyup，并删除从数组释放的任何event.keycode或event.which。

setInterval就可以将阵列登录到控制台。代码的最后一行是将文本写入<canvas>的地方。

当然，您可以将他的switch语句添加到setInterval中，但只能在其中添加。

如何使用Javascript中的箭头键移动此对象？

2 个答案: