teclado3.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  6. <title>Teclado 3</title>
  7. body {
  8. margin:0;
  9. }
  10. #escenario {
  11. position: relative;
  12. margin:auto;
  13. background-color:black;
  14. color: white;
  15. width:100vmin;
  16. height:100vmin;
  17. overflow: hidden;
  18. }
  19. #personaje {
  20. position:absolute;
  21. width: 8vmin;
  22. height: 8vmin;
  23. top: 46vmin;
  24. left: 46vmin;
  25. transform: rotate(0deg);
  26. }
  27. </style>
  28. </head>
  29. const MITAD = 4;
  30. let pacman;
  31. let x = 50, y = 50;
  32.  
  33. function iniciar() {
  34. pacman = document.getElementById('personaje');
  35. document.addEventListener('keydown', moverPersonaje);
  36. }
  37.  
  38. function moverPersonaje(evento) {
  39. const offset = obtenerDireccion(evento.key);
  40. const angle = obtenerRotacion(event.key);
  41. x += offset.x*1.5;
  42. y += offset.y*1.5;
  43. pacman.style.left = (x-MITAD) + 'vmin';
  44. pacman.style.top = (y-MITAD) + 'vmin';
  45. pacman.style.transform = `rotate(${angle}deg)`;
  46. if (x < -MITAD) x = 100+MITAD; else if (x > 100+MITAD) x = -MITAD;
  47. if (y < -MITAD) y = 100+MITAD; else if (y > 100+MITAD) y = -MITAD;
  48. }
  49.  
  50. function obtenerDireccion(flecha) {
  51. switch (flecha) {
  52. case 'ArrowLeft': return {x:-1, y:0};
  53. case 'ArrowRight': return {x:1, y:0};
  54. case 'ArrowUp': return {x:0, y:-1};
  55. case 'ArrowDown': return {x:0, y:1};
  56. default: return {x:0, y:0};
  57. }
  58. }
  59.  
  60. function obtenerRotacion(flecha) {
  61. switch (flecha) {
  62. case 'ArrowLeft': return 180;
  63. case 'ArrowRight': return 0;
  64. case 'ArrowUp': return -90;
  65. case 'ArrowDown': return 90;
  66. default: return 0;
  67. }
  68. }
  69.  
  70. <body onload="iniciar()">
  71. <div id="escenario">
  72. <h1>Teclado 3</h1>
  73. <p>Pulsa las flechas de dirección para mover el personaje</p>
  74. <img id="personaje" src="pacman_right.gif">
  75. </div>
  76. </body>
  77. </html>

Proinf.net