Detectando colisiones fijas

Taller Práctico de JavaScript: ¡Crea tu Primer Videojuego!

Contenido del curso

Introducción

1
Programemos un juego con JavaScript
17:13 min

Canvas

Mapa del juego

Movimientos del jugador

Colisiones

Bonus: adictividad

Deploy

Próximos pasos

Tomar examen

Detectando colisiones fijas

Matias Martel

Estudiante

Detectar las colisiones no me resulto dificil lo que si se me complico fue como alojar la ubicacion de las bombas por nivel ya que me generaban duplicados para eso modifique el codigo de esta forma

Variables con la que trabajaremos

const canvas = document.querySelector('#game');
const game = canvas.getContext('2d');
const buttons = {
    up: document.querySelector('#up'),
    left: document.querySelector('#left'),
    right: document.querySelector('#right'),
    down: document.querySelector('#down')
};

let canvasSize;
let elementsSize;
let lvl = 0;
//Utilizamos genX y genY para corregir el problema que el emoji del jugador no sea responsive y provoque problemas de coordenadas y hacemos que el jugador se ubique en medio de la posicion (ej. 0,5) y se desplace en un entorno de 10x10
// x e y siguen siendo las coordenadas contextuadas con el resto de los elementos para detectar colisiones
const playerPosition = {
    x: undefined,
    y: undefined,
    genX: undefined,
    genY: undefined,
};
// Utilizaremos esta constante para ubicar la locacion de la meta en cada uno de los mapas
const giftPosition = {
    x: undefined,
    y: undefined,
};

// Sera la constante donde alojaremos las coordenadas de cada una de las bombas de cada uno de los mapas
const bombsPosition = {

}

// Espera a que cargue el contenido html de la pagina antes de lanzar la funcion
window.addEventListener('load', resizeCanvas);
window.addEventListener('resize', resizeCanvas);

Function de start game

 function startGame (lvl) {
    game.font = elementsSize + 'px Verdana';
    //Situamos los elementos en el medio de la casilla tanto horizontal como verticalmente
    game.textAlign = "center";
    game.textBaseline = 'middle';

    const map = maps[lvl]
//Agarramos el mapa del array de mapas y le quitamos los espacios en blanco al inicio y al final con trim y luego con split creamos un arreglo donde el inicio y el final de cada elemento se marca por los saltos de linea '\n'
    const mapRows = map.trim().split('\n');
//Del array resultante usamos map para recorrer cada uno de sus elementos (rows) limpiando los espacios en blanco con trim y luego separandolos por "filas" con split
    const mapRowCols = mapRows.map(row => row.trim().split(''));
    game.clearRect(0,0,canvasSize, canvasSize);
//Recorremos con for each el array bidimensional a partir del string del map y recibimos dos parametros su valor y su indice
    mapRowCols.forEach((row, rowIndex) => {
//Recorremos las filas iterando sobre cada columna y recibimos su valor y su indice
        row.forEach((col, colIndex) => {
//Declaramos que valor tendra el emoji en esa columna
            const emoji = emojis[col];
//Definimos el posicionamiento que tendra en horizontal y vertical esa columna al alinearse en el canvas (ej: elementsSize vale 60 el elemento se insertara en el medio que seria 30)
            const posX = elementsSize * (colIndex + 1/2);
            const posY = elementsSize * (rowIndex + 1/2);
//Solo le damos coordenadas a la posicion del jugador si aun no fueron dadas (si no fue definida en x no hace falta verificar que no haya sido definida en y ya que siempre se definen las dos)       
            if (col == 'O') {
                if (!playerPosition.x && !playerPosition.y) {
                playerPosition.genX = posX / elementsSize
                playerPosition.genY = posY / elementsSize
                playerPosition.x = posX
                playerPosition.y = posY   
                }}
// Localizamos la ubicacion de la meta para comprobar colision posteriormente
            else if (col == 'I') {
                giftPosition.x = posX
                giftPosition.y = posY
            } 
//Verificamos si el objeto donde se alojan las coordenadas de las bombas ya cuenta con una propiedad con el valor del nivel y si no la tiene la creamos como un array vacio
            else if (col == 'X') {
                if (!bombsPosition.hasOwnProperty(lvl)) {
                    bombsPosition[lvl] = []
                }
//Verificamos que las coordenadas no hayan sido alojadas aun y si no las insertamos en el array de arriba
                const coordExists = bombsPosition[lvl].some(coord => coord[0] === posX && coord[1] === posY);
                if (!coordExists) {
                    bombsPosition[lvl].push([posX, posY]);
                }
            }
//Llenamos en nuestro canvas con cada iteracion
            game.fillText(emoji, posX, posY)
        });
    });
    movePlayer()
}

Funciones de movimiento

function movePlayer() {
// Ubicamos al jugador en la cuadrilla obteniendo su ubicacion por medio de las variables genX/Y
    game.fillText(emojis['PLAYER'], playerPosition.genX * elementsSize, playerPosition.genY * elementsSize);
// Corregimos las coordenadas x e y del jugador para que coincidan con su ubicacion actual
    playerPosition.x = ((playerPosition.genX) * elementsSize);
    playerPosition.y = ((playerPosition.genY) * elementsSize);
// Detectamos la colision con las bombas y la meta
    bombsDetection()
    giftDetection()
}

