Reto: timeouts de victoria o derrota

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:004:14

Reto: timeouts de victoria o derrota

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

Clase 23 de 24

Clase 23 / 24

Laura Roa

Hace 4 años

Hola! estaba todo bien, puse el toFixed() y me funciono bien con los mapas que ya teniamos hechos, pero cuando intente agregar un mapa por mi parte, fallo y tengo otra vez ese error. Ya he mirado mucho y no se que pueda estar fallando. Agradeceria si tienen alguna sugerencia. Este es mi repositorio https://github.com/laulexa/video-game-project--learningJS

https://laulexa.github.io/video-game-project--learningJS/https://laulexa.github.io/video-game-project--learningJS/

Juan Castro

Profesor

Hace 4 años

Veo que hiciste un nuevo commit después de agregar los nuevos mapas y que el jugo ya funciona otra vez: https://laulexa.github.io/video-game-project--learningJS/

¿Te late si nos cuentas cuál era eel error y cómo lo solucionaste? :D

Laura Roa

Hace 4 años

Hola profe! No de hecho no lo habia solucionado :( , vi tu comentario y en mi computador aun habian errores. Trate de solucionarlo y di con una solucion que no estoy segura si sea tan buena pero hice todo tipo de pruebas y no salio ese error. Lo que hice fue restarle 1 a element size y multiplicar window.innerheight y window.innerWidth por 0.6:

  function setCanvasSize() {
  if (window.innerHeight > window.innerWidth) {
        canvasSize = fixNumber(window.innerWidth * 0.6);
  } else {
        canvasSize = fixNumber(window.innerHeight * 0.6)
  }
  canvasSize = Number(canvasSize.toFixed(0));
  
  canvas.setAttribute('width', fixNumber(canvasSize)); 
  canvas.setAttribute('height', fixNumber(canvasSize));
  
  elementsSize = fixNumber(canvasSize / 10) -1;
  
  playerPosition.x = undefined;
  playerPosition.y = undefined;

 restartGame();
}

Y finalmente en la funcion startGame(), cambie la siguiente linea y en vez de 1 le agregue un 1.2

const posX = fixNumber(elementsSize * (colI + 1.2));
const posY = fixNumber(elementsSize * (rowI + 1));

Seguie trabajando en ello porque antes de publicar este post vi que una pantalla fallo :( Hice la ultima prueba en un mac y en pantalla completa se rompio el ultimo mapa en las cajas de la parte derecha. este es mi repositorio seguire trabajando en el proyecto y no se si otras cosas cambien despues. https://github.com/laulexa/video-game-project--learningJS

game.js

const canvas = document.querySelector('#game');
const game = canvas.getContext('2d');
const upButton = document.querySelector ('#up');
const rightButton = document.querySelector ('#right');
const leftButton = document.querySelector ('#left');
const downButton = document.querySelector ('#down');
const restartButton = document.querySelector ('#restart');
const deleteRecord = document.querySelector('#delete-record');
const spanLives = document.querySelector('#lives');
const spanTime = document.querySelector('#time');
const spanRecord = document.querySelector('#record');
const pResult = document.querySelector('#result');
const countdownText = document.querySelector('.countdown');

let canvasSize;
let elementsSize;
let level = 0;
let lives = 3;

let timeStart;
let playerTime;
let timeInterval;


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

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

let enemyPositions = [];

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

function fixNumber(n) {
  return Number(n.toFixed(0));
}

function setCanvasSize() {
  if (window.innerHeight > window.innerWidth) {
        canvasSize = fixNumber(window.innerWidth * 0.6);
  } else {
        canvasSize = fixNumber(window.innerHeight * 0.6)
  }
  canvasSize = Number(canvasSize.toFixed(0));
  
  canvas.setAttribute('width', fixNumber(canvasSize)); 
  canvas.setAttribute('height', fixNumber(canvasSize));
  
  elementsSize = fixNumber(canvasSize / 10) -1;
  
  playerPosition.x = undefined;
  playerPosition.y = undefined;

  //countdown()
 restartGame();
}

function startGame() {
  console.log({ canvasSize, elementsSize });
  console.log(window.innerWidth, window.innerHeight);
  game.font = fixNumber(elementsSize) + 'px Verdana';
  game.textAlign = 'end';
  
  
  const map = maps[level];
//   console.log(map)
  if (!map) {
    gameWin();
    return;
  }

  if (!timeStart) {
    timeStart = Date.now();
    timeInterval = setInterval(showTime, 100);
    showRecord();
  }
  const mapRows = map.trim().split('\n');
  const mapRowCols = mapRows.map(row => row.trim().split(''));
  console.log({map, mapRows, mapRowCols});

  showLives();
  
  enemyPositions = [];

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

      if (col == 'O') {
        if (!playerPosition.x && !playerPosition.y) {
          playerPosition.x = fixNumber(posX);
          playerPosition.y = fixNumber(posY);
          console.log({playerPosition});
        }
      } else if (col == 'I') {
        giftPosition.x = fixNumber(posX);
        giftPosition.y = fixNumber(posY);
      } else if(col == 'X') {
        enemyPositions.push ({
          x: fixNumber(posX),
          y: fixNumber(posY),
        });
      }
      
      game.fillText(emoji, posX, posY);
    });
  });
  movePlayer();
}

