Cursos Empresas Blog Live Conf Eventos Precios

0:0014:11

Detectando colisiones con arrays

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

Clase 13 de 24

Clase 13 / 24

Carlos Andres Alavez Santiago

Convertí los maps a Let, agregue un index para cambiar de mapa, para checar si es bomba o regalo, convertí las coordenadas a posición de un arrglo, para solucionar el problema de los decimales, usé Math.Round.

function detectarObjeto(){
    posX = Math.round(playerPosition.x/elementSize)-1;
    posY = Math.round(playerPosition.y/elementSize)-1;
    if(mapCols[posY][posX]==='X'){
        playerPosition.i=0;
    }
    else if(mapCols[posY][posX]==='I'){
        if(indexMap< (maps.length-1)){
            indexMap++;
        }
        
    }

}

Aquí dejo el resto del programa, donde incluso reinicio de niviel con un index al playerPosition, que se resetea cada que encuentra bomba.

Dejo todo el programa porque hice varios cambios

const canvas= document.querySelector('#game');
const game = canvas.getContext('2d');

const btnUp = document.querySelector('#up');
const btnLeft = document.querySelector('#left');
const btnRight = document.querySelector('#right');
const btnDown = document.querySelector('#down');

let canvasSize;
let elementSize;

let indexMap = 0;
let map;
let mapRows;
let mapCols;

let posX;
let posY;

const playerPosition={
    x: undefined,
    y: undefined,
    i: 0,
};

window.addEventListener('load', setCanvasSize);
window.addEventListener('resize',setCanvasSize);

function setCanvasSize(){
    if (window.innerHeight > window.innerWidth){
        canvasSize =  window.innerWidth * 0.80;
    } else{
        canvasSize =  window.innerHeight * 0.80;
    }

    canvas.setAttribute('width', canvasSize);
    canvas.setAttribute('height', canvasSize);

    elementSize = canvasSize/10;
    
    startGame();
}

function startGame(){

    game.font = elementSize-10 + 'px Verdana';
    game.textAlign = 'end';

    convertMap();

    game.clearRect(0,0,canvasSize,canvasSize);
    mapCols.forEach((rows,rowsI) => {
        rows.forEach((item, itemI)=>{

            if(item == 'O' && playerPosition.i==0){
                playerPosition.x = elementSize*(itemI+1);
                playerPosition.y = elementSize*(rowsI+1);
                playerPosition.i = 1;
                //console.log(elementSize*(itemI+1), elementSize*(rowsI+1));
                
            }

            game.fillText(emojis[item], elementSize*(itemI+1), elementSize*(rowsI+1));
        });
    });
    
    movePlayer();
    /* for(let i=1; i<=10;i++){
        for(let j=1; j<=10; j++){
            game.fillText(emojis[mapCols[i-1][j-1]], elementSize*j, elementSize*i);
        }
    } */
    
}
function convertMap(){
    map = maps[indexMap];
    mapRows = map.trim().split('\n');
    mapCols = mapRows.map(row=>row.trim().split(''));
}
function movePlayer(){
    game.fillText(emojis['PLAYER'], playerPosition.x, playerPosition.y);
}

window.addEventListener('keydown', moveByKeys);
btnUp.addEventListener('click',moveUp);
btnLeft.addEventListener('click',moveLeft);
btnRight.addEventListener('click',moveRight);
btnDown.addEventListener('click',moveDown);

function moveByKeys(event){
    if(event.key=='ArrowUp'){
        moveUp();
    }
    else if(event.key=='ArrowDown'){
        moveDown();
    }
    else if(event.key=='ArrowRight'){
        moveRight();
    }
    if(event.key=='ArrowLeft'){
        moveLeft();
    }
}
function moveUp(){
    if(playerPosition.y>elementSize){
        playerPosition.y-=elementSize;
        detectarObjeto();
    }
    setCanvasSize();
    
}
function moveLeft(){
    if(playerPosition.x > elementSize+1){
        playerPosition.x -= elementSize;
        detectarObjeto();
    }
    setCanvasSize();
}
function moveRight(){
    if(playerPosition.x<elementSize*10){
        playerPosition.x+=elementSize;
        detectarObjeto();
    } 
    setCanvasSize();
}
function moveDown(){
    if(playerPosition.y < elementSize*10){
        playerPosition.y+=elementSize;
        detectarObjeto();
    }
    
    setCanvasSize();
}
function detectarObjeto(){
    posX = Math.round(playerPosition.x/elementSize)-1;
    posY = Math.round(playerPosition.y/elementSize)-1;
    if(mapCols[posY][posX]==='X'){
        playerPosition.i=0;
    }
    else if(mapCols[posY][posX]==='I'){
        if(indexMap< (maps.length-1)){
            indexMap++;
        }
        
    }

}

Detectando colisiones con arrays

Progreso del curso

Introducción

Canvas

Mapa del juego

Movimientos del jugador

Colisiones

Bonus: adictividad

Deploy

Próximos pasos