Objeto playerPosition

Clase 9 de 24 • Taller Práctico de JavaScript: ¡Crea tu Primer Videojuego!

Antonio Mora

student•

Hola.

Yo lo solucioné de la forma siguiente:

En la función startGame agregué la siguiente condición playerPostion.x === undefined para asignarle al jugador la posición de la puerta solo cuando su posición sea undefined
En las funciones de mover, después de actualizar la posición del jugador, ejecuto la función setCanvasSize para que se dibuje todo el mapa de nuevo

Beder Danilo Casa Condori

student•

interesante

Sergio Alejandro Saldaña Rangel

student•

Yo lo suluciné creando una función que limpia el mapa con un clearRect de esquina a esquina y separando el renderizado del mapa. Así primero limpio el mapa, luego cambio la posición del jugador, luego renderizo el mapa y al final renderizo el jugador.

Aaron Santiago Loyo Zabala

student•

Te quedo muy bien

Beder Danilo Casa Condori

student•

esta genial

Nestor Rios Garcia

student•

Yo lo solucioné usando un contador

let moves = 0;
// la incializamos en 0
// incluso nos puede ayudar para mas en el futuro

Modificamos el condicional en el que identificamos donde inicia el camino en nuestro mapa

if (column === 'O' && moves === 0) {
                playerPosition.x = xPosition
                playerPosition.y = yPosition
                game.fillText(emojis['PLAYER'], playerPosition.x, playerPosition.y)
}


// dibujamos a nuestro jugador con esta posicion solo cuando no ha habido movimientos

Después modificamos la función mover Jugador para terminar nuestra solucion


function movePlayer(direction) {
    moves++ 
    // cada vez que usemos los botones o teclas para mover al jugador aumentara el contador

   /// Aqui actualizamos la posicion del jugador ya establecido en el condicional anterior
    switch (direction) {
        case 'moveUp':
            playerPosition.y -= elementSize
            break;
        case 'moveLeft':
            playerPosition.x -= elementSize
            break;
        case 'moveRight':
            playerPosition.x += elementSize
            break;
        case 'moveDown':
            playerPosition.y += elementSize
            break;
        default:
            break;
    }
    printMap() // Limpiamos el mapa
    game.fillText(emojis['PLAYER'], playerPosition.x, playerPosition.y)
    // dibujamos a nuestro jugador en su nueva posicion
}

Matias Martel

student•

Buenos despues de mucha lucha logre desplazar el jugador sin que se duplique ni se salga de los bordes

Definimos las variables a utilizar

let canvasSize;
let elementsSize;
const playerPosition = {
    x: undefined,
    y: undefined,
}


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

Esta es la funcion que dibuja el canvas


 function startGame () {
    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[0]
    //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(''));
    
    //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' && playerPosition.x == undefined) {
                playerPosition.x = posX 
                playerPosition.y = posY
            }
    //Llenamos en nuestro canvas con cada iteracion
            game.fillText(emoji, posX, posY)
        });
    });
    //Version for del forEach de arriba
    // for (let row = 1; row <= 10; row++) {
    //     for (let col = 1; col <= 10; col++) {
    //     game.fillText(emojis[mapRowCols[row -1][col - 1]], elementsSize * (col - 1/2), elementsSize * (row - 1/2));
    //  }
    // }
    //Solo insertamos al jugador en el canvas si aun no fue insertado
    if (playerPosition.x || playerPosition.y == undefined) {
    movePlayer()
    }
}

function movePlayer() {
  game.fillText(emojis['PLAYER'], playerPosition.x, playerPosition.y);
}

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
    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()
 }

