Limpieza de movimientos

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

Clase anteriorSiguiente clase

Rubén Ernesto Aragón Gil

student•

Y yo como loco haciendo querer funcionar el Clearect jaja

Reymundo Fernando Figueroa Romo

student•

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

student•

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

student•

Esta es la forma que utilicé después de unos ajustes; dentro de la función startGame():

    if ((playerPos.x - elementSize) < 0){
        buttonRIGHT();
    } else if (playerPos.x > canvasSize + 1) {
        buttonLEFT();
    } else if (playerPos.y > (canvasSize + 1)) {
        buttonUP();
    } else if ((playerPos.y - elementSize) < 0) {
        buttonDOWN();
    }

Diego Toro Cárdenas

student•

Con tu ayuda y de chatGPT-3

switch (true) {
  case (PlayerPosition.x - elementsSize) < 0: moveRight();
    break;
  case PlayerPosition.x > canvasSize + 1: moveLeft();
    break;
  case PlayerPosition.y > (canvasSize + 1): moveUp();
    break;
  case (PlayerPosition.y - elementsSize) < 0: moveDown();
    break;
  default:
    break;
}

Gracias!!

Sergio Javier Lopez Olivera

student•

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

student•

Esta es mi solución para que que el jugador no se salga del mapa

function moveUp() {
  if (playerPosition.y <= elementsSize + 1) {
    console.log("no se mueve", playerPosition.y, elementsSize);
  } else {
    console.log("se mueve", playerPosition.y, elementsSize);
    playerPosition.y -= elementsSize;
    startGame();
  }
  console.log("Arriba");
}

function moveLeft() {
  if (playerPosition.x <= elementsSize + 1) {
    console.log("no se mueve",);
  } else{
    console.log("se mueve");
    playerPosition.x -= elementsSize;
    startGame();
  }
  console.log("Izquierda", playerPosition.x, elementsSize, canvasSize);
}

function moveRight() {
  if (playerPosition.x >= canvasSize) {
    console.log("no se mueve");
  } else {
    console.log("se mueve");
    playerPosition.x += elementsSize;
    startGame();
  }

  console.log("Derecha",playerPosition.x,elementsSize, canvasSize);
}

function moveDown() {
  if (playerPosition.y >= canvasSize) {
    console.log("no se mueve", playerPosition.y, canvasSize);
  } else {
    console.log("se mueve", playerPosition.y, canvasSize);
    playerPosition.y += elementsSize;
    startGame();
  }
  console.log("Abajo");
}

Angel David Velasco Bonifaz

student•

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

Diego Toro Cárdenas

student•

Y B

Guadalupe MoralesCarmona

student•

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

student•

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

Nestor Rios Garcia

student•

Así lo solucioné

function mapLimit() {
    const canvasLimit = elementSize* 10
    if (playerPosition.x >= canvasLimit) {
        playerPosition.x -= elementSize
    }
    if (playerPosition.x < 0) {
        playerPosition.x += elementSize
    }
    if (playerPosition.y >= canvasLimit) {
        playerPosition.y -= elementSize
    }
    if (playerPosition.y < 0) {
        playerPosition.y += elementSize
    }
}

La llamaría después de detectar el movimiento

function movePlayer(direction) {
    moves++
    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;
    }
    mapLimit()
    printMap()
    game.fillText(emojis['PLAYER'], playerPosition.x, playerPosition.y)
}

Beder Danilo Casa Condori

student•

buena solucion

Nestor Rios Garcia

student•

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

student•

Mi solución

Raúl Adolfo Sánchez Rodríguez

student•

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

Raúl Adolfo Sánchez Rodríguez

student•

Reto de clase: Limitar el movimiento hacia ARRIBA

Raúl Adolfo Sánchez Rodríguez

student•

Reto de clase: Limitar el movimiento hacia la IZQUIERDA

Raúl Adolfo Sánchez Rodríguez

student•

Reto de clase: Limitar el movimiento hacia la DERECHA

Raúl Adolfo Sánchez Rodríguez

student•

Reto de clase: Limitar el movimiento hacia ABAJO

Federico Ivan Llano

student•

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

student•

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

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":
      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]));
}

Frandel Corporan Rodríguez

student•

Mi solución fue bastante sencilla:

if(playerPosition.x <canvasSize/10){
    return null
  }
  else{

    playerPosition.x -= elementSize
  }

Se puede hacer una condición que no haga nada si se cumple y caso contrario ejecute el movimiento.

Frandel Corporan Rodríguez

student•

Use la variable canvasSize como referencia y la dividi entre 10 para el eje x hacia la izquierda pero para los demas lados se puede ajustar la condicion segun sus dimenciones

Henry Alexander Velásquez Rosas

student•

Mi solución

function move_up(){
    if(player_position.y > elements_size + 1){
        player_position.y -= elements_size;
        calculate_canvas_size();
    }
    console.log(player_position, canvas_size, elements_size);
}
function move_left(){
    if(player_position.x +1 > elements_size){
        player_position.x -= elements_size;
        calculate_canvas_size();
    }
    console.log(player_position, canvas_size, elements_size);
    
}
function move_right(){
    if(player_position.x < canvas_size*0.8){
        player_position.x += elements_size;
        calculate_canvas_size();
    }
    console.log(player_position, canvas_size * 0.8, elements_size);
}
function move_down(){
    if(player_position.y < canvas_size * 0.9){
        player_position.y += elements_size;
        calculate_canvas_size();
    }
    console.log(player_position, canvas_size, elements_size);
}

Limpieza de movimientos

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?