¿Cómo puedo añadir "vidas" en mi juego utilizando P5.JS?

Conor Wykes:

Me preguntaba si alguien podría ayudarme con el juego que estoy creando en P5.JS? Estoy tratando de crear vidas como una característica de este juego sin embargo cada vez que muera en un cañón que toma todas las vidas y no tiene sólo una vida y reiniciar el juego como debería. Cualquier consejo sería realmente útil.

var gameChar_x;
var gameChar_y;
var floorPos_y;
var scrollPos;
var gameChar_world_x;

var isLeft;
var isRight;
var isFalling;
var isPlummeting;

var trees_x;
var clouds;
var mountains;
var collectables;
var canyon;

var game_score;
var flagpole;
var lives;

function setup()
{
    createCanvas(1024, 576);
    floorPos_y = height * 3/4;
    lives = 3;
    startGame();

}

function draw()
{
    background(100, 155, 255); // fill the sky blue

    noStroke();
    fill(0,155,0);
    rect(0, floorPos_y, width, height/4); // draw some green ground

    push();
    translate(scrollPos, 0);
    drawClouds();
    drawMountains();
    drawTrees();

    for(var i = 0; i < canyon.length; i++)
        {
            drawCanyon(canyon[i]);
            checkCanyon(canyon[i]);
        }
    // Draw collectable items.
    strokeWeight(1)
    for(var i = 0; i < collectables.length; i++)
        {
            if(!collectables[i].isFound)
                {
                    drawCollectable(collectables[i]);
                    checkCollectable(collectables[i]);
                }
        }

    renderFlagpole();

    checkPlayerDie();

    pop();

    // Draw game character.

    drawGameChar();

    fill(255, 0, 0);
    textSize(24);
    text("Lives: " + lives, width/8, 20);

    fill(0);
    noStroke();
    textSize(24);
    text("score: " + game_score, width/2, 20)
    textSize(12);



    // Logic to make the game character move or the background scroll.
    if(isLeft)
        {
            if(gameChar_x > width * 0.2)
            {
                gameChar_x -= 5;
            }
            else
            {
                scrollPos += 5;
            }
        }

    if(isRight)
        {
            if(gameChar_x < width * 0.8)
            {
                gameChar_x  += 5;
            }
            else
            {
                scrollPos -= 5; // negative for moving against the background
            }
        }

    // Logic to make the game character rise and fall.

    if(gameChar_y !== floorPos_y)
    {
        gameChar_y += 2
        isFalling = true;
    }
    else if(isFalling)
    {
        isFalling  = false;
    }

    if(flagpole.isReached == false)
    {
        checkFlagpole();
    }

    // Update real position of gameChar for collision detection.
    gameChar_world_x = gameChar_x - scrollPos;
}


// ---------------------
// Key control functions
// ---------------------

function keyPressed()
{
    if(keyCode == 37)
        {
            console.log("left arrow");
            isLeft = true;
        }
    else if(keyCode == 39)
        {
            console.log("right arrow");
            isRight = true;
        }

    if(keyCode == 32 && gameChar_y == floorPos_y)
        {
            console.log("jump")
            gameChar_y -=100;
        }

}

function keyReleased()
{

    if(keyCode == 37)
        {
            console.log("left arrow");
            isLeft = false;
        }
    else if(keyCode == 39)
        {
            console.log("right arrow");
            isRight = false;
        }

}


// ------------------------------
// Game character render function
// ------------------------------

// Function to draw the game character.

