Derrota: perdiendo vidas

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

marco antonio

student•

le agregue un pequeño continúe para cuando pierde todas las vidas o cuando gana pueda decidir si continua o no

//contect
const canvas = document.querySelector('#game');
const btnArriba = document.querySelector('#arriba');
const btnAbajo = document.querySelector('#abajo');
const btnDer = document.querySelector('#derecha');
const btnIzq = document.querySelector('#izquierda');

const juego  = canvas.getContext('2d');

//signals: 
window.addEventListener('load', resizeEvent);
window.addEventListener('resize', resizeEvent);


let posJugador     = undefined; let mapa     = Array();  let nivel = 0;
let prePosJugador  = undefined; let celda_t  = 0;        let nivel_actual = undefined;
let puntoDePartida = Number(0); let canvas_t = 0;        var actualizado  = Boolean(false);
let explociones    = Array();   let vidas    = 3;        const re_iniciar = {'select': 'si', 
                                                                             'resetStart': 'indeciso',
                                                                             'exec' : false};

function resizeEvent(){
    actualizado = false;
    canvas_t = (window.innerWidth < window.innerHeight ? window.innerWidth : window.innerHeight) *.75 ;
    canvas.setAttribute('width', canvas_t);
    canvas.setAttribute('height',canvas_t);
    celda_t = canvas_t / 10;
    juego.textAlign='end';
    juego.font = font_t() +'px arial';
    update();}

function font_t(){ return celda_t - celda_t / 10;}

function resetStarEvent(){
    posJugador = prePosJugador = undefined; 
    nivel = 0;
    nivel_actual = undefined;
    puntoDePartida = 0;
    vidas = 3;
    actualizado = false;
    explociones = Array();
    re_iniciar['select'] = 'si';
    re_iniciar['exec'] = false;
    re_iniciar['resetStart'] = 'indeciso';
    update();}


function update(){
    if(re_iniciar['exec']){paintScreenFinal(); return;}

    cargarMapa();
    clear();
    paintEvent();
    paintEventPlayer();
    paintEventExplosion();
    actualizado = true;}


function cargarMapa(){
    if(nivel_actual == nivel || Victoria()) return;
    nivel_actual = nivel;
    mapa = map[nivel].match(/[IOX-]/g);}


function clear(){
    if(!actualizado) {
        juego.clearRect(0,0, canvas_t, canvas_t);
        return;}

    if(posJugador == prePosJugador) return;
    clearRect(posJugador);
    clearRect(prePosJugador);}


function clearRect(indice){
    const x  = posX(indice ) - celda_t / 10;
    const y  = posY(indice ) + celda_t / 5;
    juego.clearRect(x - 1 ,y , - celda_t, - (celda_t + 1));}


function posY(indice){ return (~~(indice/10) + 1) * celda_t - celda_t / 5; }
function posX(indice){ return (indice - (~~(indice/10) * 10) + 1) * celda_t + celda_t / 10;}


function paintEvent(){
    if(!actualizado)
        mapa.forEach((char, idx) => {
            if(char == 'O' && posJugador == undefined) puntoDePartida = posJugador = idx;       
            juego.fillText(emojis[char], posX(idx), posY(idx) );});}


function paintEventPlayer(){
    if(victoryEvent()) paintScreenEvent();
    else { 
        if(posJugador != undefined && prePosJugador != posJugador){
            juego.fillText(emojis[mapa[prePosJugador]],posX(prePosJugador),posY(prePosJugador));

            if(!gameOverEvent()) juego.fillText(emojis['PLAYER'], posX(posJugador),posY(posJugador));
            else paintScreenEvent();}}}


function gameOverEvent(){
    if(vidas && mapa[posJugador] == 'X'){ 
        explociones.push(posJugador);
        --vidas;
        juego.fillText(emojis['BOMB_COLLISION'],posX(posJugador),posY(posJugador));
        posJugador = puntoDePartida;}
    if(gameFinishEvent()) {
        explociones = Array();
        return true;} /*juego terminado*/
    return false; /*continuar con el juego*/}


