Управляем клавиатурой

.markdown

Управляем клавиатурой

A Pen by Artem on CodePen.

License.

index.html

  <p>Кликните по "изображению" мыши и перемещайте её с помощью клавиш со стрелками.</p>

  <pre id="mouse">
 _   _
(q\_/p)
 /. .\
=\_t_/=   __
 /   \   (
((   ))   )
/\) (/\  /
\  Y  /-'
 nn^nn
</pre>

script.js

mouse.tabIndex = 0;

mouse.onclick = function () {
  this.style.left = this.getBoundingClientRect().left + "px";
  this.style.top = this.getBoundingClientRect().top + "px";

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

mouse.onkeydown = function (event) {
  switch (event.code) {
    case "KeyW":
    case "ArrowUp":
      this.style.top = parseInt(this.style.top) - this.offsetHeight + "px";
      return false;
    case "KeyS":
    case "ArrowDown":
      this.style.top = parseInt(this.style.top) + this.offsetHeight + "px";
      return false;
    case "KeyA":
    case "ArrowLeft":
      this.style.left = parseInt(this.style.left) - this.offsetWidth + "px";
      return false;
    case "KeyD":
    case "ArrowRight":
      this.style.left = parseInt(this.style.left) + this.offsetWidth + "px";
      return false;
  }
};

style.css

#mouse {
  display: inline-block;
  cursor: pointer;
  margin: 0;
}

#mouse:focus {
  outline: 1px dashed black;
}