teclado3.html 

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

Proinf.net