function paintEventExplosion(){
    if(!explociones.length) return;
    explociones.forEach((pos) =>{
        clearRect(pos);
        juego.fillText(emojis['BOMB_COLLISION'],posX(pos),posY(pos));});}


function victoryEvent(){
    if(mapa[posJugador] != 'I') return false;
    else if(nivel < map.length) ++nivel;
    explociones = Array();

    if(gameFinishEvent()) return true;/*juego terminado*/
    
    posJugador = prePosJugador = undefined;
    actualizado = false;
    update();
    return false;/*continuar con el juego*/}

function Victoria(){return nivel >= map.length;}

function gameFinishEvent(){ 
    if(!(nivel >= map.length) == (vidas <= 0) && !re_iniciar['exec']) 
        re_iniciar['exec'] = true;
    return !(nivel >= map.length) == (vidas <= 0);}


function paintScreenEvent(){
    if(!re_iniciar['exec']) return;
    paintScreen(Victoria() ? 'WIN': 'GAME_OVER');
    paintScreenFinal();}


function paintScreenFinal(){
    if(!re_iniciar['exec']) return;
    if(!actualizado) paintScreen(Victoria() ? 'WIN': 'GAME_OVER');
    const media = canvas_t / 2;
    const media_alta = media - font_t() + 1;
    const media_baja = media + font_t() - 1;

    let color, backgroundColor, text = 'continuar', y = media_alta;

    if(Victoria()){ color = '#ffd700';
                    backgroundColor = '#01433A';}

    else {          color = '#FF2F22';
                    backgroundColor = '#211A27';}


    
    if(re_iniciar['resetStart'] == 'no' || re_iniciar['select'] == 'exit'){
        if(actualizado)paintScreen(Victoria() ? 'WIN': 'GAME_OVER');
        text = Victoria() ? 'Has Ganado' : 'Game Over';
        y = media + (font_t() / 2);
        re_iniciar['select'] = 'exit';}

    else if(re_iniciar['resetStart'] == 'si') {
        resetStarEvent();
        return;}

    else{
        paintScreen(Victoria() ? 'WIN': 'GAME_OVER');
        paintRectText('', '' , backgroundColor,'center',media, media);
        paintRectText('', '' , backgroundColor,'center',media, media_baja);
        let siCa = color, siCb = backgroundColor;
        let noCa = color, noCb = backgroundColor;

        if(re_iniciar['select'] == 'no'){ noCa = backgroundColor;  noCb = color;}
        else                            { siCa = backgroundColor;  siCb = color;}

        paintRectText('no', noCa, noCb,'center',media + font_t(), media + (font_t() / 2));
        paintRectText('si', siCa, siCb,'center',media - font_t(), media + (font_t() / 2));}
    

    
    paintRectText('', '' , backgroundColor,'center',media, y);
    paintRectText(text, color , '','center',media, y);}



function paintScreen(emoji){
    juego.clearRect(0,0, canvas_t, canvas_t);
        mapa.forEach((char, idx) =>{
            if(char == 'X') char = emoji;
            juego.fillText(emojis[char],posX(idx),posY(idx));});}


function paintRectText(txt, color = '', backgroundColor = '', aling = 'center', x = 0,y = 0){
    if(aling) juego.textAlign = aling;
    if(backgroundColor){
        const rect = rectBgText(txt, x, y, aling);
        juego.fillStyle = backgroundColor;
        juego.fillRect(rect['x'], rect['y'], rect['width'], rect['height']);}
    if(color) juego.fillStyle = color;
    if(txt) juego.fillText(txt, x, y);
    juego.textAlign = 'end';}


function rectBgText(txt, x = 0, y = 0, align=''){
    const height = font_t();
    const width = txt == ''|| txt == ' ' ? canvas_t : (font_t()*.75)* txt.length;
    let px = x; let py = y - (height - (height / 6));
    if(align == 'center'){px = x - (width / 2);}
    else if(align != 'left')px = x - width;
    
    return {'width': width, 'height':height, 'x': px, 'y' : py};}