function drawGameChar()
{

    if(isLeft && isFalling)
        {
                // add your jumping-left code

            fill(255, 201, 169); //head
            ellipse(gameChar_x, gameChar_y - 55, 30, 40);

            fill(0); //back leg
            ellipse(gameChar_x + 10, gameChar_y - 20, 20, 10);

            fill(255, 201, 169); //back arm
            ellipse(gameChar_x + 12, gameChar_y - 35, 10, 10);

            fill(135, 206, 235); //body
            rect(gameChar_x-10, gameChar_y - 38, 20, 15);

            fill(0) //front  leg
            ellipse(gameChar_x - 10, gameChar_y - 20, 20, 10);

            fill(0) //eye
            ellipse(gameChar_x - 11, gameChar_y - 58, 2, 10);

            fill(255, 201, 169); //front arm
            ellipse(gameChar_x + 8, gameChar_y - 30, 10, 10);
        }
    else if(isRight && isFalling)
        {
                // add your jumping-right code
            fill(255, 201, 169); //head
            ellipse(gameChar_x, gameChar_y - 55, 30, 40);

            fill(0); //back leg
            ellipse(gameChar_x - 10, gameChar_y - 20, 20, 10);

            fill(255, 201, 169); //back arm
            ellipse(gameChar_x - 12, gameChar_y - 35, 10, 10);

            fill(135, 206, 235); //body
            rect(gameChar_x - 10, gameChar_y - 38, 20, 15);

            fill(0) //front  leg
            ellipse(gameChar_x + 10, gameChar_y - 20, 20, 10);

            fill(0) //eye
            ellipse(gameChar_x + 11, gameChar_y - 58, 2, 10);

            fill(255, 201, 169); //front arm
            ellipse(gameChar_x - 8, gameChar_y - 30, 10, 10);

        }
    else if(isLeft)
        {
                // add your walking left code
            fill(255, 201, 169); //head
            ellipse(gameChar_x, gameChar_y - 45, 30, 40);

            fill(0); //back leg
            ellipse(gameChar_x + 10, gameChar_y - 7, 20, 10);

            fill(255, 201, 169); //back arm
            ellipse(gameChar_x + 12, gameChar_y - 25, 10, 10);

            fill(135, 206, 235); //body
            rect(gameChar_x-10, gameChar_y - 28, 20, 20);

            fill(0) //front  leg
            ellipse(gameChar_x - 10, gameChar_y - 4, 20, 10);

            fill(0) //eye
            ellipse(gameChar_x - 11, gameChar_y - 48, 2, 10);

            fill(255, 201, 169); //front arm
            ellipse(gameChar_x - 13, gameChar_y - 16, 10, 10);
        }
    else if(isRight)
        {
                // add your walking right code
            fill(255, 201, 169); //head
            ellipse(gameChar_x, gameChar_y - 45, 30, 40);

            fill(0); //back leg
            ellipse(gameChar_x - 10, gameChar_y - 7, 20, 10);

            fill(255, 201, 169); //back arm
            ellipse(gameChar_x - 12, gameChar_y - 25, 10, 10);

            fill(135, 206, 235); //body
            rect(gameChar_x - 10, gameChar_y - 28, 20, 20);

            fill(0) //front  leg
            ellipse(gameChar_x + 10, gameChar_y - 4, 20, 10);

            fill(0) //eye
            ellipse(gameChar_x + 11, gameChar_y - 48, 2, 10);

            fill(255, 201, 169); //front arm
            ellipse(gameChar_x + 13, gameChar_y - 16, 10, 10);
        }
    else if(isFalling || isPlummeting)
        {
                // add your jumping facing forwards code
            fill(255, 201, 169);//head
            ellipse(gameChar_x, gameChar_y - 55, 40, 40);

            fill(135, 206, 235); //body
            rect(gameChar_x-13, gameChar_y - 38, 26, 20);

            fill(255, 201, 169); //arms
            ellipse(gameChar_x - 13, gameChar_y - 33, 10, 10);
            ellipse(gameChar_x + 18, gameChar_y - 70, 10, 10);

            fill(0) //legs
            ellipse(gameChar_x - 10, gameChar_y - 10, 20, 10);
            ellipse(gameChar_x + 10, gameChar_y - 17, 20, 10);

            fill(0) //eyes
            ellipse(gameChar_x - 8, gameChar_y - 58, 5, 10);
            ellipse(gameChar_x + 8, gameChar_y - 58, 5, 10);
        }
    else
        {
                // add your standing front facing code
            fill(255, 201, 169);
            ellipse(gameChar_x, gameChar_y - 45, 40, 40);

            fill(135, 206, 235);
            rect(gameChar_x-13, gameChar_y - 28, 26, 20);

            fill(255, 201, 169);
            ellipse(gameChar_x - 13, gameChar_y - 18, 10, 10);
            ellipse(gameChar_x + 13, gameChar_y - 18, 10, 10);

            fill(0)
            ellipse(gameChar_x - 10, gameChar_y - 5, 20, 10);
            ellipse(gameChar_x + 10, gameChar_y - 5, 20, 10);

            fill(0)
            ellipse(gameChar_x - 8, gameChar_y - 48, 5, 10);
            ellipse(gameChar_x + 8, gameChar_y - 48, 5, 10); 
            strokeWeight(0)

        }   
}

