No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Guardando records del jugador

19/24
Recursos

Aportes 16

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Hice esto cuando el usuario gana

Utilizo clases con display:none para que no se vea de comienzo este HTML
Lo aprend铆 del curso de consumo de API, del mismo profe (es crack)

<section class="win-container inactive">

      <h2> 隆Felicidades! Terminaste el juego</h2>

      <span>馃弳</span>

      <p class="newrecord"></p>

      <a href="/index.html"><input type="button" value="Volver a Jugar"></a>
</section>

Luego en js este es mi c贸digo

function gameWin() {
    let newRecord;
    clearInterval(timeInterval);
    const newTime = Math.floor((Date.now() - timeStart)/1000);
    const record = localStorage.getItem('record_time');
// si no tiene record o su tiempo es mejor que el anterior
    if (!record || record > newTime ) {
        localStorage.setItem('record_time', newTime);
        newRecord = true;
    }
    game.fillText(m.emojis['WIN'], playerPosition.x, playerPosition.y);

    setTimeout(()=> {
        n.win.classList.remove('inactive');
        n.gameContainer.classList.add('inactive');
        newRecord ? n.recordStatus.textContent = 'Conseguiste un nuevo record' 
        :
        n.recordStatus.textContent = `No superaste el record de ${record} seg.`;
    }, 1000);

    return;
}

En la funci贸n startGame le agregu茅 esta l铆nea

n.recordSeg.textContent = localStorage.getItem('record_time') || 'Todav铆a no tienes record de';

Si ya hay algo en localStorage lo muestra, si no le dice al usuario que todav铆a no tiene nada. Esto es visible en la vista principal

Yo us茅 Git Bash:

1.- Accede a tu proyecto con cd + nombre de la carpeta
2.- git status (miras rojo los archivos modificados)
3.- git add . (agregas todos los archivos con modificaci贸n)
4.- git commit -m "escribe el nombre de tu commit"
5.- git push -u origin main
6.- Ve a tu repo en Github y confirma que est茅 todo all铆.


++
Les recomiendo usar esa p谩gina para subir im谩genes aqu铆.++

Amigos les dejo una funcion para pasarle como parametro los milisegundos y transformarlos en minutos y segundos antes de mandarlo al span del html:

function millisToMinutesAndSeconds(millis) {
    var minutes = Math.floor(millis / 60000);
    var seconds = ((millis % 60000) / 1000).toFixed(0);
    return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
  }

DESPLIEGUE DEL JUEGO EN GITHUB PAGES:

馃幃Taller: Crea tu primer videojuego 馃幃

El videojuego ha sido elaborado durante las sesiones del taller de Platzi con HTML馃А, CSS 馃挋y JavaScript馃挍 y adicionalmente se han a帽adido algunas funcionalidades, como:

Funcionalidad Tutorial
Incorporaci贸n de fuego 馃敟 en las colisiones contra las bombas Entra aqu铆
Contador de tiempo 鈴 en segundos + 2 decimales Entra aqu铆
Tarjetas interactivas al perder, ganar sin r茅cord y ganar con nuevo r茅cord Entra aqu铆
Pantalla de inicio del juego 馃 Entra aqu铆

馃搶Prueba la demo del juego 馃幃 猸愨瓙猸愨瓙猸

馃搶脡chale un vistazo al repositorio de GitHub

馃搶脡chale un vistazo al Taller de Platzi

Antes de subir mi proyecto a github, le agregu茅 una portada 馃槄

Les dejo mi juego. v0.29 alpha
Faltan detalles por pulir, por eso es una version alpha.

https://orlando0x.github.io/videojuego-con-javascript/

馃幃OPORTUNIDAD DE MEJORA: Tarjetas de mensajes al ganar y perder el juego 猸愨瓙

  1. Resultado

    鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃

  2. Paso a paso


































    鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃

馃幃Almacena tus mejores tiempos y establece tu propio record, utilizando localStorage 馃弳馃弳馃弳

  1. Resultado

    鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃

  2. Paso a paso




















    鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃

para que el tiempo y el record se muestre en el formato de tiempo que nosotros usamos el c贸digo es as铆

