Как добавить «жизни» в мою игру, используя P5. JS? - PullRequest
2 голосов
/ 16 марта 2020

Мне было интересно, сможет ли кто-нибудь помочь мне с игрой, которую я создаю на P5. JS? Я пытаюсь создать жизнь как особенность этой игры, однако всякий раз, когда я делаю ie в каньоне, это отнимает все жизни, а не одну жизнь и перезагружает игру, как следует. Любой совет будет очень полезен.


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

Я добавил код, а также ниже приведу то, над чем я работал.

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

Спасибо заранее

1 Ответ

2 голосов
/ 16 марта 2020

Я полагаю, что ваша ошибка здесь:

function checkPlayerDie()
{   

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

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

В частности, эти две строки:

lives = true;
lives = lives -= 1;

Я предполагаю, что вы хотите, чтобы lives было целочисленным значением, считая количество оставшихся жизней персонажа. Однако вы изменяете значение на логическое значение true, по существу отбрасывая любое существующее количество. Таким образом, поскольку true - 1 приводит к 0, вы сразу же потеряли все существующие жизни.

Я думаю, вы также захотите изменить условие if ниже на if (lives > 0), если я правильно понимаю вашу логику c.

Кроме того, хотя это не ошибка, я бы предложил изменить следующую строку, lives = lives -= 1. Здесь вы избыточны, потому что объединяете Оператор присваивания с Оператор присваивания . Вы должны изменить это значение на lives -= 1; или lives = lives - 1;.

РЕДАКТИРОВАТЬ:

Я просто запустил ваш код, а также заметил, что для его правильной работы вам нужно поместить второй оператор if в первый оператор if. Это редактирование, которое я сделал, в результате он работает правильно:

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

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