//signals:
window.addEventListener('keydown',keyMov);
btnArriba.addEventListener('click', movArriba);
btnAbajo.addEventListener('click', movAbajo);
btnDer.addEventListener('click', movDer);
btnIzq.addEventListener('click', movIzq);

//slots:
function keyMov(event){
    switch(event.keyCode){
        //enter     S        N        Y
        case 13: case 83: case 78: case 89:
        selectOptionEvent(event.keyCode); 
                              break;//selecionar opciones
        case 37: movIzq();    break;//izquierda
        case 38: movArriba(); break;//arriba
        case 39: movDer();    break; //derecha
        case 40: movAbajo();  break;//abajo
        default:              break;}}

function selectOptionEvent(key){
    if(key == 83 || key == 89) re_iniciar['resetStart'] = 'si';
    else if(key == 78) re_iniciar['resetStart'] = 'no';
    else re_iniciar['resetStart'] = re_iniciar['select'];
    update();}

function movArriba(){
    prePosJugador = posJugador;
    posJugador -= 10;
    if(posJugador < 0) posJugador = prePosJugador;
    update();}


function movAbajo(){
    prePosJugador = posJugador;
    posJugador += 10;
    if(posJugador >= 100) posJugador = prePosJugador;
    update();}


function movDer(){
    if(re_iniciar['exec'])  re_iniciar['select'] = 'no';
    else{
        prePosJugador = posJugador;
        const pered = (~~(posJugador / 10)) *10 + 10;
        ++posJugador;
        if(posJugador >= pered) posJugador = prePosJugador;}
    update();}


function movIzq(){
    if(re_iniciar['exec'])  re_iniciar['select'] = 'si';
    else{
        prePosJugador = posJugador;
        const pered  = ~~(posJugador /10) * 10; 
        --posJugador;
        if(posJugador < pered) posJugador = prePosJugador;}
    update();}

Jovanny Ruiz

student•

Tio pero que pasao

Aaron Santiago Loyo Zabala

student•

Es lo mas hermoso que he visto en mi vida

Tommy Toala Cox

student•

Muy buena clase, logre optimizar mi codigo con lo del undifined. Pues antes yo habia creado

una propiedad llamada doorPostition
Le daba igual los valores iniciales, donde inicia la puerta
si habia colision, le decia que me iguale la posicion del personaje, siempre y cuando no sea undefined, con la de la puerta, y pues asi ya funcionaba

Luego de eso, ya solo con lo del undefined, borre todo lo anterior, ahorrandome muchas lineas

Edgardo Luis Jimenez Nuñez

student•

Asi es, yo tambien lo habia hecho igual, creo que con la version de Juan el codigo que mas legible y mas facil de manenter.

Angel David Velasco Bonifaz

student•

Excelente clase, me gusta la solucion de solo poner los playerPosicion en undefined

Frandel Corporan Rodríguez

student•

jajaj x2 mi solicion era tan compleja que cuando vi la de juancho quede asi 🤡

Himar Del rio plata

student•

Me encanta este tipo de mini cursos súper prácticos y súper enfocados en aprender y trabajar. Siento que estoy aprendiendo un montón. Gracias Platzi 💚

Frandel Corporan Rodríguez

student•

mini?

Edgardo Luis Jimenez Nuñez

student•

Creo que con esta clase me quedo una leccion y es no tratar de buscar soluciones complejas, sino mas bien tratar de entender lo que llevo y poder aplicarlo para resolverlo de una manera legible y facil de mantener.

Abigail Nahomi Chávez Lozano

student•

Uno complicándose más la vida para una solución tan sencilla. Hay que ver que es lo que ya tenemos y utilizarlo, así nos ahorramos lineas de código y hacemos más simples las cosas 😁😁

Raúl Adolfo Sánchez Rodríguez

student•

Incorporar sistema de vidas:

