Victoria: subiendo de nivel

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

Orlando Rodriguez

student•

Lo he logrado, pero mi codigo es una verdadera ensalada, tengo que mejorar eso, voy a tratar de explicarlo. Lo que se me ocurrió es crear un array bidimensional donde almacena las pocisiones de las bombas, pero de cada level, de esta forma, segun el level que estamos y con la misma logica detectamos las colisiones.

En este pedazo de codigo necesito sus consejos, como podria haber hecho esto mejor:

const bombsPosition =[];

let cantidadLevels = mapRowsCols.map(element => bombsPosition.push([]));
// de esta forma a bombsPosition le agrego los arrays internos y vacios segun cuantos niveles tengamos. Como harían esto de una mejor forma?

Ya teniendo mi array con arrays internos vacios, seguimos con la misma logica con el metodo push segun el map y level los agregamos(las posiciones)

// esto esta dentro de la funcion starGame() dentro del ciclo for
if(mapRowsCols[level][i][z-1] == 'X' && flag ){
                bombsPosition[level].push({x: elementSize*i, y: elementSize*z})
            }

Abigail Nahomi Chávez Lozano

student•

Tenia el problema de que una vez mi jugador salía de la primera fila, ya no podia volver a subir.

El condicional 'if' de la funcion moveUp(), tenia ese cambio por decimales de diferencia entre (playerPositions.y - elementsSize) y el msmo elemensSize:

Lo solucioné redondeando hacia arriba los decimales de la resta para igualar al de elementsSize y poder moverme hasta la primera fila:

Tommy Toala Cox

student•

Mi solución: Como desde el comienzo estaba creando un objeto de mi mapa. ++Para pasar de nivel++ Cree una funcion lvlUp(), la cual solo cambia la propiedad de mi objeto base, luego renderiza el siguiente lvl, llamando a la funcion startGame()

function lvlUp() {
    if (map.lvl < maps.length - 1) {
        map.lvl += 1;
        startGame()
    }

}

++Para resetear todo++ uso do funciones, una que detecta la colision, y la otra que le da los nuevos valores de posicion al player

}
function colision() {
    const enemyColition =map.bombPosition.find(a=>
        {
            const coincideX = map.playerPosition.x.toFixed(3) === a.x.toFixed(3);
            const coincideY = map.playerPosition.y.toFixed(3) === a.y.toFixed(3);
            return coincideY && coincideX
        })


        if (enemyColition) {
            console.log("perdiste")
        }
        return enemyColition
    
}
function resetGame(){
if (colision()){
    map.playerPosition.x=map.doorPosition.x
    map.playerPosition.y=map.doorPosition.y
    startGame()
}

Luego corro esa función cuando se mueve el jugador

 playerPosition: {
        x: undefined,
        y: undefined,
        render: function () {
            game.fillText(emojis["PLAYER"], this.y, this.x);
            const coincideX = Math.floor(this.x) === Math.floor(map.giftPosition.x);
            const coincideY = Math.floor(this.y) === Math.floor(map.giftPosition.y);

            if (coincideY && coincideX) {
                console.log("Subiste de nivel")
                lvlUp()
            }
            resetGame()
        }

    }

toooodo mi codigo

const canvas = document.getElementById('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 canvasElement;
const map = {
    lvl: 0,

    playerPosition: {
        x: undefined,
        y: undefined,
        render: function () {
            game.fillText(emojis["PLAYER"], this.y, this.x);
            const coincideX = Math.floor(this.x) === Math.floor(map.giftPosition.x);
            const coincideY = Math.floor(this.y) === Math.floor(map.giftPosition.y);

            if (coincideY && coincideX) {
                console.log("Subiste de nivel")
                lvlUp()
            }
            resetGame()
        }

    },
    giftPosition: {
        x: undefined,
        y: undefined,
    },
    doorPosition: {
        x: undefined,
        y: undefined,
    },
    bombPosition: [],
    render: function () {
        const Map = maps[this.lvl].match(/[IXO\-]+/g)
            .map(a => a.split("")) || console.log("No more maps")

        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 (y === "O") {
                        this.doorPosition.x = posX
                        this.doorPosition.y = posY
                        if (this.playerPosition.x === undefined && this.playerPosition.y === undefined) {
                        this.playerPosition.x = posX
                        this.playerPosition.y = posY
                        
                    }
                }
                if (y === "I") {
                    this.giftPosition.x = posX
                    this.giftPosition.y = posY
                }
                if (y === "X") {
                    this.bombPosition.push({ x: posX, y: posY })
                }
                

            })
        })
    }
}
// const playerPosition={

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


