Limpieza de movimientos

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

Contenido del curso

Introducción

1
Programemos un juego con JavaScript
17:13 min

Canvas

Mapa del juego

Movimientos del jugador

Colisiones

Bonus: adictividad

Deploy

Próximos pasos

Tomar examen

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

Reymundo Fernando Figueroa Romo

Hace 2 años

Josue Cerron Tuesta

Sergio Javier Lopez Olivera

Diego Toro Cárdenas

David Emmanuel Ozuna Navarro

Angel David Velasco Bonifaz

Guadalupe MoralesCarmona

Eduard Barrios

Nestor Rios Garcia

Beder Danilo Casa Condori

Raúl Adolfo Sánchez Rodríguez

Federico Ivan Llano

Manuel Andres García Vera

Frandel Corporan Rodríguez

Henry Alexander Velásquez Rosas

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?

Limpieza de movimientos