olichka1

Сделать управление объектом на сайте с помощью стрелок с клавиатуры, мне помог учебник Ильи Кантора. «Фокусировка: focus/blur». Изображение черного квадрата 50 на 50 пикселей.

<style>
 #qwerty {
      position: relative;
      width: 50px;
      height: 50px;
      background: black;
      cursor: pointer;
    }
    #qwerty:focus {
    	outline: 1px dashed black;
    }
</style>
 <p>Кликните по "изображению" и перемещайте его с помощью клавиш со стрелками.</p>

  <pre id="qwerty">

  <script>
  	 qwerty.tabIndex = 0;
    
    qwerty.onclick = function() {
      this.style.left = this.getBoundingClientRect().left + 'px';
      this.style.top = this.getBoundingClientRect().top + 'px';

      this.style.position = 'fixed';
    };


    qwerty.onkeydown = function(e) {
      switch (e.key) {
        case 'ArrowLeft':
          this.style.left = parseInt(this.style.left) - this.offsetWidth + 'px';
          return false;
        case 'ArrowUp':
          this.style.top = parseInt(this.style.top) - this.offsetHeight + 'px';
          return false;
        case 'ArrowRight':
          this.style.left = parseInt(this.style.left) + this.offsetWidth + 'px';
          return false;
        case 'ArrowDown':
          this.style.top = parseInt(this.style.top) + this.offsetHeight + 'px';
          return false;
      }
    };
	</script>