Objeto playerPosition

Cursos Empresas Blog Live Conf Precios

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

Objeto playerPosition

Tommy Toala Cox

Estudiante

Mi respuesta:

++1. Situación a resolver.- renderizar al personaje.++

Como estoy usando un objeto, el cual renderiza mi mapa, decidí insertarle también la propiedad de playerPosition, y también le agregué el método de renderizado. Me gusta de esta manera, porque así creo que se entiende más, pues el llamado sigue el orden. Mi objeto quedo de esta forma

const map={
    lvl:0,
    
    playerPosition:{
        x:undefined,
        y:undefined,
        render:function(){
            game.fillText(emojis["PLAYER"],this.y,this.x)
        }
    },
    
    render:function () {
        if(this.lvl>=maps.length){
            return console.log ("Ese mapa no existe")
        }
        const Map = maps[this.lvl].match(/[IXO\-]+/g)
            .map(a => a.split(""))

        game.clearRect(0, 0, canvasSize, canvasSize)

        game.font = canvasElement + "px Verdana"
        game.textAlign = "end"
        Map.forEach((x, xi) => {
        x.forEach((y, yi) => {
            const posX = canvasElement * (xi + 1)
            const posY = canvasElement * (yi + 1)
            game.fillText(emojis[y], posY, posX)
            if(this.playerPosition.x===undefined && this.playerPosition.y===undefined){
                if(y==="O"){
                    this.playerPosition.x=posX
                    this.playerPosition.y=posY
                }
            }
        })
    })
    }
}

De esta manera, si quisiera solo llamar el renderizado de mi player sería así

map.playerPosition.render()

entonces en mi función que inicia el juego quedaría así

function startGame() { 
    map.lvl=2
    map.render()
    map.playerPosition.render()

}

Con esto ya resolví mi primera situación

++2. Situación.- Mover el personaje++ Pues como en mi objeto ya había creado la función que renderiza mi personaje, entonces lo que hice fue; llamar esa función dentro de las funciones que generan el movimiento

function moveUp() {
    console.log(map.playerPosition)
    map.playerPosition.x-=canvasElement
    map.playerPosition.render()
}
function moveLeft(event) {
    console.log(map.playerPosition)
    map.playerPosition.y-=canvasElement
    map.playerPosition.render()

}
function moveRight(event) {
    console.log(map.playerPosition)
    map.playerPosition.y+=canvasElement
    map.playerPosition.render()
}
function moveDown(event) {
    console.log(map.playerPosition)
    map.playerPosition.x+=canvasElement
    map.playerPosition.render()
}

Logrando el movimiento, y también así surge la siguiente situación a resolver

++3. Situación.- El player se está renderizando sin borrar su posición anterior++ Entonces a partir de eso buscando soluciones. 1ro intente solo renderizar el mapa, antes que renderice el player, dentro de las funciones de movimiento Algo así

function moveUp() {
    console.log(map.playerPosition)
    map.playerPosition.x-=canvasElement
    map.render()
    map.playerPosition.render()
}

Pero el problema que había con eso, es que la función que renderiza todo el mapa, también le da su posición inicial al player. Para resolverlo, dentro de la función render del mapa, agregue una condición, que dice; solo me vas a agregar la posición inicial di mi player, si su posición inicial aún no está definida.

De esta manera siempre dibujará el mapa, y el player en su nueva posición

 if(this.playerPosition.x===undefined && this.playerPosition.y===undefined){
                if(y==="O"){
                    this.playerPosition.x=posX
                    this.playerPosition.y=posY
                }
            }
        })

Con esto ya logre que se mueva y que dibuje el mapa, sin embargo, cuando hacía eso, simplemente estaba renderizando un mapa encima del otro, sin borrar el anterior, entonces, me quedaba así

++4. situación.- Borrar el mapa anterior++ Esta parte la verdad me hizo pensar un poco, porque no recordaba el metodo clearRect() que vimos en las primeras clases.

la Pregunta era.- Donde meto esto? xD la respuesta es simple, aunque me hizo cabezón por unos minutos.
La línea de pensamiento correcta fue; Si se me está siempre dibujando un mapa encima del otro, entonces en la función que lo está renderizando, le tengo que decir que antes que renderize cualquier cosa, borre lo anterior. Como también habíamos ya definido la variable que me dice el tamaño del canvas canvasSize

game.clearRect(0, 0, canvasSize, canvasSize)

Toda la función render quedo así,

render:function () {
        if(this.lvl>=maps.length){
            return console.log ("Ese mapa no existe")
        }
        const Map = maps[this.lvl].match(/[IXO\-]+/g)
            .map(a => a.split(""))

        game.clearRect(0, 0, canvasSize, canvasSize)

        game.font = canvasElement + "px Verdana"
        game.textAlign = "end"
        Map.forEach((x, xi) => {
        x.forEach((y, yi) => {
            const posX = canvasElement * (xi + 1)
            const posY = canvasElement * (yi + 1)
            game.fillText(emojis[y], posY, posX)
            if(this.playerPosition.x===undefined && this.playerPosition.y===undefined){
                if(y==="O"){
                    this.playerPosition.x=posX
                    this.playerPosition.y=posY
                }
            }
        })
    })
    }

Logrando que el player se mueva libre y salvaje por la vida, sin miedo a nada.

Espero le sirva alguien, porque creo q me demore más escribiendo esto que resolviendo el reto juejuejue

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