window.addEventListener('keydown', moveByKeys);
buttons.up.addEventListener('click', moveUp);
buttons.left.addEventListener('click', moveLeft);
buttons.right.addEventListener('click', moveRight);
buttons.down.addEventListener('click', moveDown);
 
function moveByKeys(event) {
    if (event.key == 'ArrowUp') moveUp();
    else if (event.key == 'ArrowLeft') moveLeft();
    else if (event.key == 'ArrowRight') moveRight();
    else if (event.key == 'ArrowDown') moveDown();
}
function moveUp() {
    playerPosition.genY -= 1;
//Si el jugador se desplaza fuera del canvas lo volvemos a insertar en la primera posicion de la coordenada y
    if (playerPosition.genY < 0) {
        playerPosition.genY = 0.5;
    }
    startGame(lvl);
}
function moveLeft() {
    playerPosition.genX -= 1;
//Si el jugador se desplaza fuera del canvas lo volvemos a insertar en la primera posicion de la coordenada x
    if (playerPosition.genX < 0) {
        playerPosition.genX = 0.5;
    }
    startGame(lvl);
}
function moveRight() {
    playerPosition.genX += 1;
//Si el jugador se desplaza fuera del canvas lo volvemos a insertar en la ultima posicion de la coordenada x
    if (playerPosition.genX > 10) {
        playerPosition.genX = 9.5;
    }
    startGame(lvl);
}
function moveDown() {
    playerPosition.genY += 1;
//Si el jugador se desplaza fuera del canvas lo volvemos a insertar en la ultima posicion de la coordenada y
    if (playerPosition.genY > 10) {
        playerPosition.genY = 9.5;
    }
    startGame(lvl);
}

Funciones de deteccion

function bombsDetection () {
//Buscamos una coincidencia en el array contenido en la propiedad lvl(ej. 0) y en caso de que la posicion del jugador coincida con alguna de las bombas reseteamos su posicion al inicio del mapa 
    bombsDetected = bombsPosition[lvl].find(bomb => bomb[0] == playerPosition.x && bomb[1] == playerPosition.y)
    if (bombsDetected) {
        console.log("collision detected")
        playerPosition.x =  undefined;
        playerPosition.y =  undefined;
        startGame(lvl)
      }
}

function giftDetection () {
//Verificamos si la posicion del jugador y la meta son identicas y si lo son lo desplazamos al siguiente nivel, si llegamos al ultimo nivel volvemos al primero
    if (playerPosition.x == giftPosition.x && playerPosition.y == giftPosition.y) {
        console.log("gift detected")
        if (lvl < (maps.length - 1)) {
            lvl += 1;
        } else {
            playerPosition.x =  undefined;
            playerPosition.y =  undefined;
            lvl = 0
        }
        startGame(lvl)
        } 
}

Funcion de resize

function resizeCanvas () {
    windowHeight = window.innerHeight * 0.8
    windowWidth = window.innerWidth * 0.8
//Dependiendo del tamaño de la pantalla, va a colocar el tamaño cuadrado del canvas
//Al dividir entre 10 y luego aproximar el valor a un entero garantiza que el canvas será un entero múltiplo de 10. Finalmente se multiplica la expresión por 10 para obtener el dato real del canvas
//Con Math.ceil nos ahorramos el problema de los decimales
    if (window.innerHeight > window.innerWidth) {
        if ((windowWidth % 10) !== 0) {
             canvasSize = Math.ceil(windowWidth / 10) * 10;
        } else {
             canvasSize = windowWidth;
        }} 
    else {
        if ((windowHeight % 10) !== 0) {
             canvasSize = Math.ceil(windowHeight / 10) * 10;
        } else {
             canvasSize = windowHeight;
        }
    }

     canvas.setAttribute('width', canvasSize);
     canvas.setAttribute('height', canvasSize);
     elementsSize = (canvasSize / 10);
     startGame(lvl)
     
 }

Detectando colisiones fijas

Introducción

Programemos un juego con JavaScript

Canvas

¿Qué es canvas en JavaScript?

Tamaño del canvas y sus elementos

Canvas responsive

Mapa del juego

¿Qué es un array bidimensional?

Arreglos multidimensionales en JavaScript

Refactor del mapa de juego

Movimientos del jugador

Eventos y botones

Objeto playerPosition

Limpieza de movimientos

No te salgas del mapa

Colisiones

Detectando colisiones fijas

Detectando colisiones con arrays

Victoria: subiendo de nivel

Derrota: perdiendo vidas

Bonus: adictividad

Sistema de vidas y corazones

Sistema de tiempo y puntajes

¿Qué es localStorage?

Guardando records del jugador

Deploy

Depurando errores del juego

Desplegando el juego a GitHub Pages

Próximos pasos

Reto: reinicio del juego

Reto: timeouts de victoria o derrota

¿Quieres un simulador laboral?