Как я могу переместить этот объект с помощью клавиш со стрелками в Javascript? - PullRequest
Новая
       2

Как я могу переместить этот объект с помощью клавиш со стрелками в Javascript?

0 голосов
/ 31 октября 2019

Я сделал объект из div в html и CSS, чтобы сделать игрока для своей игры, которую я делаю, и я не могу заставить игрока двигаться, когда я нажимаю клавиши со стрелками. Кто-нибудь знает, что не так с моим кодом?

Вот 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;    
}    
});

Что не так?

Ответы [ 2 ]

1 голос
/ 31 октября 2019

Перемещение div с помощью простого Javascript, просто добавление события keydown для документа, а затем настройка css of div (player) в верхнем левом углу

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>
0 голосов
/ 31 октября 2019

С добавлением к ответу Ибнелаика, вот способ убедиться, что игроки могут двигаться лучше - 

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, но только там.

...