function setCanvasSize() {
    window.innerHeight > window.innerWidth
        ? canvasSize = window.innerWidth * 0.9
        : canvasSize = window.innerHeight * 0.7;


    canvas.setAttribute("height", canvasSize)
    canvas.setAttribute("width", canvasSize)
    canvasElement = canvasSize / 10;
    startGame()
}


function startGame() {
    map.bombPosition = []
    map.render()
    map.playerPosition.render()
}
function lvlUp() {
    if (map.lvl < maps.length - 1) {
        map.lvl += 1;
        startGame()
    }

}
function colision() {
    const enemyColition =map.bombPosition.find(a=>
        {
            const coincideX = map.playerPosition.x.toFixed(3) === a.x.toFixed(3);
            const coincideY = map.playerPosition.y.toFixed(3) === a.y.toFixed(3);
            return coincideY && coincideX
        })


        if (enemyColition) {
            console.log("perdiste")
        }
        return enemyColition
    
}
function resetGame(){
if (colision()){
    map.playerPosition.x=map.doorPosition.x
    map.playerPosition.y=map.doorPosition.y
    startGame()
}

}
//moviemientos
window.addEventListener("keyup", moveByKey)
btnUp.addEventListener("click", moveUp)
btnLeft.addEventListener("click", moveLeft)
btnRight.addEventListener("click", moveRight)
btnDown.addEventListener("click", moveDown)

function moveUp() {
    map.playerPosition.x - canvasElement < canvasElement
        ? map.playerPosition.x = canvasElement
        : map.playerPosition.x -= canvasElement

    startGame()
}
function moveLeft() {
    map.playerPosition.y - canvasElement < canvasElement
        ? map.playerPosition.y = canvasElement
        : map.playerPosition.y -= canvasElement
    startGame()
}
function moveRight() {
    map.playerPosition.y + canvasElement > canvasSize
        ? map.playerPosition.y = canvasSize
        : map.playerPosition.y += canvasElement
    startGame()
}
function moveDown() {
    map.playerPosition.x + canvasElement > canvasSize
        ? map.playerPosition.x = canvasSize
        : map.playerPosition.x += canvasElement
    startGame()
}
function moveByKey(event) {

    if (event.key === "ArrowUp") moveUp();
    if (event.key === "ArrowLeft") moveLeft();
    if (event.key === "ArrowRight") moveRight();
    if (event.key === "ArrowDown") moveDown();

}

Nestor Rios Garcia

student•

Lo logramos

Asi vamos

Commit de la clase

¿Quieres jugar?

Stivenson David Mejia Palacios

student•

Creo que acabo de hacer algo muy chambón jajaja.

En el IF de movePlayer que sirve para detectar la colisión con las bombas ejecute una funcion llamada gameLose la cual consiste en recargar la pagina y asi reiniciar todos los niveles.

Funciona, pero… a qué costo.

Lorenzo Peñalver

student•

Me parece una muy buena idea, el problema viene con las vidas, pero como solución es perfecta para mi!

Santiago Velásquez Serna

student•

Creo dos variables(initX, initY) que guarden la ubicación de la puerta cada renderizada en el mapa, no importa que nivel sea, y esa ubicación es la que se le dará a la calavera si choca con algun elemento. .....

if(col=='O'){
                initX=positionX;
                initY=positionY
                if(!playerPosition.x && !playerPosition.y){
                    playerPosition.x=positionX;
                    playerPosition.y=positionY;
                   
                }

........

if (estallido){
            game.fillText(emojis['BOMB_COLLISION'],playerPosition.x,playerPosition.y)
            
            console.log(emojis['BOMB_COLLISION']);
            playerPosition.x=initX
            playerPosition.y=initY
           
        }
    });

Natalia Gomez Perez

student•

No puedo subir de nivel. Sigo paso a paso los vídeos, he mirado los aportes y no entiendo por qué no sube de nivel. Alguien puede ayudar? Muchísimas gracias.