function showTime() {
        const time = Date.now() - timeStart;
        const minutes = Math.floor(time / 60000);
        const seconds = Math.floor((time % 60000) / 1000);
        const milliseconds = time % 1000;
        spanTime.innerHTML = `${minutes}:${seconds}.${milliseconds}`;
    }
    function showRecord() {
    const record_time = localStorage.getItem('record_time');
    if (record_time) {
        const minutes = Math.floor(record_time / 60000);
        const seconds = Math.floor((record_time % 60000) / 1000);
        const milliseconds = record_time % 1000;
        spanRecord.innerHTML = `${minutes}:${seconds}.${milliseconds}`;
    } else {
        spanRecord.innerHTML = 'Sin registro a煤n.';
    }
    }```

Ahora intentar茅 hacer una p谩gina de inicio y una p谩gina de cierre xd

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");

const spanLives = document.getElementById("lives");
const spanTime = document.getElementById("time");
const recordTime = document.getElementById("record");

// 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,
};
let giftPosition = {
  x: undefined,
  y: undefined,
};
let bombPosition = [];
let lives = 3;
let startMap = 0;

let timeStart;
let timePlayer;
let timeInterval;

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

async function movePlayer(direction) {
  // Realizar acciones seg煤n la direcci贸n recibida
  switch (direction) {
    case "up":
      if (!(playerPosition.y > 0)) {
        return; // No se cumple la condici贸n, se sale de la funci贸n sin hacer nada
      }
      playerPosition.y -= 1;
      // L贸gica para mover al jugador hacia arriba
      break;
    case "left":
      if (!(playerPosition.x > 0)) {
        return; // No se cumple la condici贸n, se sale de la funci贸n sin hacer nada
      }
      playerPosition.x -= 1;
      // L贸gica para mover al jugador hacia la izquierda
      break;
    case "right":
      if (!(playerPosition.x < 9)) {
        return; // No se cumple la condici贸n, se sale de la funci贸n sin hacer nada
      }
      playerPosition.x += 1;
      // L贸gica para mover al jugador hacia la derecha
      break;
    case "down":
      if (!(playerPosition.y < 9)) {
        return; // No se cumple la condici贸n, se sale de la funci贸n sin hacer nada
      }
      playerPosition.y += 1;
      // L贸gica para mover al jugador hacia abajo
      break;
    default:
      return;
  }
  showTime();

  if (
    giftPosition.x === playerPosition.x &&
    giftPosition.y === playerPosition.y
  ) {
    lvlUp();
    return;
  } else if (
    bombPosition.some(
      (bombItem) =>
        bombItem.x === playerPosition.x && bombItem.y === playerPosition.y
    )
  ) {
    lvlFail();
    return;
  }

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

function lvlUp() {
  if (isGameWin(startMap)) {
    clearInterval(timeInterval);
    var elapsedTime = Date.now() - timeStart;
    let record = localStorage.getItem("record");
    if (elapsedTime < record) {
      localStorage.setItem("record", elapsedTime);
    }
    if (record == null) {
      localStorage.setItem("record", elapsedTime);
    }

    resetGame();
    return;
  }
  startMap++;
  startGame();
}

function isGameWin(startMap) {
  return maps.length == startMap + 1;
}

function resetGame() {
  startMap = 0;
  lives = 3;
  playerPosition = {
    x: undefined,
    y: undefined,
  };
  timeStart = undefined;
  startGame();
}

function lvlFail() {
  game.fillText(
    emojis.BOMB_COLLISION,
    playerPosition.x * elementsSize,
    (playerPosition.y + 1) * elementsSize
  );
  lives -= 1;
  if (lives === 0) {
    setTimeout(function () {
      resetGame();
    }, 600);
    return;
  }
  playerPosition = {
    x: undefined,
    y: undefined,
  };

  setTimeout(function () {
    startGame();
  }, 600);
}

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);
  bombPosition = [];
  showLives();
  showRecord();

  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
      }
      if (emoji === "馃巵") {
        giftPosition = { x, y };
      }
      if (emoji === "馃挘") {
        bombPosition.push({ x, y });
      }
    });
  });

  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 showLives() {
  spanLives.innerHTML = emojis.HEART.repeat(lives);
}

function showTime() {
  if (!timeStart) {
    timeStart = Date.now();
    timeInterval = setInterval(function () {
      var elapsedTime = Date.now() - timeStart;
      var formattedTime = formatTime(elapsedTime);
      spanTime.innerHTML = formattedTime;
    }, 100);
  }
}

function showRecord() {
  let record = localStorage.getItem("record");
  var formattedTime = formatTime(record);
  recordTime.innerHTML = formattedTime;
}

function formatTime(milliseconds) {
  var minutes = Math.floor(milliseconds / 60000);
  milliseconds %= 60000;
  var seconds = Math.floor(milliseconds / 1000);
  var millisecondsRemaining = milliseconds % 1000;

  var formattedTime = `${minutes.toString().padStart(2, "0")}:${seconds
    .toString()
    .padStart(2, "0")}:${millisecondsRemaining.toString().padStart(3, "0")}`;
  return formattedTime;
}

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

    map = lines.map((line) => line.split("").map((symbol) => emojis[symbol]));
  } catch (error) {
    setTimeout(function () {
      resetGame();
    }, 300);
  }
}

yo lo hice de esta manera y el inner lo coloque en la funcion startGame

function showRecord(){
    
    if(timePlayer < localStorage.getItem('record')){
        localStorage.setItem('record', timePlayer);
    }else{
        alert('No superaste el tiempo :(')
    }
}

Mi soluci贸n:

function showRecord() {
	if (!localStorage.puntaje) {
		localStorage.setItem("puntaje", 9999);
	}
	recordSpan.innerHTML = localStorage.puntaje + " seg";
}

馃幃OPORTUNIDAD DE MEJORA 2: Pantalla de inicio del juego 猸愨瓙

  1. Resultado

    鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃

  2. Paso a paso











    鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃

  3. Prueba la demo:
    Hasta aqu铆 llega la elaboraci贸n del videojuego. Te invito a testear la demo y a dejarme tu feedback:
    馃搶Prueba la demo del juego 馃幃 猸愨瓙猸愨瓙猸
    馃搶脡chale un vistazo al repositorio de GitHub

    鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃鉃栤灃

aqui esta el link del despliegue en github pages

https://manuel15939.github.io/taller-practico-javascript-videogame/

faltan muchas cosas por mejorar, pero en lo posible se haran mas adelante