I was wondering if anyone would be able to help me with the game that I am creating on P5.JS? I am trying to create lives as a feature on this game however whenever I die in a canyon it takes all lives and does not take just one life and reset the game as it should. Any advice would be really helpful.
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;
}
}
I have added the code and also below is what i was working on.
https://editor.p5js.org/conorwykes/present/zvxNtkcy
Thanks in advance
I believe your error is here:
function checkPlayerDie()
{
console.log(lives);
if(gameChar_y > height)
{
lives = true;
lives = lives -= 1;
}
if(lives == true)
{
startGame;
}
}
Specifically these two lines:
lives = true;
lives = lives -= 1;
I assume your intention is for lives
to be an integer value counting the quantity of remaining lives of the character. However, you're changing the value to a boolean true
value, essentially discarding any quantity that existed. Thus, because true - 1
results in 0
you've immediately lost all existing lives.
I think you'd also want to change the if
condition below to if (lives > 0)
, if I'm understanding your logic correctly.
Also, while this isn't an error, I'd suggest altering the next line, lives = lives -= 1
. Here you're being redundant because you're combining the Assignment Operator with the Substraction Assignment operator. You should change this to either just lives -= 1;
or lives = lives - 1;
.
EDIT:
I just ran your code, and also noticed that, in order for it to work correctly, you need to put the second if
statement within the first if
statement. This is the edit I made that results in it working correctly:
function checkPlayerDie()
{
console.log(lives);
if(gameChar_y > height)
{
lives -= 1;
if(lives > 0)
{
startGame();
}
}
}