Aquí el código:

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

//VARIABLES
let canvasSize;
let elementsSize;
let level = 0;

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

const brainPosition = {
  x: undefined,
  y: undefined,
};
let wallPositions = [];

//EVENTS
//set size of canvas
window.addEventListener('load', setCanvasSize);
window.addEventListener('resize', setCanvasSize);

//FUNCTIONS


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

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

  elementsSize = canvasSize / 10 - 1;
  startGame();
}

function startGame() {
  console.log({ canvasSize, elementsSize });

  game.font = elementsSize - 7 + 'px Verdana';
  game.textAlign = 'end';

  const map = maps[level];

  if (!map) {
    gameWin();
    return;
  }
  const mapRows = map.trim().split('\n');
  const mapRowCols = mapRows.map((row) => row.trim().split('')); 
  console.log(map, mapRows, mapRowCols);

  wallPositions = [];
  game.clearRect(0, 0, canvasSize, canvasSize); 

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

      if (col == 'O' && !playerPosition.x && !playerPosition.y) {
        //player position
        playerPosition.x = posX / elementsSize;
        playerPosition.y = posY / elementsSize;
        console.log({ playerPosition });
      } else if (col == 'I') {
        //brain position
        brainPosition.x = posX;
        brainPosition.y = posY;
      } else if (col == 'X') {
        wallPositions.push({
          x: posX,
          y: posY,
        });
      }
      game.fillText(emoji, posX, posY);
    });
  });
  movePlayer();
}

function movePlayer() {
  const brainCollisionX =
    playerPosition.x.toFixed(3) == brainPosition.x.toFixed(3);
  const brainCollisionY =
    playerPosition.y.toFixed(3) == brainPosition.y.toFixed(3);
  const brainCollision = brainCollisionX && brainCollisionY;

  if (brainCollision) {
    levelWin();
  }

  const wallCollision = wallPositions.find((wall) => {
    const wallCollisionX = wall.x.toFixed(3) == playerPosition.x.toFixed(3);
    const wallCollisionY = wall.y.toFixed(3) == playerPosition.y.toFixed(3);
    return wallCollisionX && wallCollisionY;
  });

  if (wallCollision) {
    console.log('Chocaste :(');
  }

  game.fillText(
    emojis['PLAYER'],
    playerPosition.x * elementsSize,
    playerPosition.y * elementsSize
  );
}

function levelWin() {
  console.log('Subiste de nivel');
  level++;
  startGame();
}

function gameWin() {
  console.log('Terminaste');
}
window.addEventListener('keydown', moveByKeys);
btnUp.addEventListener('click', moveUp);
btnDown.addEventListener('click', moveDown);
btnRight.addEventListener('click', moveRight);
btnLeft.addEventListener('click', moveLeft);

//MOVE PLAYER

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('Arriba');
  if (playerPosition.y > 1) {
    playerPosition.y -= 1;
  }
  startGame();
}
function moveLeft() {
  console.log('Izquierda');
  if (playerPosition.x > 1) {
    playerPosition.x -= 1;
  }
  startGame();
}
function moveRight() {
  console.log('Derecha');
  if (playerPosition.x < 10) {
    playerPosition.x += 1;
  }
  startGame();
}
function moveDown() {
  console.log('Abajo');
  if (playerPosition.y < 10) {
    playerPosition.y += 1;
  }
  startGame();
}

Oscar Gutiérrez

student•

Analizando tu código me di cuenta que es porque no estas detectando las colisiones; ni con el regalo, ni con las bombas (o los emojis que tu hayas elegido).

¿Por qué ocurre esto?

Esto se debe a que la posición del jugador (playerPosition) la estas dividendo entre el elementsSize; al hacer esto estas modificando su valor numérico para que solo te de valores entre 0 y 10, por lo que al realizar las validaciones de si la posición del jugador coincide con la del regalo o algún enemigo retornara siempre false. Por eso la función levelWin() nunca se ejecuta y por ende nunca se modifica la variable level.

Solución

Aquí veo dos posibles soluciones:

Eliminar esa división que haces al momento de agregarle la posición al jugador (pero no se si eso afecte la lógica que utilizaste para no salirte de los bordes).
Agregar esa misma división a todas las demás posiciones.

