En este capítulo veremos como mover objetos, y un concepto denominado colisiones, que es detectar cuando un objeto choca con otro o se tocan. Si se ha programado orientado a los videojuegos en el antiguo flash y su actionScript, la detección de colisiones era un tema muy importante en el desarrollo de este tipo de interactivos.
Colisiones
Todos los elementos del DOM tienen un método denominado getBoundingClientRect() que lo que nos facilita es un objeto con la altura, la anchura, la posición en X, la posición en Y, y lo alejado que está de los márgenes top, right, bottom y left. Este método es muy importante sobretodo si queremos meternos de lleno en el mundo del desarrollo de videojuegos. Hay algunos motores de videojuegos que aceptan programación en Javascript. Con esta función lograremos controlar la colisión de la pelota que estamos creando.
Archivos
Se han modificado los archivos dom-ejercicios.html, dom-ejercicios.css, teclado.js y el archivo index_dom.js. Veamos su sintaxis.
Sintaxis del ejercicio dom-ejercicios.html.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Ejercicios del DOM</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hamburgers/1.2.1/hamburgers.min.css" /> <link rel="stylesheet" href="dom-ejercicios.css" /> </head> <body> <header class="header"> <h1>Ejercicios del DOM</h1> </header> <button class="panel-btn hamburger hamburger--vortex" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> <aside class="panel"> <nav class="menu"> <a href="#seccion1">Reloj Digital y Alarma Sonora</a> <a href="#seccion2">Eventos del teclado</a> <a href="#seccion3">Sección 3</a> <a href="#seccion4">Sección 4</a> <a href="#seccion5">Sección 5</a> </nav> </aside> <main> <section id="seccion1" class="section"> <h2>Reloj Digital y Alarma Sonora</h2> <div id="reloj"></div> <div> <button id="activar-reloj">Iniciar Reloj</button> <button id="desactivar-reloj">Detener Reloj</button> <button id="activar-alarma">Iniciar Alarma</button> <button id="desactivar-alarma">Detener Alarma</button> </div> </section> <section id="seccion2" class="section"> <h2>Eventos del teclado</h2> <article class="stage"> <div class="ball"></div> </article> </section> <section id="seccion3" class="section"> <h2>Sección 3</h2> </section> <section id="seccion4" class="section"> <h2>Sección 4</h2> </section> <section id="seccion5" class="section"> <h2>Sección 5</h2> </section> </main> <script src="index_dom.js" type="module"></script> </body> </html>
Sintaxis del ejercicio dom-ejercicios.css.
/* **** Reset CSS **** */
:root {
--main-font: sans-serif;
--font-size: 16px;
--main-color: #f7df1e;
--second-color: #222;
--main-modal-color: rgba(247, 222, 30, 0.85);
--second-modal-color: rgba(34, 34, 34, 0.85);
--container-width: 1200px;
}
html {
box-sizing: border-box;
font-family: var(--main-font);
font-size: var(--font-size);
scroll-behavior: smooth;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
}
/* **** Menú Hamburguesa **** */
.header {
position: sticky;
top: 0;
padding: 1rem;
background-color: var(--main-color);
color: var(--second-color);
}
.header h1 {
margin: 0 auto;
text-align: center;
}
.section {
padding: 2rem;
padding-top: 4rem;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: var(--container-width);
min-height: 100vh;
text-align: center;
}
.panel {
position: fixed;
z-index: 998;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
background-color: var(--second-modal-color);
transition: transform 0.3s ease, opacity 0.5s ease;
/* De arriba */
transform: translate(0, -100%);
/* De abajo */
transform: translate(0, 100%);
/* De izda */
transform: translate(-100%, 0);
/* De dcha */
transform: translate(100%, 0);
/* Opacidad */
opacity: 0;
visibility: hidden;
}
.panel.is-active {
transform: translate(0, 0);
opacity: 1;
visibility: visible;
}
.panel-btn {
position: fixed;
z-index: 999;
bottom: 1vh;
right: 1vw;
width: 4rem;
height: 4rem;
border-radius: 50%;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--main-color);
}
.menu {
width: inherit;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
text-align: center;
}
.menu a {
padding: 2rem;
width: inherit;
display: block;
font-size: 1.5rem;
text-decoration: none;
color: var(--main-color);
transition: all 0.3s ease;
}
.menu a:hover {
font-weight: bold;
color: var(--second-color);
background-color: var(--main-modal-color);
}
/* **** Eventos del teclado **** */
.stage {
display: flex;
min-height: 50vh;
background-color: var(--second-color);
}
.ball {
margin: auto;
width: 4rem;
height: 4rem;
border-radius: 50%;
background-color: var(--main-color);
}
Sintaxis del archivo teclado.js.
const d = document;
let x = 0,
y = 0;
export function moveBall(e, ball, stage) {
const $ball = d.querySelector(".ball"),
$stage = d.querySelector(".stage"),
limitsBall = $ball.getBoundingClientRect(),
limitsStage = $stage.getBoundingClientRect();
console.log(e.keyCode);
console.log(e.key);
console.log(limitsBall, limitsStage);
const move = (direction) => {};
switch (e.keyCode) {
case 37:
if (limitsBall.left > limitsStage.left) {
e.preventDefault();
x--;
}
console.log(e.key);
break;
case 38:
if (limitsBall.top > limitsStage.top) {
e.preventDefault();
y--;
}
console.log(e.key);
break;
case 39:
if (limitsBall.right < limitsStage.right) {
e.preventDefault();
x++;
}
console.log(e.key);
break;
case 40:
if (limitsBall.bottom < limitsStage.bottom) {
e.preventDefault();
y++;
}
console.log(e.key);
break;
default:
break;
}
$ball.style.transform = `translate(${x * 10}px, ${y * 10}px)`;
}
export function shortcuts(e) {
// console.log(e.type);
// console.log(e.key);
// console.log(e.keyCode); // Código que las computadoras le dan a cada tecla
// console.log(`Ctrl: ${e.ctrlKey}`);
// console.log(`Alt: ${e.altKey}`);
// console.log(`Shift: ${e.shiftKey}`);
// console.log(e);
// if (e.key === "a" && e.altKey) {
// alert("Has lanzado una alerta con el teclado");
// }
// if (e.key === "c" && e.altKey) {
// confirm("Has lanzado una confirmación con el teclado");
// }
// if (e.key === "p" && e.altKey) {
// prompt("Has lanzado un aviso con el teclado");
// }
}
Sintaxis del archivo index_dom.js.
import hamburgerMenu from "./menu_hamburguesa.js";
import { digitalClock, alarm } from "./reloj.js";
import { moveBall, shortcuts } from "./teclado.js";
const d = document;
d.addEventListener("DOMContentLoaded", (e) => {
hamburgerMenu(".panel-btn", ".panel", ".menu a");
digitalClock("#reloj", "#activar-reloj", "#desactivar-reloj");
alarm("alarma.mp3", "#activar-alarma", "#desactivar-alarma");
});
d.addEventListener("keydown", (e) => {
shortcuts(e);
moveBall(e, ".ball", ".stage");
});
El resto de archivos lo podemos coger del capítulo 002 de los ejercicios del DOM.