Cursos Empresas Blog Live Conf Eventos Precios

0:009:53

Limpieza de movimientos

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

Clase 10 de 24

Clase 10 / 24

Andre Huaman Yovera

Hace 3 años

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":
      if (playerPosition.y > 0) {
        playerPosition.y -= 1;
        // Lógica para mover al jugador hacia arriba
      }
      break;
    case "left":
      if (playerPosition.x > 0) {
        playerPosition.x -= 1;
        // Lógica para mover al jugador hacia la izquierda
      }
      break;
    case "right":
      if (playerPosition.x < 9) {
        playerPosition.x += 1;
        // Lógica para mover al jugador hacia la derecha
      }
      break;
    case "down":
      if (playerPosition.y < 9) {
        playerPosition.y += 1;
        // Lógica para mover al jugador hacia abajo
      }
      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]));
}

Comentarios (52)52 comentarios

Rubén Ernesto Aragón Gil

Hace 4 años

Y yo como loco haciendo querer funcionar el Clearect jaja

Reymundo Fernando Figueroa Romo

Hace 2 años

Cierto me paso que borraba los elementos, pero solo un cuadro que no abarcaba toda la calavera y además borraba parte de las bombas colindantes pff vaya quebradero de cabeza

Josue Cerron Tuesta

Aquí mi solución para que la calaverita no se salga del canvas:

psdt: Lo del playerPosition.get() es por que lo hice con el objeto Map ;).

function moveUp() {
    let move = playerPosition.get('y') - elementSize;
    (move < 20)
        ? playerPosition.set('y', playerPosition.get('y'))
        : playerPosition.set('y', move);
    startGame();
    log({ playerPosition });
}

function moveDown() {
    let move = playerPosition.get('y') + elementSize;
    (move > canvasSize)
        ? playerPosition.set('y', playerPosition.get('y'))
        : playerPosition.set('y', move);
    startGame();
    log({ playerPosition });
    // log('Me quiero mover hacia abajo');
}

function moveLeft() {
    let move = playerPosition.get('x') - elementSize;
    (move < 20)
        ? playerPosition.set('x', playerPosition.get('x'))
        : playerPosition.set('x', move);
    startGame();
    log({ playerPosition });
    // log('Me quiero mover hacia la izquierda');
}

function moveRight() {
    let move = playerPosition.get('x') + elementSize;
    (move > canvasSize)
        ? playerPosition.set('x', playerPosition.get('x'))
        : playerPosition.set('x', move);
    startGame();
    log({ playerPosition });
    // log('Me quiero mover hacia la derecha');
}

Sergio Javier Lopez Olivera

Diego Toro Cárdenas

A la orden! y recuerda... "Stand in the shoulders of giants" (pensando en chatGPT). La IA es como nuestra nueva "computación"

David Emmanuel Ozuna Navarro

Angel David Velasco Bonifaz

Lo solucione de esta forma. Ya que no podemos garantizar las medidas del canvas y no siempre dará 0 exacto. O llegar al borde exacto.

funcion ARRIBA
if(playerPosition.y>elementsSize)playerPosition.y -= elementsSize;

funcion IZQUIERDA
if(playerPosition.x>2*elementsSize)playerPosition.x -= elementsSize;

funcion DERECHA
if(playerPosition.x<canvasSize)playerPosition.x += elementsSize;

funcion ABAJO
if(playerPosition.y<canvasSize-elementsSize)playerPosition.y += elementsSize;

y con eso no se sale de los bordes

Y B

Guadalupe MoralesCarmona

Esta es mi solución para que el player no se salga del canvas, pero deseando ver la solución del profe y del resto de compañeros:

Creo una función que compruebe si el playerPosition está dentro del canvas:

function withinTheMargin() {
  if (
    playerPosition.x >= elementSize &&
    playerPosition.x <= canvasSize &&
    playerPosition.y >= elementSize &&
    playerPosition.y <= canvasSize
  ) {
    return true;
  }
}

si está dentro del canvas muevo el player:

function moveUp() {
  playerPosition.y -= elementSize;
  if (withinTheMargin()) {
    startGame();
  } else {
    playerPosition.y += elementSize;
  }
}

Eduard Barrios

esta fue mi solución para limitar el movimiento del jugador:

function moveUp(){
    if(playerPosicion.y > 2*elementSize){
        

        playerPosicion.y = (playerPosicion.y - elementSize) 
        
        movePlayer()
    }
    
}
function moveLeft(){
    if(playerPosicion.x > 2*elementSize){
        

        playerPosicion.x = (playerPosicion.x - elementSize) 
        
        movePlayer()
    }
}
function moveRight(){
    if(playerPosicion.x < 9*elementSize){
        

        playerPosicion.x = (playerPosicion.x + elementSize) 
        
        movePlayer()
    }
}
function moveDown(){
    if(playerPosicion.y < 10*elementSize){
        

        playerPosicion.y = (playerPosicion.y + elementSize) 
        
        movePlayer()
    }
}

Gilberto Santamaria

Mi aporte a la solución, reviso si la nueva posición está dentro del elementSize, que sería nuestro borde 0 y el canvasSize que sería el maximo, si todo está ok lo dibujo de nuevo:

function moveUp() {
  let newPosiotion = playerPosition.y - elementSize;
  if (newPosiotion > elementSize && newPosiotion < canvasSize) {
    playerPosition.y = newPosiotion;
    playerCanva.clearRect(0, 0, canvasPlayer.width, canvasPlayer.height);
    playerCanva.fillText(emojis["PLAYER"], playerPosition.x, playerPosition.y);
  }
}
function moveRigth() {
  let newPosiotion = playerPosition.x + elementSize;
  if( newPosiotion > elementSize && newPosiotion < canvasSize){
    playerPosition.x = newPosiotion;
    playerCanva.clearRect(0, 0, canvasPlayer.width, canvasPlayer.height);
    playerCanva.fillText(emojis["PLAYER"], playerPosition.x, playerPosition.y);

  }
}
function moveDown() {
  let newPosiotion = playerPosition.y + elementSize;
  if (newPosiotion > elementSize && newPosiotion <= canvasSize) {
    playerPosition.y = newPosiotion;
    playerCanva.clearRect(0, 0, canvasPlayer.width, canvasPlayer.height);
    playerCanva.fillText(emojis["PLAYER"], playerPosition.x, playerPosition.y);
  }
}
function moveLeft() {
  let newPosiotion = playerPosition.x - elementSize;
  if( newPosiotion >= elementSize && newPosiotion < canvasSize){
    playerPosition.x =newPosiotion; 
    playerCanva.clearRect(0, 0, canvasPlayer.width, canvasPlayer.height);
    playerCanva.fillText(emojis["PLAYER"], playerPosition.x, playerPosition.y);
  }
}

Nestor Rios Garcia

Beder Danilo Casa Condori

buena solucion

Me paso lo mismo que en el minuto 5:20, tarde como 15 minutos en entender por qué no pasaba nada jaja.

Raúl Adolfo Sánchez Rodríguez

Mi solución

Mi solución para el resto de movimientos: DERECHA, IZQUIERDA y ABAJO

Reto de clase: Limitar el movimiento hacia ARRIBA

Reto de clase: Limitar el movimiento hacia la IZQUIERDA

Reto de clase: Limitar el movimiento hacia la DERECHA

Reto de clase: Limitar el movimiento hacia ABAJO

Federico Ivan Llano

hace un clases atras estaba pensando en eso, entrar en el ciclo for y hacer los re renders, aunque me parecia complicado podia ocupar mucha memoria.

Manuel Andres García Vera

mi solución fu colocar un condicional que no sobre pasara los limites del mapa a cada movimiento aunque el único movimiento que no limita tan exactamente es hacia la izquierda

function moverArriba(){
    console.log('moverarriba');
    if (playerPosition.y >= elementSize){
        playerPosition.y -= elementSize 
        startGame();
    }
    

}
function moverAbajo(){
    console.log('moverabajo');
    if (playerPosition.y <= (canvasSize-elementSize)){
        playerPosition.y += elementSize 
        startGame();
    }
}
function moverDerecha(){
    console.log('moverderecha');
    if (playerPosition.x <= (canvasSize-elementSize)){
        playerPosition.x += (elementSize-1) 
        startGame();
    }
}
function moverIzquierda(){
    console.log('moverizquierda');
    if (playerPosition.x >= elementSize){
        playerPosition.x -= elementSize 
        startGame();
    }
}

Limpieza de movimientos

Progreso del curso

Introducción

Canvas

Mapa del juego

Movimientos del jugador

Colisiones

Bonus: adictividad

Deploy

Próximos pasos