Resultado
Paso-a-paso

Fabian Camilo Huertas Suarez

student•

Gracias me sirvieron tus notas 👍

Brad Neydan Velarde Fabian

student•

muy buena clase la verdad, se entendió todo muy bien

Néstor Raúl Guzmán Díaz

student•

Di tantas vueltas hasta guardando la posicion inicial de la partida y despeus reasignandola y nada, y hasta las teorias mas rebuscadas hahaha no cai en cuenta para resolverlo tan facil como reniciarlos a undefined xD

Raúl Adolfo Sánchez Rodríguez

student•

Incorporar fuego en colisiones 🔥🔥:

Resultado
Paso a paso:

Maria Soledad Lanfranconi

student•

yo hice esto y funciono, me vuelve a la posicion de la puerta:

function gameOver() {
    playerPosition.x = 0
    playerPosition.y = 0
    startGame()
}

Aaron Santiago Loyo Zabala

student•

Messirve

Frandel Corporan Rodríguez

student•

eso es porque el 0 pertenece a los valores llamados falsy que son undefined, null, false, ’ ’ , NaN y por supuesto el 0

Yordy Leonardo Almonte Ruiz

student•

Buenas quisiera que me ayudaran con el problema que esta presentando mi juego. Antes de renderizar el canvas funcion que se deberia de ejecutar para mostrar que el jugador termino todos los niveles se ejecuta, dejare mi codigo abajo:

const canvas = document.getElementById('game');
const game = canvas.getContext('2d');

let btnUp = document.getElementById('up');
let btnLeft = document.getElementById('left');
let btnRight = document.getElementById('right');
let btnDown = document.getElementById('down');

let canvasSize;
let elementsSize;
let level = 0;

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

const goal = {
  x: undefined,
  y: undefined,
}

let enemies = [];

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

window.addEventListener('keydown', move);
btnUp.addEventListener('click', moveUp);
btnLeft.addEventListener('click', moveLeft);
btnRight.addEventListener('click', moveRight);
btnDown.addEventListener('click', moveDown);



function setCanvasSize() {
  if (window.innerHeight > window.innerWidth) {
    canvasSize = window.innerWidth * 0.8;
  } else {
    canvasSize = window.innerHeight * 0.8;
  } 

  canvas.setAttribute('width', canvasSize);
  canvas.setAttribute('height', canvasSize);
  elementsSize = canvasSize / 10;

  startGame();
}



function startGame() {
  const map = maps[level];

  game.font = elementsSize + 'px Verdana';
  game.textAlign = 'end';

  if (!map) {
    return win();
  }

  const mapRows = map.trim().split('\n');
  const mapCols = mapRows.map(row => row.trim().split(''));

  enemies = [];
  game.clearRect(0,0,canvasSize,canvasSize);

  mapCols.forEach((row, rowI) => {
    row.forEach((col, colI) => {
      const emoji = emojis[col];
      const x = elementsSize * (colI + 1);
      const y = elementsSize * (rowI + 1);
      
      if (col == 'O') {
        if (!position.x && !position.y) {
          position.x = x;
          position.y = y;
        }
      } else if (col == "I") {
        goal.x = x;
        goal.y = y;
      } else if (col == 'X') {
        enemies.push({
          x: x,
          y: y,
        });
      }
      
      game.fillText(emoji, x, y);
    });
  });

  movePlayer();
};



function win() {
  console.log('Felicidades, terminaste el juego!!');
}

function levelWin() {
  console.log('Nivel Superado!');
  level ++;
  startGame();
}

function levelFail() {
  console.log('Chocaste con una bomba!');
}



