Reto: timeouts de victoria o derrota

Cursos Empresas Blog Live Conf Precios

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

Reto: timeouts de victoria o derrota

Laura Roa

student

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

teacher

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

student

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>

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?