Los videojuegos y las simulaciones usan matemática para representar posiciones, mover objetos, calcular velocidades, detectar choques, aplicar gravedad y crear comportamientos que parezcan coherentes.
Un videojuego no es solamente una imagen en pantalla. Detrás de cada personaje, proyectil, enemigo, plataforma o partícula hay valores numéricos que cambian con el tiempo.
La matemática permite decidir dónde aparece un objeto, hacia dónde se mueve, cuándo toca otro elemento y cómo responde ante una fuerza o una regla del juego.
En este tema veremos ideas básicas que aparecen con frecuencia en videojuegos y simulaciones usando ejemplos sencillos en JavaScript.
La posición de un objeto se representa normalmente con coordenadas. En una pantalla 2D se usan dos valores: x para la ubicación horizontal e y para la ubicación vertical.
const jugador = {
x: 120,
y: 80
};
console.log("Jugador en x=" + jugador.x + ", y=" + jugador.y);Para mover un objeto se modifica su posición. Si un personaje avanza 4 píxeles por actualización, su coordenada x aumenta en 4.
let x = 50;
const velocidadX = 4;
for (let frame = 1; frame <= 5; frame++) {
x += velocidadX;
console.log("Frame " + frame + ": x=" + x);
}Un objeto puede moverse horizontal y verticalmente al mismo tiempo. Para eso se usan dos componentes de velocidad: una para x y otra para y.
let pelota = {
x: 20,
y: 30,
velocidadX: 3,
velocidadY: 2
};
pelota.x += pelota.velocidadX;
pelota.y += pelota.velocidadY;
console.log(pelota.x, pelota.y);Los juegos se actualizan muchas veces por segundo. Si el movimiento depende solamente de la cantidad de cuadros, puede cambiar cuando el juego corre más rápido o más lento.
Una forma más estable es calcular el desplazamiento usando el tiempo transcurrido.
let x = 100;
const velocidad = 200; // píxeles por segundo
const tiempo = 0.016; // aproximadamente 16 ms
x += velocidad * tiempo;
console.log(x);La aceleración cambia la velocidad. En muchos juegos, la gravedad se simula aumentando la velocidad vertical hacia abajo.
let y = 0;
let velocidadY = 0;
const gravedad = 0.8;
for (let frame = 1; frame <= 5; frame++) {
velocidadY += gravedad;
y += velocidadY;
console.log("Frame " + frame + ": y=" + y);
}Un salto puede representarse dando una velocidad vertical inicial hacia arriba. Luego la gravedad modifica esa velocidad hasta que el personaje vuelve a caer.
let y = 100;
let velocidadY = -12;
const gravedad = 1;
for (let frame = 1; frame <= 8; frame++) {
velocidadY += gravedad;
y += velocidadY;
console.log("Frame " + frame + ": y=" + y + ", velocidad=" + velocidadY);
}Los límites permiten evitar que un objeto salga del área de juego. Para eso se comparan sus coordenadas con valores mínimos y máximos.
let x = 780;
const anchoPantalla = 800;
const anchoJugador = 40;
x += 30;
if (x > anchoPantalla - anchoJugador) {
x = anchoPantalla - anchoJugador;
}
console.log(x);Un rebote simple se logra invirtiendo el signo de la velocidad cuando el objeto toca un límite. Si iba hacia la derecha, pasa a ir hacia la izquierda.
let x = 95;
let velocidadX = 8;
const limiteDerecho = 100;
x += velocidadX;
if (x >= limiteDerecho) {
velocidadX = -velocidadX;
}
console.log(x, velocidadX);Una forma común de detectar choques en 2D es comparar rectángulos. Dos rectángulos chocan si se superponen en el eje horizontal y también en el eje vertical.
function colisionan(a, b) {
return a.x < b.x + b.ancho &&
a.x + a.ancho > b.x &&
a.y < b.y + b.alto &&
a.y + a.alto > b.y;
}
const jugador = { x: 10, y: 20, ancho: 30, alto: 40 };
const moneda = { x: 25, y: 35, ancho: 15, alto: 15 };
console.log(colisionan(jugador, moneda));La distancia permite saber qué tan cerca están dos objetos. Se usa para enemigos que persiguen, áreas de efecto, sensores y simulaciones físicas simples.
const jugador = { x: 10, y: 15 };
const enemigo = { x: 40, y: 55 };
const dx = enemigo.x - jugador.x;
const dy = enemigo.y - jugador.y;
const distancia = Math.sqrt(dx * dx + dy * dy);
console.log(distancia);Para mover un objeto hacia otro se calcula una dirección. Luego se normaliza para que su longitud sea 1 y se multiplica por la velocidad deseada.
const enemigo = { x: 10, y: 10 };
const jugador = { x: 40, y: 50 };
const velocidad = 3;
const dx = jugador.x - enemigo.x;
const dy = jugador.y - enemigo.y;
const longitud = Math.sqrt(dx * dx + dy * dy);
const direccionX = dx / longitud;
const direccionY = dy / longitud;
enemigo.x += direccionX * velocidad;
enemigo.y += direccionY * velocidad;
console.log(enemigo.x, enemigo.y);Los ángulos sirven para orientar personajes, disparos, cámaras y objetos. JavaScript trabaja con radianes en sus funciones trigonométricas.
const grados = 45;
const radianes = grados * Math.PI / 180;
const direccionX = Math.cos(radianes);
const direccionY = Math.sin(radianes);
console.log(direccionX, direccionY);Los juegos usan números aleatorios para generar enemigos, premios, mapas, eventos y variaciones. Conviene definir rangos claros para que el resultado sea útil.
function enteroAleatorio(minimo, maximo) {
return Math.floor(Math.random() * (maximo - minimo + 1)) + minimo;
}
const dado = enteroAleatorio(1, 6);
const posicionX = enteroAleatorio(0, 800);
console.log(dado);
console.log(posicionX);Una simulación describe cómo cambia un sistema con el tiempo. No siempre necesita física realista; muchas veces alcanza con reglas simples y consistentes.
let energia = 100;
const consumoPorSegundo = 7;
const tiempo = 5;
energia -= consumoPorSegundo * tiempo;
if (energia < 0) {
energia = 0;
}
console.log(energia);const dx = 0;
const dy = 0;
const longitud = Math.sqrt(dx * dx + dy * dy);
if (longitud === 0) {
console.log("No hay dirección definida");
} else {
console.log(dx / longitud, dy / longitud);
}Los videojuegos y las simulaciones muestran con claridad cómo la matemática se transforma en comportamiento. Coordenadas, velocidades, distancias, ángulos y condiciones permiten construir mundos interactivos aunque los modelos sean simples.
En el próximo tema veremos aplicaciones matemáticas en inteligencia artificial y ciencia de datos.