function movePlayer() {
  const goalCollisionX = position.x.toFixed(3) == goal.x.toFixed(3);
  const goalCollisionY = position.y.toFixed(3) == goal.y.toFixed(3);
  const goalCollision = goalCollisionX && goalCollisionY;

  const enemyCollision = enemies.find(enemy => {
    const enemyCollisionX = position.x.toFixed(5) == enemy.x.toFixed(5);
    const enemyCollisionY = position.y.toFixed(5) == enemy.y.toFixed(5);
    return enemyCollisionX && enemyCollisionY;
  });

  // if (goalCollision) levelWin();
  // if (enemyCollision) levelFail();


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

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

function moveUp() {
  if ((position.y - elementsSize) < elementsSize) console.log('OUT');
  else position.y -= elementsSize, startGame();
}

function moveLeft() {
  if ((position.x - elementsSize) < elementsSize) console.log('OUT');
  else position.x -= elementsSize, startGame();
}

function moveRight() {
  if ((position.x + elementsSize) > canvasSize) console.log('OUT');
  else  position.x += elementsSize, startGame();
  
}

function moveDown() {
  if ((position.y + elementsSize) > canvasSize) console.log('OUT');
  else position.y += elementsSize, startGame();
}

Brandon Cortes Rivera

student•

Hola Yordy esoero pudieras solucionar tu problema mira detecte que el error esta en la línea 25, ya que estas llamando a startGamey no setCanvasSize ( cómo debería de ser lo correcto.

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

Esto sería lo correcto

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

Saludos.

Mauricio Combariza

student•

A mi el game Over se me estaba complicando, así que decidi resetear el juego cuando perdia y me soluciono mi problema.


function restartPage() {
  location.reload();
}

`function gameOver() {
  console.log('Perdiste el juego definitivamente');
  restartPage()
}e>

Matias SANCHEZ

student•

Hola alguien podria ayudarme con el problema de abajo del canvas que no se ven por completo los elementos?

Juan Castro

teacher•

Mati, en se caso habría que restarle unos cuantos pixeles a la operación con la que calculas la posición de cada elemento :eyes:

Cecilia Mansilla

student•

A mi me sigue saliendo el error en la consola :(

Platzi

student•

Es posible que el error persista debido a otro problema. Sería necesario revisar el código y la consola para identificar la causa exacta del error.

Andres Montes

student•

yo realice ese codigo de esta manera

function repeatLevel(){
    playerPositions.x = undefined
    playerPositions.y = undefined
    lives--
    startGame()
    if (lives == 0) {
        location.reload()
    }
}

Raúl Adolfo Sánchez Rodríguez

student•

Mi resultado del sistema de vidas:

Alejandro Ramos

student•

Por intentar hacerlo a mi manera no había continuado para la parte en que reseteabamos las vidas XD

Ricardo Alfonso Chavez Vilcapoma

student•

Le agregué eso.

Juan camilo piedrahita londoño

student•

Cuando el Player ya no tiene super poderes y no puede pasar sobre las bombas😆

//contect
const canvas = document.querySelector('#game');
const btnArriba = document.querySelector('#arriba');
const btnAbajo = document.querySelector('#abajo');
const btnDer = document.querySelector('#derecha');
const btnIzq = document.querySelector('#izquierda');

const juego  = canvas.getContext('2d');

//signals: 
window.addEventListener('load', resizeEvent);
window.addEventListener('resize', resizeEvent);


let posJugador     = undefined; let mapa     = Array();  let nivel = 0;
let prePosJugador  = undefined; let celda_t  = 0;        let nivel_actual = undefined;
let puntoDePartida = Number(0); let canvas_t = 0;        var actualizado  = Boolean(false);
let explociones    = Array();   let vidas    = 3;        const re_iniciar = {'select': 'si', 
                                                                             'resetStart': 'indeciso',
                                                                             'exec' : false};

function resizeEvent(){
    actualizado = false;
    canvas_t = (window.innerWidth < window.innerHeight ? window.innerWidth : window.innerHeight) *.75 ;
    canvas.setAttribute('width', canvas_t);
    canvas.setAttribute('height',canvas_t);
    celda_t = canvas_t / 10;
    juego.textAlign='end';
    juego.font = font_t() +'px arial';
    update();}

function font_t(){ return celda_t - celda_t / 10;}

function resetStarEvent(){
    posJugador = prePosJugador = undefined; 
    nivel = 0;
    nivel_actual = undefined;
    puntoDePartida = 0;
    vidas = 3;
    actualizado = false;
    explociones = Array();
    re_iniciar['select'] = 'si';
    re_iniciar['exec'] = false;
    re_iniciar['resetStart'] = 'indeciso';
    update();}


function update(){
    if(re_iniciar['exec']){paintScreenFinal(); return;}

    cargarMapa();
    clear();
    paintEvent();
    paintEventPlayer();
    paintEventExplosion();
    actualizado = true;}


function cargarMapa(){
    if(nivel_actual == nivel || Victoria()) return;
    nivel_actual = nivel;
    mapa = map[nivel].match(/[IOX-]/g);}


function clear(){
    if(!actualizado) {
        juego.clearRect(0,0, canvas_t, canvas_t);
        return;}

    if(posJugador == prePosJugador) return;
    clearRect(posJugador);
    clearRect(prePosJugador);}


function clearRect(indice){
    const x  = posX(indice ) - celda_t / 10;
    const y  = posY(indice ) + celda_t / 5;
    juego.clearRect(x - 1 ,y , - celda_t, - (celda_t + 1));}


function posY(indice){ return (~~(indice/10) + 1) * celda_t - celda_t / 5; }
function posX(indice){ return (indice - (~~(indice/10) * 10) + 1) * celda_t + celda_t / 10;}


function paintEvent(){
    if(!actualizado)
        mapa.forEach((char, idx) => {
            if(char == 'O' && posJugador == undefined) puntoDePartida = posJugador = idx;       
            juego.fillText(emojis[char], posX(idx), posY(idx) );});}


function paintEventPlayer(){
    if(victoryEvent()) paintScreenEvent();
    else { 
        if(posJugador != undefined && prePosJugador != posJugador){
            juego.fillText(emojis[mapa[prePosJugador]],posX(prePosJugador),posY(prePosJugador));

            if(!gameOverEvent()) juego.fillText(emojis['PLAYER'], posX(posJugador),posY(posJugador));
            else paintScreenEvent();}}}


function gameOverEvent(){
    if(vidas && mapa[posJugador] == 'X'){ 
        explociones.push(posJugador);
        --vidas;
        juego.fillText(emojis['BOMB_COLLISION'],posX(posJugador),posY(posJugador));
        posJugador = puntoDePartida;}
    if(gameFinishEvent()) {
        explociones = Array();
        return true;} /*juego terminado*/
    return false; /*continuar con el juego*/}


function paintEventExplosion(){
    if(!explociones.length) return;
    explociones.forEach((pos) =>{
        clearRect(pos);
        juego.fillText(emojis['BOMB_COLLISION'],posX(pos),posY(pos));});}


function victoryEvent(){
    if(mapa[posJugador] != 'I') return false;
    else if(nivel < map.length) ++nivel;
    explociones = Array();

    if(gameFinishEvent()) return true;/*juego terminado*/
    
    posJugador = prePosJugador = undefined;
    actualizado = false;
    update();
    return false;/*continuar con el juego*/}

function Victoria(){return nivel >= map.length;}

function gameFinishEvent(){ 
    if(!(nivel >= map.length) == (vidas <= 0) && !re_iniciar['exec']) 
        re_iniciar['exec'] = true;
    return !(nivel >= map.length) == (vidas <= 0);}


function paintScreenEvent(){
    if(!re_iniciar['exec']) return;
    paintScreen(Victoria() ? 'WIN': 'GAME_OVER');
    paintScreenFinal();}


function paintScreenFinal(){
    if(!re_iniciar['exec']) return;
    if(!actualizado) paintScreen(Victoria() ? 'WIN': 'GAME_OVER');
    const media = canvas_t / 2;
    const media_alta = media - font_t() + 1;
    const media_baja = media + font_t() - 1;

    let color, backgroundColor, text = 'continuar', y = media_alta;

    if(Victoria()){ color = '#ffd700';
                    backgroundColor = '#01433A';}

    else {          color = '#FF2F22';
                    backgroundColor = '#211A27';}


    
    if(re_iniciar['resetStart'] == 'no' || re_iniciar['select'] == 'exit'){
        if(actualizado)paintScreen(Victoria() ? 'WIN': 'GAME_OVER');
        text = Victoria() ? 'Has Ganado' : 'Game Over';
        y = media + (font_t() / 2);
        re_iniciar['select'] = 'exit';}

    else if(re_iniciar['resetStart'] == 'si') {
        resetStarEvent();
        return;}

    else{
        paintScreen(Victoria() ? 'WIN': 'GAME_OVER');
        paintRectText('', '' , backgroundColor,'center',media, media);
        paintRectText('', '' , backgroundColor,'center',media, media_baja);
        let siCa = color, siCb = backgroundColor;
        let noCa = color, noCb = backgroundColor;

        if(re_iniciar['select'] == 'no'){ noCa = backgroundColor;  noCb = color;}
        else                            { siCa = backgroundColor;  siCb = color;}

        paintRectText('no', noCa, noCb,'center',media + font_t(), media + (font_t() / 2));
        paintRectText('si', siCa, siCb,'center',media - font_t(), media + (font_t() / 2));}
    

    
    paintRectText('', '' , backgroundColor,'center',media, y);
    paintRectText(text, color , '','center',media, y);}



function paintScreen(emoji){
    juego.clearRect(0,0, canvas_t, canvas_t);
        mapa.forEach((char, idx) =>{
            if(char == 'X') char = emoji;
            juego.fillText(emojis[char],posX(idx),posY(idx));});}


function paintRectText(txt, color = '', backgroundColor = '', aling = 'center', x = 0,y = 0){
    if(aling) juego.textAlign = aling;
    if(backgroundColor){
        const rect = rectBgText(txt, x, y, aling);
        juego.fillStyle = backgroundColor;
        juego.fillRect(rect['x'], rect['y'], rect['width'], rect['height']);}
    if(color) juego.fillStyle = color;
    if(txt) juego.fillText(txt, x, y);
    juego.textAlign = 'end';}


function rectBgText(txt, x = 0, y = 0, align=''){
    const height = font_t();
    const width = txt == ''|| txt == ' ' ? canvas_t : (font_t()*.75)* txt.length;
    let px = x; let py = y - (height - (height / 6));
    if(align == 'center'){px = x - (width / 2);}
    else if(align != 'left')px = x - width;
    
    return {'width': width, 'height':height, 'x': px, 'y' : py};}

//signals:
window.addEventListener('keydown',keyMov);
btnArriba.addEventListener('click', movArriba);
btnAbajo.addEventListener('click', movAbajo);
btnDer.addEventListener('click', movDer);
btnIzq.addEventListener('click', movIzq);

//slots:
function keyMov(event){
    switch(event.keyCode){
        //enter     S        N        Y
        case 13: case 83: case 78: case 89:
        selectOptionEvent(event.keyCode); 
                              break;//selecionar opciones
        case 37: movIzq();    break;//izquierda
        case 38: movArriba(); break;//arriba
        case 39: movDer();    break; //derecha
        case 40: movAbajo();  break;//abajo
        default:              break;}}

function selectOptionEvent(key){
    if(key == 83 || key == 89) re_iniciar['resetStart'] = 'si';
    else if(key == 78) re_iniciar['resetStart'] = 'no';
    else re_iniciar['resetStart'] = re_iniciar['select'];
    update();}

function movArriba(){
    prePosJugador = posJugador;
    posJugador -= 10;
    if(posJugador < 0) posJugador = prePosJugador;
    update();}


function movAbajo(){
    prePosJugador = posJugador;
    posJugador += 10;
    if(posJugador >= 100) posJugador = prePosJugador;
    update();}


function movDer(){
    if(re_iniciar['exec'])  re_iniciar['select'] = 'no';
    else{
        prePosJugador = posJugador;
        const pered = (~~(posJugador / 10)) *10 + 10;
        ++posJugador;
        if(posJugador >= pered) posJugador = prePosJugador;}
    update();}


function movIzq(){
    if(re_iniciar['exec'])  re_iniciar['select'] = 'si';
    else{
        prePosJugador = posJugador;
        const pered  = ~~(posJugador /10) * 10; 
        --posJugador;
        if(posJugador < pered) posJugador = prePosJugador;}
    update();}

const canvas = document.getElementById('game');
const game = canvas.getContext('2d');

let btnUp = document.getElementById('up');
let btnLeft = document.getElementById('left');
let btnRight = document.getElementById('right');
let btnDown = document.getElementById('down');

let canvasSize;
let elementsSize;
let level = 0;

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

const goal = {
  x: undefined,
  y: undefined,
}

let enemies = [];

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

window.addEventListener('keydown', move);
btnUp.addEventListener('click', moveUp);
btnLeft.addEventListener('click', moveLeft);
btnRight.addEventListener('click', moveRight);
btnDown.addEventListener('click', moveDown);



function setCanvasSize() {
  if (window.innerHeight > window.innerWidth) {
    canvasSize = window.innerWidth * 0.8;
  } else {
    canvasSize = window.innerHeight * 0.8;
  } 

  canvas.setAttribute('width', canvasSize);
  canvas.setAttribute('height', canvasSize);
  elementsSize = canvasSize / 10;

  startGame();
}



function startGame() {
  const map = maps[level];

  game.font = elementsSize + 'px Verdana';
  game.textAlign = 'end';

  if (!map) {
    return win();
  }

  const mapRows = map.trim().split('\n');
  const mapCols = mapRows.map(row => row.trim().split(''));

  enemies = [];
  game.clearRect(0,0,canvasSize,canvasSize);

  mapCols.forEach((row, rowI) => {
    row.forEach((col, colI) => {
      const emoji = emojis[col];
      const x = elementsSize * (colI + 1);
      const y = elementsSize * (rowI + 1);
      
      if (col == 'O') {
        if (!position.x && !position.y) {
          position.x = x;
          position.y = y;
        }
      } else if (col == "I") {
        goal.x = x;
        goal.y = y;
      } else if (col == 'X') {
        enemies.push({
          x: x,
          y: y,
        });
      }
      
      game.fillText(emoji, x, y);
    });
  });

  movePlayer();
};



function win() {
  console.log('Felicidades, terminaste el juego!!');
}

function levelWin() {
  console.log('Nivel Superado!');
  level ++;
  startGame();
}

function levelFail() {
  console.log('Chocaste con una bomba!');
}



function movePlayer() {
  const goalCollisionX = position.x.toFixed(3) == goal.x.toFixed(3);
  const goalCollisionY = position.y.toFixed(3) == goal.y.toFixed(3);
  const goalCollision = goalCollisionX && goalCollisionY;

  const enemyCollision = enemies.find(enemy => {
    const enemyCollisionX = position.x.toFixed(5) == enemy.x.toFixed(5);
    const enemyCollisionY = position.y.toFixed(5) == enemy.y.toFixed(5);
    return enemyCollisionX && enemyCollisionY;
  });

  // if (goalCollision) levelWin();
  // if (enemyCollision) levelFail();


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

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

function moveUp() {
  if ((position.y - elementsSize) < elementsSize) console.log('OUT');
  else position.y -= elementsSize, startGame();
}

function moveLeft() {
  if ((position.x - elementsSize) < elementsSize) console.log('OUT');
  else position.x -= elementsSize, startGame();
}

function moveRight() {
  if ((position.x + elementsSize) > canvasSize) console.log('OUT');
  else  position.x += elementsSize, startGame();
  
}

function moveDown() {
  if ((position.y + elementsSize) > canvasSize) console.log('OUT');
  else position.y += elementsSize, startGame();
}

Derrota: perdiendo vidas

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?