function movePlayer() {
  const giftCollisionX = playerPosition.x.toFixed(3) == giftPosition.x.toFixed(3);
  const giftCollisionY = playerPosition.y.toFixed(3) == giftPosition.y.toFixed(3);
  const giftCollision = giftCollisionX && giftCollisionY;

  if(giftCollision) {
    winningLevel();
  } 
  const enemyCollision = enemyPositions.find(enemy => {
    const enemyCollisionX =  enemy.x.toFixed(3) == playerPosition.x.toFixed(3);
    const enemyCollisionY = enemy.y.toFixed(3) == playerPosition.y.toFixed(3);
    return enemyCollisionX && enemyCollisionY;
  });

  if(enemyCollision) {
    levelFail();
  }

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

function winningLevel() {
  console.log('Level up');
  level ++;
  startGame();
}

function levelFail() {
  console.log("ENEMY!")
  lives--;

  console.log(lives)
  if(lives <= 0) {
    level = 0;
    lives = 3;
    timeStart=  undefined;
  }
  playerPosition.x = undefined;
  playerPosition.y = undefined;
  startGame();
}
function gameWin() {
  console.log('¡Game Finished!');
  clearInterval(timeInterval);

  const recordTime = localStorage.getItem('record_time');
  const playerTime = Date.now() - timeStart;

  if (recordTime) {
    if (recordTime >= playerTime) {
      localStorage.setItem('record_time', playerTime)
      pResult.innerHTML ='you made a new record! Congratulations!';
     } else {
      pResult.innerHTML ='Sorry, this is not a record';
     }
  } else {
    localStorage.setItem('record_time', playerTime)
    pResult.innerHTML = 'first time playing? Try to get a new record';
  }

  console.log({recordTime, playerTime});
}

function showLives() {
  const heartsArray = Array(lives).fill(emojis['HEART']);
  console.log(heartsArray);

  spanLives.innerHTML = "";
  heartsArray.forEach(heart => spanLives.append(heart))
  
}
function showTime() {
  if(timeStart == undefined) {
    spanTime.innerHTML = 0;
  } else {
    //spanTime.innerHTML = Date.now() - timeStart;
    spanTime.innerHTML = ((Date.now() - timeStart)/1000).toFixed(2) + " S";
  }
}
function showRecord() {  
  spanRecord.innerHTML = localStorage.getItem('record_time') + ' S';
}

  //rowI and colI are the index
  
  // for (let row = 1; row <= 10; row++) {
    //   for (let col = 1; col <= 10; col++) {
      //     game.fillText(emojis[mapRowCols[row - 1][col - 1]], elementsSize * col, elementsSize * row);
      //   }
      // }
    
window.addEventListener('keydown', moveByKeys);
deleteRecord.addEventListener('click', deleteRecords);
upButton.addEventListener('click', moveUp);
rightButton.addEventListener('click', moveRight);
leftButton.addEventListener('click', moveLeft);
downButton.addEventListener('click', moveDown);
restartButton.addEventListener('click', restartGame);

function moveByKeys (event) {
  if(event.key == 'ArrowUp') moveUp();
   else if (event.key == 'ArrowRight') moveRight();
   else if (event.key == 'ArrowLeft')  moveLeft();
   else if (event.key == 'ArrowDown') moveDown();
}
  //console.log(event)

  function deleteRecords() {
    console.log('record deleted')
    localStorage.removeItem('record_time');
    spanRecord.innerText = '0'
  }

  function moveUp() {
    console.log('Moving up');
  
    if ((playerPosition.y - elementsSize) < elementsSize) {
      console.log('OUT');
    } else {
      playerPosition.y -= elementsSize;
      startGame();
    }
  }
  function moveLeft() {
    console.log('moving left');
  
    if ((playerPosition.x - elementsSize) < 20) {
      console.log('OUT');
    } else {
      playerPosition.x -= elementsSize;
      startGame();
    }
  }
  function moveRight() {
    console.log('moving right');
  
    if ((playerPosition.x + elementsSize) > canvasSize) {
      console.log(elementsSize)
      console.log('OUT');
    } else {
      playerPosition.x += elementsSize;
      startGame();
    }
  }
  function moveDown() {
    console.log('moving down');
    
    if ((playerPosition.y + elementsSize) > canvasSize) {
      console.log('OUT');
    } else {
      playerPosition.y += elementsSize;
      startGame();
    }
  } 
  function countdown() {
    console.log("counting down");
    let numberCount = 3
    function count () {
      if (numberCount > 0) {
        countdownText.innerHTML = numberCount;
        numberCount--;
        setTimeout(count, 700);
      }
      else {
        countdownText.innerHTML ='Go!';
      }  
    }
    count ()
    startGame()
  }
  function restartGame() {
    console.log('restart game');
    level = 0;
    lives = 3;
    pResult.innerHTML = '';
    playerPosition.x = undefined;
    playerPosition.y = undefined;  
    setTimeout(startGame, 3000);
    countdown()
    timeStart= undefined;
}

  function victory() {

    }
  function collision() {
    //   setTimeout()
    }

maps.js

/*
 * Reglas:
 * El final de cada nivel debe ser el inicio del siguiente
*/
// const img1 = document.createElement("img");
// img1.src = "./myDog.png";
const emojis = {
    '-': ' ',
    'O': '🚪',
    'X': '📦',
    'I': '🧀',
    'PLAYER':'🐹',
    'BOMB_COLLISION': '🔥',
    'GAME_OVER': '👎',
    'W': '🏆',
    'HEART': '❤️',
    'S': '🌟'
  };
  
  const maps = [];
  
  maps.push(`
    IXXXXXXXXX
    -XXXXXXXXX
    -XXXXXXXXX
    -XXXXXXXXX
    -XXXXXXXXX
    -XXXXXXXXX
    -XXXXXXXXX
    -XXXXXXXXX
    -XXXXXXXXX
    OXXXXXXXXX
  `);
  maps.push(`
    O--XXXXXXX
    X--XXXXXXX
    XX----XXXX
    X--XX-XXXX
    X-XXX--XXX
    X-XXXX-XXX
    XX--XX--XX
    XX--XXX-XX
    XXXX---IXX
    XXXXXXXXXX
    `);
  maps.push(`
    I-----XXXX
    XXXXX-XXXX
    XX----XXXX
    XX-XXXXXXX
    XX-----XXX
    XXXXXX-XXX
    XX-----XXX
    XX-XXXXXXX
    XX-----OXX
    XXXXXXXXXX
  `);
     maps.push(`
    O--------X
    XXXXXXXX-X
    XXXX---X-X
    XXXX-X---X
    XXXX-XXXXX
    XXXX-----X
    XXXXXXXX-X
    XXX---XX-X
    ----X-XX-X
    IXXXX----X
    `);
  maps.push(`
    WWWWWWWWWW
    WWWWWWWWWW
    WWWWWWWWWW
    WWWWWWWWWW
    WWWWWWWWWW
    WWWWWWWWWW
    WWWWWWWWWW
    WWWWWWWWWW
    WWWWWWWWWW
    SWWWWWWWWW
  `);

styles.css

/* font-family: 'RocknRoll One', sans-serif; */
body {
    background-color: indigo;
    color: #fff;  
    font-family: 'RocknRoll One', sans-serif;;
    margin: 0;
    padding: 0;
  }
  
  .game-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    width: 100vw;
  }
  
  canvas {
    border: 4px solid #ff6600;
    border-radius: 8px;
    background-color: #feff9d;
  }

  .winner-message {
    align-items: center;
    background-color: #82B700;
    color: rgb(255, 255, 255);
    display: flex;
    font-size: 20px;
    font-weight: bold;
    justify-content: center;
    margin-top: 10px;
    height: 200px;
    width: 300px;
}
.loser-message {
    align-items: center;
    background-color: #b72500;
    color: rgb(255, 255, 255);
    display: flex;
    font-size: 20px;
    font-weight: bold;
    justify-content: center;
    margin-top: 10px;
    height: 200px;
    width: 300px;
  }
  .final-message {
    place-items: center;
  }
  .btns {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
    width: 100%;
  }
  
  button {
    background-color: #fdef05;
    border-radius: 8px;
    border-color: #ff6600;
    font-family: inherit;
    margin: 0;
    padding: 5px 20px;
    width: 100px;
  }
  button:not(:last-child) {
    margin-right: 10px;
  }
   .restart-delete-btn {
    background-color: #82B700;
    border-color: #ff6600;
    font-weight: bold;
    font-size: 10px;
    padding: 5px 0 5px;
    height: 50px;

  }
  .messages {
    display: flex;
    flex-wrap: wrap;
    margin: 10px auto;
    width: 80%;
    max-width: 460px;
  }
  
  .stats {
    display: block;
    margin: 0;
    width: 100%;
  }
  .countdown {
    text-align: center;
    font-size: 30px;
  }
  .inactive {
    display: none;
  }
  
  @media (max-width: 440px) {
    button { margin: 5px 0 5px; padding: 10px 20px; }
    #up, #down { margin-left: 100%; margin-right: 100%; }
    #restart-delete-btn { margin: 15px 0 15px;}
    .messages {text-align: center;}
  }

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./styles.css">
    <title>VideoGame Project</title>