// ---------------------------
// Background render functions
// ---------------------------

// Function to draw cloud objects.
function drawClouds()
{
    for (var i = 0; i < clouds.length; i++)
        {
            fill(255,255,255);
            ellipse(clouds[i].pos_x,
                    clouds[i].pos_y, 70, 80);
            ellipse(clouds[i].pos_x + 30,
                    clouds[i].pos_y, 80, 100);
            ellipse(clouds[i].pos_x + 60, 
                    clouds[i].pos_y, 80, 100);
            ellipse(clouds[i].pos_x + 90,
                    clouds[i].pos_y, 70, 80);
        }
}
// Function to draw mountains objects.
function drawMountains()
{    
 for (var i = 0; i < mountains.length; i++)
    {   
    fill(120, 120, 120);
    triangle(mountains[i].pos_x,
             mountains[i].pos_y,
             mountains[i].pos_x + 270,
             mountains[i].pos_y - 326,
             mountains[i].pos_x + 410,
             mountains[i].pos_y);
    fill(255, 255, 255);
    triangle(mountains[i].pos_x + 310,
             mountains[i].pos_y - 247,
             mountains[i].pos_x + 267,
             mountains[i].pos_y - 326,
             mountains[i].pos_x + 270,
             mountains[i].pos_y - 266);

    triangle(mountains[i].pos_x + 280,
             mountains[i].pos_y - 266, 
             mountains[i].pos_x + 267,
             mountains[i].pos_y - 326,
             mountains[i].pos_x + 210,
             mountains[i].pos_y - 255);

    triangle(mountains[i].pos_x + 225, 
             mountains[i].pos_y - 267,
             mountains[i].pos_x + 260,
             mountains[i].pos_y - 247,
             mountains[i].pos_x + 300,
             mountains[i].pos_y - 267);
    }
}
// Function to draw trees objects.
function drawTrees()
{
    for (var i = 0; i < trees_x.length; i++)
    {
        fill(122, 31, 31); //tree
        rect(trees_x[i], treePos_y + 105, 35, 40);
        fill(34,139,34); 
        triangle(trees_x[i] + 80, 
                 treePos_y + 115,
                 trees_x[i] + 20, 
                 treePos_y + 45, 
                 trees_x[i] - 45, 
                 treePos_y + 115);
        triangle(trees_x[i] + 80, 
                 treePos_y + 75, 
                 trees_x[i] + 20, 
                 treePos_y - 5,
                 trees_x[i] - 45,
                 treePos_y + 75);
    }
}

// ---------------------------------
// Canyon render and check functions
// ---------------------------------

// Function to draw canyon objects.

function drawCanyon(t_canyon)
{
    fill(100, 155, 255);
    rect(t_canyon.pos_x, floorPos_y, t_canyon.width, 144);
}

// Function to check character is over a canyon.

function checkCanyon(t_canyon)
{
  if(gameChar_world_x > t_canyon.pos_x && gameChar_world_x < t_canyon.pos_x + 100)
               {
                    gameChar_y += 2
                    isFalling = true;
               }
}


// ----------------------------------
// Collectable items render and check functions
// ----------------------------------

// Function to draw collectable objects.

function drawCollectable(t_collectable)
{
    stroke(1);
    fill(255,215,0);
    ellipse(t_collectable.x_pos,
            t_collectable.y_pos - 20, 
            t_collectable.size, 
            t_collectable.size);

    ellipse(t_collectable.x_pos, 
            t_collectable.y_pos - 20, 
            t_collectable.size - 10, 
            t_collectable.size - 10);
    fill(0, 0, 0);
    text("$", t_collectable.x_pos - 3, 
              t_collectable.y_pos - 16);
}

// Function to check character has collected an item.

function checkCollectable(t_collectable)
{
   if(dist(gameChar_world_x, gameChar_y, 
      t_collectable.x_pos, t_collectable.y_pos - 20) < t_collectable.size) 
                {
                  t_collectable.isFound = true;
                    game_score += 1;
                }
}

function checkPlayerDie()
{   

    console.log(lives);
    if(gameChar_y > height)
    {
        lives = true;
        lives = lives -= 1;
    }    

    if(lives == true)
    {
        startGame;
    }
}