Gianluca Enzo Procopio

student•

![](

Me pasa esto!!! alguien sabe como puedo solucionarlo?

Juan Castro

teacher•

Gian, veo que hace poco completaste el curso, ¿lograste solucionar este error?

Gianluca Enzo Procopio

student•

Hola Juan, perdón por responderte tarde (no ví tu respuesta). El error ya lo solucioné y el juego me quedó increible. Actualmente estoy aprendiendo React, eres mi profe fav!!!

Mauricio Combariza

student•

Este es mi código, al principio me creaba un bucle pero chat GPT me ayudo a solucionarlo, esta en Typescript

import './style.css'
import { maps, emojis } from './maps';

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

window.addEventListener('load', setCanvasSize);
window.addEventListener('resize', setCanvasSize)
let canvasSize: string;
let elementSize: number;
let level = 0 as number
let winPosition = {
  x:0 as number,
  y:0 as number
}
let player = emojis['PLAYER']
let playerPosition = {
  x:0 as number,
  y:0 as number
}
let mapaActual: { elem: string; x: number; y: number }[] = [];
let element: { elem: string; x: number; y: number } = {
  elem: '-',
  x: 0,
  y: 0,
};
const btnUp = document.querySelector('#up') as HTMLElement
const btnLeft = document.querySelector('#left') as HTMLElement
const btnRight = document.querySelector('#right') as HTMLElement
const btnDown = document.querySelector('#down') as HTMLElement

function setCanvasSize() {
  let height = window.innerHeight;
  let width = window.innerWidth;

  if (height > width) {
    canvasSize = `${width * 0.8}`;
  } else {
    canvasSize = `${height * 0.8}`;
  }

  elementSize = (parseFloat(canvasSize) / 10.5);

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

let mapa = maps[level]
  // El método trim elimina los espacios en blanco
let mapRows = mapa.trim().split('\n');
let mapRowCols = mapRows.map(row => row.trim().split(''))


function startGame() {
    console.log('Mapas:', mapa, mapRows, mapRowCols)
    mapa = maps[level]
    mapRows = mapa.trim().split('\n')
    mapRowCols = mapRows.map(row => row.trim().split(''))

  if (!game) {
    console.error('El contexto del lienzo no está disponible');
    return;
  }
  game.font= elementSize + 'px Verdana'
    mapRowCols.forEach((row, i) => {
    row.forEach((col, j) => {
      const emoji = emojis[col]
      let posX =  j * elementSize
      let posY = (i+1) * elementSize
      element = {
        elem: col,
        x: posX,
        y: posY
      }
      mapaActual.push(element)
      if (col == 'O'){
        playerPosition = {
          x: posX,
          y: posY
        }
      // Se crea un array con el valor y las coordenadas  
      }
        game.fillText(emoji, posX, posY)
    })
  })
  movePlayer()
}
function renderGame() {
  if (!game) return;
  game.clearRect(0, 0, canvas.width, canvas.height);
  mapRowCols.forEach((row, i) => {
    row.forEach((col, j) => {
      const emoji = emojis[col];
      let posX = j * elementSize;
      let posY = (i + 1) * elementSize;
      if (col === 'I'){
        winPosition = {
          x: posX,
          y: posY
        }
      }
      game.fillText(emoji, posX, posY);
      
    });
  });
}

function movePlayer() {
  if (!game) return
  renderGame()
  game.fillText(player, playerPosition.x, playerPosition.y);

  mapaActual.map(item => {
    let actualPositionX = Math.floor(playerPosition.x) === Math.floor(item.x)
    let actualPositionY = Math.floor(playerPosition.y) === Math.floor(item.y)
    let actualPosition = actualPositionX && actualPositionY
    if (actualPosition){
      console.log(item.elem)
      if(item.elem === 'X') {
        console.log('Perdiste')
        startGame()
      } 
      if(item.elem === 'I') {
        console.log('Ganaste eeee')
        if(level > maps.length - 1){
          console.log('Fin del juego Ganaste!!')
        }
        else {
          level += 1
          mapaActual = []
          startGame()
        }
      
      }
    }
      
  })
 
  
}
  


function moveUp(){
  playerPosition.y -= elementSize
  if (playerPosition.y > (elementSize * 10)) {
    playerPosition.y = 10 * elementSize
  }
  movePlayer()
}
function moveLeft(){
  playerPosition.x -= elementSize
  if (playerPosition.x < 0) {
    playerPosition.x = 0
  }
  movePlayer()
}
function moveRight(){
  playerPosition.x += elementSize
  if (playerPosition.x > (elementSize * 9)) {
    playerPosition.x = 9 * elementSize
  }
  movePlayer()
}
function moveDown(){
  playerPosition.y += elementSize
  if (playerPosition.y < elementSize) {
    playerPosition.y = elementSize
  }
  movePlayer()
}

function moveByKeys(event: KeyboardEvent) {
  if(event.key == 'ArrowUp') moveUp()
  if(event.key == 'ArrowLeft') moveLeft()
  if(event.key == 'ArrowRight') moveRight()
  if(event.key == 'ArrowDown') moveDown()
}

window.addEventListener('keyup', moveByKeys)

btnUp?.addEventListener('click', moveUp)
btnLeft?.addEventListener('click', moveLeft)
btnRight?.addEventListener('click', moveRight)
btnDown?.addEventListener('click', moveDown)

Edgardo Luis Jimenez Nuñez

student•

Mi Solucion

En realidad he visto que la mayoria de compañeros lo han realizado casi parecido, esta fue como lo realice yo.

// Declare un objeto con valores de x y y, despues la inicialice con la posicion en el momento que se renderiza la puerta
const doorPosition = {
  x: undefined,
  y: undefined,
}

...

if (!playerPosition.x && !playerPosition.y && col == "O") {
    playerPosition.x = positionX;
    playerPosition.y = positionY;
        
    doorPosition.x = positionX;
    doorPosition.y = positionY;
}

...
// Y con una funcion que se llama cuando el jugador choca con las bombas
function gameOver() {
  console.log("Chocaste contra un enemigo!!");
  playerPosition.x = doorPosition.x;
  playerPosition.y = doorPosition.y;
  level = 0;
  startGame();
}

Manuel Andres García Vera

student•

++mi solución ++

en la funcion movePlayer() remplace el mensaje del condicional que compara cuando hay una colisión con las bombas, en dicho condicional introduje una nueva función

if (bombasCollision){
        repeatLevel()
    }

en la función repatLevel introduje el mensaje que había antes en el condicional, además, asigne las coordenadas de la puerta o el punto de inicio

function repeatLevel(){
    console.log('chocaste con una bomba');
    playerPosition.x = door.x ;
    playerPosition.y = door.y ;
}

¿ como extraje las coordenadas del punto inicial o la puerta? cree un un nuevo objeto que contenga las coordenadas de la puerta, las coordenadas se insertan cuando se renderiza el mapa

const door = {
    x : undefined,
    y : undefined,
}

if (col =='O'){
                door.x = posX;
                door.y = posY;
               
                if(!playerPosition.x && !playerPosition.y){
                    playerPosition.x = posX;
                    playerPosition.y = posY;
                    console.log({playerPosition});
                }

Frandel Corporan Rodríguez

student•

La solucion para resetear la posicion del jugador hacia la puerta cada vez que colisione es simplemente crear una variable/contanre que haga una copia del objeto playerPosition con Object.create(playerposition) este copiara la estructura y valores mas no la referecia. Luego de esto en startGame cuando le pasamos la primera posicion a la calabera al principio del nivel pues tambien se la pasaremos a nuestro objeto de la puerta y en cada levelUp le actualizaremos las coordenadas tomando como referencia la posicion del jugador al principio del nivel de esta manera:

function levelUp(){
  level++
  startGame()
  door.x = playerPosition.x
  door.y = playerPosition.y
 }

Fabio Escobar

student•

asi lo haria yo:

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;
let level = -1;

const playerPosition = {
	x: undefined,
	y: undefined,
};
const pricePosition = {
	x: undefined,
	y: undefined,
};
const bombPosition = {
	x: 0,
	y: 0,
};
const initialPosition = {
	x: 0,
	y: 0,
};

function startGame() {
	isPricePosition();
	delMap();

	context.textAlign = "end";
	context.font = elementsSize + "px Verdana";

	let map = maps[level];

	if (!map) {
		gameWin();
		return;
	}

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

			if (
				col == "O" &&
				playerPosition.x == undefined &&
				playerPosition.y == undefined
			) {
				playerPosition.x = posX;
				playerPosition.y = posY;
				initialPosition.x = posX;
				initialPosition.y = posY;
			}
			if (col == "I") {
				pricePosition.x = posX;
				pricePosition.y = posY;
			}
			if (col == "X") {
				bombPosition.x = posX;
				bombPosition.y = posY;
			}
			if (
				playerPosition.x == bombPosition.x &&
				playerPosition.y == bombPosition.y
			) {
				playerPosition.x = initialPosition.x;
				playerPosition.y = initialPosition.y;
			}
			context.fillText(emojis[col], posX, posY);
		});
	});
	console.log(
		playerPosition.x,
		playerPosition.y,
		pricePosition.x,
		pricePosition.y,
		initialPosition.x,
		initialPosition.y,
		level
	);
	movePlayer();
}