Le damos movimiento al jugador

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() {
    console.log('Me quiero mover hacia arriba');
    playerPosition.y -= elementsSize;
    //Si el jugador se desplaza fuera del canvas lo volvemos a insertar en la primera posicion de la coordenada y
    if (playerPosition.y < 0) {
        playerPosition.y = elementsSize * 1/2;
    }
    game.clearRect(0, 0, canvasSize, canvasSize)
    startGame()
    movePlayer();
}
function moveLeft() {
    console.log('Me quiero mover hacia izquierda');
    playerPosition.x -= elementsSize;
    //Si el jugador se desplaza fuera del canvas lo volvemos a insertar en la primera posicion de la coordenada x
    if (playerPosition.x < 0) {
        playerPosition.x = elementsSize * 1/2;
    }
    game.clearRect(0, 0, canvasSize, canvasSize)
    startGame()
    movePlayer();
}
function moveRight() {
    console.log('Me quiero mover hacia derecha');
    playerPosition.x += elementsSize;
    //Si el jugador se desplaza fuera del canvas lo volvemos a insertar en la ultima posicion de la coordenada x
    if (playerPosition.x > canvasSize) {
        playerPosition.x = canvasSize - elementsSize * 1/2;
    }
    game.clearRect(0, 0, canvasSize, canvasSize)
    startGame()
    movePlayer();
}
function moveDown() {
    console.log('Me quiero mover hacia abajo');
    playerPosition.y += elementsSize;
    //Si el jugador se desplaza fuera del canvas lo volvemos a insertar en la ultima posicion de la coordenada y
    if (playerPosition.y > canvasSize) {
        playerPosition.y = canvasSize - elementsSize * 1/2;
    }
    game.clearRect(0, 0, canvasSize, canvasSize)
    startGame()
    movePlayer();
}

Beder Danilo Casa Condori

student•

bien hecho

Luis Miguel Rodriguez

student•

Solucion:

Crear función clearMap:

function clearMap(){
  game.clearRect(0, 0, canvasSize, canvasSize)
}

En startGame ejecutar clearMap en primemer momento y validar los playerposition (x,y)

function startGame() {
  clearMap();
  // tamaño elementos
  game.font = (elementsSize - 6) + 'px Verdana';
  game.textAlign = "end";
  const map = maps[0];
// obtener arreglo de caracteres individuales
  const mapRowCols = map.trim().split('\n').map(row => row.trim().split(''));

  // index: obtener posiciones
  mapRowCols.forEach((row, rowIndex) => {
    row.forEach((col, colIndex) => {
     
      
      if (col == 'O' && playerPosition.x == undefined && playerPosition.y == undefined) {
       playerPosition.x = elementsSize * (colIndex + 1);
       playerPosition.y = elementsSize * (rowIndex + 1);
       console.log(playerPosition);
      }
      game.fillText(emojis[col], elementsSize * (colIndex + 1), elementsSize * (rowIndex + 1));
    });
  });
  movePlayer();
}

Por ultimo ejecutar los diferentes eventos:

upButton.addEventListener('click', function() {
  mover('arriba');
  playerPosition.y-=elementsSize;
  startGame()

Demostracion

Manuel Andres García Vera

student•

para limpiar el mapa hice una funcion que borrara el mapa

function clearmap(){
    game.clearRect(0,0, canvasSize, canvasSize)
}

pero después de borrar todo debía volver a renderizar el mapa asi que cree otra función que lo hiciera

function renderMap(){
    const map = maps[0];
    const mapRows = map.trim().split('\n');

    const mapRowCols = mapRows.map(row => row.trim().split(''));
    console.log({map,mapRows, mapRowCols});
    mapRowCols.forEach((row, rowI) => {
        row.forEach((col,colI) => {
            emoji = emojis[col];
            const posX = (elementSize*(colI+1))+10;
            const posY = (elementSize*(rowI+1))-5;

            game.fillText(emoji,posX,posY);
        });
        
    });
}

y después la inserte en los movimientos

function moverArriba(){
    console.log('moverarriba');
    clearmap()
    playerPosition.y -= elementSize 
    renderMap();
    movePlayer();
}```

Tommy Toala Cox

student•

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

Victor Hugo Cruz Carballo

student•

const canvas = document.querySelector('#game__layout');
const game = canvas.getContext('2d');
const up = document.querySelector('#up');
const left = document.querySelector('#left');
const right = document.querySelector('#right');
const down = document.querySelector('#down');

//variables globales
let canvasSize;
let elemtSize;
const playerPos = {
  x: undefined,
  y: undefined,
};

//addEventListener
window.addEventListener('load', setCanvaSize);
window.addEventListener('resize', setCanvaSize);
window.addEventListener('keydown', pressArrow);

up.addEventListener('click', moveUp);
left.addEventListener('click', moveLeft);
right.addEventListener('click', moveRight);
down.addEventListener('click', moveDown);


//funcion que establece la dimension del canvas
function setCanvaSize(){
  if(window.innerWidth>window.innerHeight){
    canvasSize = window.innerHeight * 0.8;
  }else{
    canvasSize=window.innerWidth * 0.8;
  }

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

  elemtSize = canvasSize /10;
  startGame();
}

function startGame(){
  game.font = elemtSize + 'px Verdana';
  game.textAlign = 'end';

  const map = maps[0];
  const mapRow = map.trim().split('\n');
  const mapRowCol = mapRow.map(row => row.trim().split(''));

  mapRowCol.forEach((row, x)=>{
    row.forEach((column, y)=>{
      const emoji=emojis[column]
      const posX = elemtSize*(y+1)+10;
      const posY = elemtSize*(x+1)-10;
      game.fillText(emoji,posX ,posY);
      if(column=='O'){
        playerPos.x = posX;
        playerPos.y = posY;
      }
    })
  });

  movePlayer();
}

function movePlayer(){
  game.fillText(emojis['PLAYER'], playerPos.x, playerPos.y)
  console.log({playerPos})
}

//funciones para el movimiento
function moveUp(){
  console.log('arriba')
  playerPos.y -= elemtSize;
  game.fillText(emojis['PLAYER'], playerPos.x, playerPos.y)
  console.log({playerPos})
}

function moveLeft(){
  console.log('izquierda')
}

function moveRight(){
  console.log('derecha')
}

function moveDown(){
  console.log('abajo')
}

// funcion para el movimiento con las flechas

function pressArrow(event){
  switch (event.key){
    case 'ArrowUp':
      moveUp();
      break;
    case 'ArrowLeft':
      moveLeft();
      break;
    case 'ArrowRight':
      moveRight();
      break;
    case 'ArrowDown':
      moveDown();
      break;    
  }
}

Alejandro Manzo

student•

Le agregue al if la condición playerPosition.x == undefined)

function startGame() {
    game.font = elementsSize + "px verdana"
    game.textAlign = "end"

    let map = maps[0];
    let mapRows = map.trim().split("\n") 
    let mapRowCols = mapRows.map(row => row.trim().split(''));


    mapRowCols.forEach((row, rowI) => {
        row.forEach((col, colI) =>{
            let emoji = emojis[col];
            let posX = elementsSize * (colI + 1)
            let posY = elementsSize * (rowI + 1)

            if (col == "O" && playerPosition.x == undefined) {
                playerPosition.x = posX
                playerPosition.y = posY
            }
            game.fillText(emoji, posX, posY)
        }
        
        )});
        
        mostarJugador();
}
}

y además a cada función para mover al personaje le agregue un clearRect y volví a llamar la función startGame(), y funciona, quizás se pueda hacer de una mejor forma, pero funciona jajajajaja

function arriba() {
    playerPosition.y -= elementsSize;
    game.clearRect(0, 0, canvasSize, canvasSize)
    mostarJugador()
    startGame()
}```

Fabio Escobar

student•

Mi solución:

const canvas = document.querySelector("#game");
const context = canvas.getContext("2d");
const btnLeft = document.querySelector("#left");
const btnUp = document.querySelector("#up");
const btnRight = document.querySelector("#right");
const btnDown = document.querySelector("#down");

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

let canvasSize;
let elementsSize;

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

function startGame() {
	delMap();
	context.textAlign = "end";
	context.font = elementsSize + "px Verdana";

	const map = maps[0];
	const cleanMap = map.trim().split("\n");
	const matrixMap = cleanMap.map((row) => row.trim().split(""));
	matrixMap.forEach((row, rowP) => {
		row.forEach((col, colP) => {
			let posX = elementsSize * (colP + 1);
			let posY = elementsSize * (rowP + 1);

			if (
				col == "O" &&
				playerPosition.x == undefined &&
				playerPosition.y == undefined
			) {
				playerPosition.x = posX;
				playerPosition.y = posY;
			}
			context.fillText(emojis[col], posX, posY);
		});
	});
	movePlayer();
}
function movePlayer() {
	context.fillText(emojis["PLAYER"], playerPosition.x, playerPosition.y);
}
function delMap() {
	context.clearRect(0, 0, canvasSize, canvasSize);
}
// context.fillRect(100, 100, 1, 1);
// context.clearRect(50, 0, 100, 50);
// context.font = "30px Cabin";
// context.fillStyle = "green";
// context.textAlign = "center";
// context.fillText("Fabio", 100, 100);

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

	canvas.setAttribute("width", canvasSize);
	canvas.setAttribute("height", canvasSize);
	elementsSize = canvasSize * 0.1;

	startGame();
}

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

function moveByKeys(event) {
	const tecla = event.key;
	switch (tecla) {
		case "ArrowLeft":
			moveLeft();
			break;
		case "ArrowUp":
			moveUp();
			break;
		case "ArrowRight":
			moveRight();
			break;
		case "ArrowDown":
			moveDown();
			break;
		default:
			break;
	}
}

function moveLeft() {
	playerPosition.x -= elementsSize;
	startGame();
}
function moveUp() {
	playerPosition.y -= elementsSize;
	startGame();
}
function moveRight() {
	playerPosition.x += elementsSize;
	startGame();
}
function moveDown() {
	playerPosition.y += elementsSize;
	startGame();
}

Sergio Javier Lopez Olivera

student•

Por fuera de la función startGame():

let indicator = true;

Dentro de la parte del render del player en la funcion startGame():

 if (col == 'O' && indicator == true) {
                playerPos.x = posX;
                playerPos.y = posY;
                indicator = false;
                //indicator's value gets changed to make the render of the player inaccesible in the future
            }

Luego usando esta función:

function clearGame() {
    game.clearRect(0, 0, canvasSize, canvasSize); 
    //using this function to render the game each time the player moves
}

Finalmente en cada función de movimiento le agrego esta secuencia para que limpie el mapa, cambie de posición el jugador, renderice el mapa nuevamente y aparezca el jugador con la función movePlayer():

function buttonUP() {
    clearGame();
    playerPos.y -= elementSize;
    startGame();
    movePlayer();
    //at each move we clear the game, change the position of the player, render the game without the player and then make the player appear with the new position
}

marco antonio

student•

se me ha complicado un poco la verdad desconozco mucho de los métodos del canvas eso me ha limitado un poquito ya que no encuentro la forma de como limpiar la pantalla sin la necesidad de recurrir a la llamada de los eventos en fin mi problema por haber me pasado aquí sin haber aprendido js XD

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

window.addEventListener('load', redimencionar); 
window.addEventListener('resize', redimencionar);
window.addEventListener('keydown',keyMov);

const btnArriba = document.querySelector('#arriba');
const btnAbajo = document.querySelector('#abajo');
const btnDer = document.querySelector('#derecha');
const btnIzq = document.querySelector('#izquierda');
    
btnArriba.addEventListener('click', movArriba);
btnAbajo.addEventListener('click', movAbajo);
btnDer.addEventListener('click', movDer);
btnIzq.addEventListener('click', movIzq);

let posicion_calavera = undefined;
let nivel = 0;

function redimencionar(){
    const canvas_t = (window.innerWidth < window.innerHeight ? window.innerWidth : window.innerHeight) *.75 ;
    canvas.setAttribute('width', canvas_t  );
    canvas.setAttribute('height', canvas_t );
    juego.textAlign='end';
    render(canvas_t / 10);}


function render(size_t = 0){
    juego.font = size_t - size_t / 10 +'px arial';
    const arreglo = map[nivel].match(/[IOX-]/g);

    arreglo.forEach((char, idx) => {
        const y = (~~(idx/10) + 1) * size_t - size_t / 5;
        const x = (idx - (~~(idx/10) * 10) + 1) * size_t + size_t / 10;
        
        //juego.fillText(emojis[char], x, y );
        
        if(char == 'O' && posicion_calavera == undefined) posicion_calavera = idx;
        if(posicion_calavera == idx) {
            if(char == 'X') char = 'BOMB_COLLISION';
            else if(char == 'I') {
                nivel = nivel + 1 <= 2 ? ++nivel : 0;
                posicion_calavera = undefined;
                redimencionar();
                return;}
            else char = 'PLAYER';}

        juego.fillText(emojis[char], x, y );
        });}
    

function keyMov(event){
    switch(event.keyCode){
        case 37: //izquierda
            movIzq();
            break;
        case 38: //arriba
            movArriba();
            break;
        case 39: //derecha
            movDer();
            break;
        case 40: //abajo
            movAbajo();
            break;
        default: break;}}

function movArriba(){
    const temp = posicion_calavera;
    posicion_calavera -= 10;
    if(posicion_calavera < 0) posicion_calavera = temp;
    redimencionar();}

function movAbajo(){
    const temp = posicion_calavera;
    posicion_calavera += 10;
    if(posicion_calavera >= 100) posicion_calavera = temp;
    redimencionar();}

function movDer(){
    const temp = posicion_calavera;
    const pered = (~~(posicion_calavera / 10)) *10 + 10;
    ++posicion_calavera;
    if(posicion_calavera >= pered) posicion_calavera = temp;
    redimencionar();}

function movIzq(){
    const temp = posicion_calavera;
    const pered  = ~~(posicion_calavera /10) * 10; 
    --posicion_calavera;
    if(posicion_calavera < pered) posicion_calavera = temp;
    redimencionar();}

Angel David Velasco Bonifaz

student•

Lo que hice fue pasar el dibujo del mapa a una función y crear una bander, que solo la primera vez me coloque la posicion incial de la calavera.

let flag = true;
const drawMap = () => {
  mapRows.forEach((row, rowIndex) => {
 row.forEach((col, colIndex) => {
    const emoji = emojis[col];
    const posX = elementsSize * (colIndex + 1) + 5;
    const posY = elementsSize * (rowIndex + 1) - 10;
    game.fillText(emoji, posX, posY);

      if (row[col] == "O" && flag) {
        playerPosition.x = posX;
        playerPosition.y = posY;
        flag = false;
      }
    }
  });
};

Y luego dentro de la funcion movePlayer, limpio el canvas, dibujo el mapa, y por ultimo dibujo la nueva posicion del Player.

const movePlayer = () => {
  game.clearRect(0, 0, canvasSize, canvasSize);
  drawMap();
  game.fillText(emojis["PLAYER"], playerPosition.x, playerPosition.y);
};

Alejandro López Aguilar

student•

Asi voy, desde que inicie a hacer el codigo, desee tenerlo lo mas limpio posible, y no repetir muchas veces cada parte, de esta manera voy, si tienen algo que aconsejarme o algo que pueda mejorar estare muy agradecido:

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

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

const gameStart = {
  level: 0,
  render: function () {
    if (this.level >= maps.length) {
      return console.log("Ese mapa no existe")
    }
    const map = maps[this.level].match(/[IXO\-]+/g)
      .map(a => a.split(""))
    game.font = `${elementSize}px Verdana`;
    game.textAlign = 'center';
    game.textBaseline = 'middle';

    map.forEach((row, rowIndex) => {
      row.forEach((col,colIndex)=>{
        const emoji = emojis[col];
        const posX = elementSize * ((colIndex - 0.42) + 1);
        const posY = elementSize * ((rowIndex - 0.32) + 1);

        if (col == 'O') {
          playerPosition.x = posX;
          playerPosition.y = posY;
        }

        game.fillText(emoji, posX, posY);
      });
    });

  },
  movePlayer: function () {
    game.fillText(emojis['PLAYER'], playerPosition.x, playerPosition.y);
  }
}



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

function setCanvasSize() {
 canvasSize = Math.min(window.innerWidth, window.innerHeight) * 0.7;

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

  elementSize = canvasSize / 10.20;

  startGame();
}


function startGame() {
  gameStart.render()
}

// Mapeo entre teclas y direcciones
const keyToDirection = {
  ArrowUp: 'up',
  ArrowLeft: 'left',
  ArrowDown: 'down',
  ArrowRight: 'right',
  w: 'up',
  a: 'left',
  s: 'down',
  d: 'right'
};

const directionToButton = {
  up: document.querySelector('#up'),
  left: document.querySelector('#left'),
  down: document.querySelector('#down'),
  right: document.querySelector('#rigth'),
};

Object.keys(directionToButton).forEach(direction => {
  directionToButton[direction].addEventListener('click', () => {
      move(direction);
  });
});

window.addEventListener('keydown', moveByKey);

function moveByKey(event) {
  const direction = keyToDirection[event.key];
  if (direction) {
      move(direction);
  }
}

function move(direction) {
  console.log(`Me muevo hacia ${direction}`);
  if (direction == 'up')playerPosition.y -= elementSize, gameStart.movePlayer();
  else if(direction == 'left')playerPosition.x -= elementSize, gameStart.movePlayer(); 
  else if(direction == 'right')playerPosition.x += elementSize, gameStart.movePlayer();
  else if(direction == 'down')playerPosition.y += elementSize, gameStart.movePlayer();
}

Oscar Gutiérrez

student•

Aquí pasa algo interesante que no si notaste. Pero te hago la siguiente pregunta: ¿Por qué puede modificar las propiedades del objeto si fue declarado con la palabra reservada const?

La respuesta esta en la misma pregunta ya que no estas modificando la variable o constante como tal, sino solo sus propiedades.

Quizás ya sabias la respuesta pero es algo curioso que tal vez te pueda confundir

Andre Huaman Yovera

student•

game.js

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

window.addEventListener("DOMContentLoaded", startGame);
window.addEventListener("resize", setCanvasSize);

// Obtener referencias a los botones
const upButton = document.getElementById("up");
const leftButton = document.getElementById("left");
const rightButton = document.getElementById("right");
const downButton = document.getElementById("down");

// Agregar manejadores de eventos a los botones
upButton.addEventListener("click", () => movePlayer("up"));
leftButton.addEventListener("click", () => movePlayer("left"));
rightButton.addEventListener("click", () => movePlayer("right"));
downButton.addEventListener("click", () => movePlayer("down"));

document.addEventListener("keydown", handleKeyDown);

let playerPosition = {
  x: undefined,
  y: undefined,
};

function handleKeyDown(event) {
  const key = event.key.toLowerCase();
  let direction;

  switch (key) {
    case "arrowup":
    case "w":
      direction = "up";
      break;
    case "arrowleft":
    case "a":
      direction = "left";
      break;
    case "arrowright":
    case "d":
      direction = "right";
      break;
    case "arrowdown":
    case "s":
      direction = "down";
      break;
    default:
      return;
  }

  // Realizar alguna acción basada en la dirección detectada
  // Por ejemplo, llamar a una función para mover al jugador en esa dirección
  movePlayer(direction);
}

let elementsSize;
let map;

function startGame() {
  parseMap();
  setCanvasSize();
}

function movePlayer(direction) {
  // Realizar acciones según la dirección recibida
  switch (direction) {
    case "up":
      playerPosition.y -= 1;
      // Lógica para mover al jugador hacia arriba
      break;
    case "left":
      // Lógica para mover al jugador hacia la izquierda
      playerPosition.x -= 1;
      break;
    case "right":
      // Lógica para mover al jugador hacia la derecha
      playerPosition.x += 1;
      break;
    case "down":
      // Lógica para mover al jugador hacia abajo
      playerPosition.y += 1;
      break;
    default:
      return;
  }

  // Actualizar el juego, dibujar el mapa actualizado, etc.
  // ...
  drawMap();
}

function setCanvasSize() {
  const canvasSize = Math.min(window.innerHeight, window.innerWidth) * 0.75;

  canvas.width = canvasSize;
  canvas.height = canvasSize;

  elementsSize = Math.floor(canvasSize / 10 - 1);

  game.font = `${elementsSize}px Verdana`;

  drawMap();
}

function drawMap() {
  game.clearRect(0, 0, canvas.width, canvas.height);

  map.forEach((row, y) => {
    row.forEach((emoji, x) => {
      game.fillText(emoji, x * elementsSize, (y + 1) * elementsSize);

      if (emoji === "🚪") {
        if (playerPosition.x === undefined && playerPosition.y === undefined) {
          playerPosition = { x, y };
        } // Utiliza object destructuring para simplificar la asignación de coordenadas

        game.fillText(
          emojis.PLAYER,
          playerPosition.x * elementsSize,
          (playerPosition.y + 1) * elementsSize
        ); // Utiliza la notación de puntos para acceder a las propiedades del objeto emojis
      }
    });
  });
}

function parseMap() {
  const mapString = maps[0].trim();
  const lines = mapString.split("\n").map((line) => line.trim());

  map = lines.map((line) => line.split("").map((symbol) => emojis[symbol]));
}

Luis Rodríguez

student•

yo puse que se re-imprimiera el mapa cada vez que cambiamos la posición del jugador, y en la misma función que renderiza el mapa puse una condicional en que la posición del jugador tiene que ser undefined para que se imprima dentro de dicha función

function moveRight(){
    console.log('muevete hacia la derecha');
    playerPosition.plx+=elementSize
    reprintThePlayer()
    startDrawing()
}

function reprintThePlayer(){    game.fillText(emojis['PLAYER'],playerPosition.plx,playerPosition.ply)
}

Alejandro Ramos

student•

Yo renderizaría de nuevo el mapa, pero no lo veo eficiente xd

Ricardo Alfonso Chavez Vilcapoma

student•

Mi solución fue renderizar por cada movimiento el mapa en el canvas.

function movePlayer(){
    //Eliminar posición anterior jugador por cada movimiento.
    game.clearRect(0,0,canvasSize,canvasSize);//borrar todo el contenido del canvas
    for (let i = 1; i <= 10; i++) { //volver a renderizar el mapa con la nueva posición del jugador
        for (let j = 1; j <= 10; j++) {
            game.fillText(emojis[mapRowCols[j-1][i-1]],elementsSize*i+5,elementsSize*j-15);
        }
    }
    game.fillText(emojis["PLAYER"],positionJugador.x+5,positionJugador.y-15);//imprimir al jugador
}

David Alvarez

student•

Al inicio en la: function startGame() borre todo el canvas para ser renderizado con la nueva posicion de la calabera: playerPosition.x, playerPosition.y

  game.clearRect(0, 0, canvas.width, canvas.height);

Objeto playerPosition

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?