</head>
<body>
    <div class="game-container">
        <canvas id="game"></canvas>
        <div class="winner-message inactive">
            <p class="final-message">You Win!</p>
        </div>
        <div class="loser-message inactive">
            <p class="final-message">Game Over</p>
        </div>
        <p class="countdown"></p>
        <div class="btns">
            <button id="up">Up</button>
            <button id="left">Left</button>
            <button id="right">Right</button>
            <button id="down">Down</button>
            <button id="restart" class="restart-delete-btn">Restart</button>
            <button id="delete-record" class="restart-delete-btn">Delete Record</button>
        </div>
        <div class="messages">
            <p class="stats">Lives: <span id="lives"></span></p>
            <p class="stats">Time ⏰: <span id="time"></span></p>
            <p class="stats">Record 🏁: <span id="record"></span></p>
            <p class="stats" id="result"></p>
        </div>
    </div>
    <script src="./maps.js"></script>
    <script src="./game.js"></script>
</body>
</html>

Comentarios (21)21 comentarios

Axel Enrique Galeed Gutierrez

Manuel Araujo

Sergio Javier Lopez Olivera

Jose Carlos Espinosa Espinosa

José Fernando Fuentes Roa

Elío Diez

Eder Raúl Abarca Raviela

Cristian Paiva

Matias Ezequiel Rivero

Orlando Rodriguez

Leonardo Garrido

Yhoshua Bernal

Hace 3 años

Harold Zurita Simon

Raúl Adolfo Sánchez Rodríguez

Jose Angel Esquivel Cisneros

Manuel Andres García Vera

Stivenson David Mejia Palacios

Kevin Cantú Gómez

----- ----

Funcionalidad	Tutorial
Incorporación de fuego 🔥 en las colisiones contra las bombas	Ver
Contador de tiempo ⏱ en segundos + 2 decimales	Ver
Tarjetas interactivas al perder, ganar sin récord y ganar con nuevo récord	Ver
Pantalla de inicio del juego 🤠	Ver
Animación al ganar un nivel 🟠🟡🟢🔵🔴	Ver

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?

Reto: timeouts de victoria o derrota