function movePlayer() {
	context.fillText(emojis["PLAYER"], playerPosition.x, playerPosition.y);
}
function delMap() {
	context.clearRect(0, 0, canvasSize, canvasSize);
}

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

	canvas.setAttribute("width", canvasSize);
	canvas.setAttribute("height", canvasSize);
	elementsSize = Math.round(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() {
	if (playerPosition.x > elementsSize) {
		playerPosition.x -= elementsSize;
	}
	startGame();
}
function moveUp() {
	if (playerPosition.y > elementsSize) {
		playerPosition.y -= elementsSize;
	}
	startGame();
}
function moveRight() {
	if (playerPosition.x < canvasSize) {
		playerPosition.x += elementsSize;
	}
	startGame();
}
function moveDown() {
	if (playerPosition.y < canvasSize) {
		playerPosition.y += elementsSize;
	}
	startGame();
}

function isPricePosition() {
	if (
		pricePosition.x == playerPosition.x &&
		pricePosition.y == playerPosition.y
	) {
		level++;
		playerPosition.x = undefined;
		playerPosition.y = undefined;
	}
}

function gameWin() {
	console.log("TERMINASTE EL JUEGO!");
}
// context.clearRect(50, 0, 100, 50);
// context.font = "30px Cabin";
// context.fillStyle = "green";
// context.textAlign = "center";
// context.fillText("Fabio", 100, 100);
// context.fillRect(100, 100, 1, 1);

Manuel Araujo

student•

Dentro de la función movePlayer(), en el condicional donde revisamos si enemyCollision es true, agregamos una función por ejemplo levelLost()

      if (enemyCollision) {
        console.log('Chocaste contra un enemigo :(');
        levelLost();
      }

Luego creamos dicha función levelLost() que primero le vuelve a dar los valores de undefined a las propiedades de playerPosition (si no se hace esto habrá un bucle infinito) y luego llamará a la función startGame:

function levelLost() {
    playerPosition.x = undefined;
    playerPosition.y = undefined;
    startGame();
}

Enrique Aguilera

student•

Me ha pasado el error de los decimales, en el ultimo decimal habia una variacion y eso hacia que mi calaverita al llegar al tercer nivel se pueda salir del mapa por la parte de arriba

Este es el codigo que causaba ese error:

if(key === "up" && (playerPosition.y > elementsSize)) {
                playerPosition.y -= elementsSize
}

y lo arregle asi:

if(key === "up" && (parseInt(playerPosition.y.toFixed(3)) > parseInt(elementsSize.toFixed(3)))) {
                playerPosition.y -= elementsSize

            }

César Augusto Cortés Labrada

student•

Quería aportar algo, aunque espero me confirmen si es acertado o no. Pienso que al final de la función movePlayer() debería haber un return;

Ejemplo: movePlayer(){ . . . return; } De esta manera siempre que un movimiento sea exitoso, osea sin colisiones, todas las ejecuciones y llamados de funciones terminen y sean sacadas de la pila de ejecuciones; de esta manera no habría que esperar a que terminará el juego para por fin obtener un return y finalizar todas ejecución en la pila.

marco antonio

student•

Creo que te estas confundiendo por defecto todas las funciones de cualquier lenguaje retornan por defecto void*(0) o void(0x0) dependiendo del lenguaje que puede definirse como undefined null y asi.
Por lo que no es necesario hacer return; salvo que quieras ejecutar una condición que fuerce la salida y evitar la ejecución del código restante.
En cuanto a la pila en palabras simples: una vez carga el programa el sistema se encarga de asignarle un espacio de memoria de 1x ya sea que lo ocupes o no pero este se duplica con cada nueva petición que exceda el espacio de memoria anterior el problema se encuentra en que si no se libera la memoria usada llegara al punto en donde no exista mas memoria y comience el desbordamiento.
por ejemplo las variables globales son un ejemplo de memoria que nunca se libera asta terminar el programa o amenos que lo liberes de manera manual el punto es que no es automático.

Si a alguien le interesa estos temas y "no le teme al progreso" XD quiero decir que no le teme a meterse a las tripas de la maquina les recomiendo que le den un vistazo al canal de Profesor Retroman si bien enseña C y ensamblador esto te abre la mente y te hace entender cualquier lenguaje sin problemas.

Sin mentirles esta es la primera vez que yo uso javaScript no he hecho ningún curso ni nada y se me hace super fácil de entender tiene sus peculiaridades pero puedo usarlo sin saber de el.
En fin Profesor Retroman tiene tiene una nueva serie que se llama C y Ensamblador, ¡desde 0! donde muestra como construir un videojuego y sus clases son en vivo, realmente aprendes un montón por si a alguien le interesa

Josue Cerron Tuesta

student•

Aquí mi solución:

Lo que hice primero fue crear un objeto para obtener las posiciones de la puerta:

const doorPosition = new Map();
doorPosition.set('x', undefined);
doorPosition.set('y', undefined);

Luego asignar los valores correspondientes de 'x' e 'y' en el condicional que ya teníamos:

if (col === 'O') {
    if (!playerPosition.get('x') && !playerPosition.get('y')) {
        playerPosition.set('x', posx);
        playerPosition.set('y', posy);
    }
    doorPosition.set('x', posx);
    doorPosition.set('y', posy);
}

Por último construí la función restartGame():

function restartGame() {
    log('Perdiste!');
    playerPosition.set('x', doorPosition.get('x'));
    playerPosition.set('y', doorPosition.get('y'));

}

Cecilia Mansilla

student•

Porque cuando pongo level en el maps se me borra todo. Pero si pongo 1 o 0 vuelve nuevamente

ayudaaaaaa!!! Ya tengo la cabeza re quemada de tanto intentar :(

Ricardo Collado

student•

Creo que fue sencillo... el reto. Aunque talvez use una forma muy alcaica o robusta para una solucion muy simple. Lo primero que hago es cuando se esta recorriendo el array del mapa, pues confirmo si estamos en la posicion de apertura del nivel, que seria la puerta, y alli, habiendo creado un objeto al que he llamado "levelStartPoint" pues le asigno las coordenadas donde esta la puerta del nivel actual. Y luego, cada vez que habia una colision, ejecuto un metodo que se encarga de cambiar las coordenadas del jugador, por las coordenadas de la puerta:


//otra parte del codigo aqui

  if(col=='O'){       &#x20;
  levelStartPoint.x = posX;     &#x20;
    levelStartPoint.y = posY;     
&#x20;  }

El metodo que he usado:

function playerLoseLevel(){  playerPosition.x = levelStartPoint.x;  playerPosition.y = levelStartPoint.y;  }

Y cuando detectamos una colision pues:

if(enemyCollision){      console.log('Chocaste contra un enemigo :(');      const playerOver = emojis\['GAME\_OVER'];                game.fillText(playerOver,playerPosition.x,playerPosition.y);      playerLoseLevel();

Cambio el icono del jugador cuando colisiona.. pero obviamente no hay tiempo de verlo, quisiera detener el proceso por unos segundos y luego retornar y reiniciar, para que se vea una caravela.

Ivo Zayas

student•

a alguien más le pasó que cuando pasa de nivel el nivel siguiente se imprime pero el anterior no se borra hasta que te moves? no entiendo por que pasa, no tiene sentido que se superpongan creo

Juan camilo piedrahita londoño

student•

A mi me paso. Pero lo solucione colocando toFixed(3).