function startGame()
{
    gameChar_x = width/2;
    gameChar_y = floorPos_y;
    treePos_y = height/2;

    // Variable to control the background scrolling.
    scrollPos = 0;

    // Variable to store the real position of the gameChar in the game
    // world. Needed for collision detection.
    gameChar_world_x = gameChar_x - scrollPos;

    // Boolean variables to control the movement of the game character.
    isLeft = false;
    isRight = false;
    isFalling = false;
    isPlummeting = false;

    // Initialise arrays of scenery objects.

    trees_x = [25, 
               75, 
               125, 
               360, 
               410, 
               460, 
               800, 
               850, 
               900, 
               1240, 
               1290, 
               1340, 
               1680, 
               1730, 
               1780
              ];

    clouds = [
        {pos_x: 50, pos_y: 50},
        {pos_x: 300, pos_y: 70},
        {pos_x: 550, pos_y: 110},
        {pos_x: 800, pos_y: 70},
        {pos_x: 1000, pos_y: 50},
        {pos_x: 1250, pos_y: 70},
        {pos_x: 1500, pos_y: 110},
        {pos_x: 1750, pos_y: 50}
        ];

    mountains = [ 
        {pos_x: 75, pos_y: 432},
        {pos_x: 175, pos_y: 432},
        {pos_x: 775, pos_y: 432},
        {pos_x: 1675, pos_y: 432},
        {pos_x: 1975, pos_y: 432},
    ];

    collectables = [ 
        {x_pos: 566, y_pos: floorPos_y, size: 30, isFound: false},
        {x_pos: 700, y_pos: floorPos_y, size: 30, isFound: false},
        {x_pos: 1100, y_pos: floorPos_y, size: 30, isFound: false},
        {x_pos: 1900, y_pos: floorPos_y, size: 30, isFound: false}
    ];

    canyon = [
        {pos_x: 590, width: 100},
        {pos_x: 1450, width: 100}
        ];

    game_score = 0;

    flagpole = {isReached: false, x_pos: 2000}
}

function renderFlagpole()
{
    push();
    strokeWeight(5);
    stroke(255);
    line(flagpole.x_pos, floorPos_y, flagpole.x_pos, floorPos_y - 350);
    fill(255, 215, 0);
    noStroke();

    if(flagpole.isReached)
    {
        rect(flagpole.x_pos, floorPos_y - 50, 75, 50);
    }
    else
    {
        rect(flagpole.x_pos, floorPos_y - 350, 75, 50);  
    }
    pop();
}



function checkFlagpole()
{
    var d = abs(gameChar_world_x - flagpole.x_pos);

    if(d < 15)
    {
        flagpole.isReached = true;
    }
}

He añadido el código y también por debajo de lo que es el que estaba trabajando.

https://editor.p5js.org/conorwykes/present/zvxNtkcy

Gracias por adelantado

404 No encontrado :

Creo que su error es aquí:

function checkPlayerDie()
{   

    console.log(lives);
    if(gameChar_y > height)
    {
        lives = true;
        lives = lives -= 1;
    }    

    if(lives == true)
    {
        startGame;
    }
}

Específicamente estas dos líneas:

lives = true;
lives = lives -= 1;

Asumo que su intención es que livesal ser un valor entero contando la cantidad de vidas restantes del carácter. Sin embargo, se está cambiando el valor a un valor lógico truevalor, descartando esencialmente cualquier cantidad que existía. Por lo tanto, debido a true - 1los resultados en 0que han perdido inmediatamente todas las vidas existentes.

Creo que también querría cambiar la ifcondición siguiente para if (lives > 0), si estoy entendiendo la lógica correctamente.

Asimismo, si bien esto no es un error, me gustaría sugerir la alteración de la línea siguiente, lives = lives -= 1. Aquí estás siendo redundante porque usted está combinando la Asignación de operadora con el operador de asignación Substracción . Debe cambiar esto, ya sea solo lives -= 1;o lives = lives - 1;.

EDITAR:

Me acabo de encontrar su código, y también di cuenta de que, con el fin de que funcione correctamente, es necesario poner la segunda ifdeclaración dentro de la primera ifdeclaración. Esta es la edición que hice que se traduce en que funcione correctamente:

function checkPlayerDie()
{   
    console.log(lives);
    if(gameChar_y > height)
    {
        lives -= 1;

      if(lives > 0)
      {
          startGame();
      }
    }    
}