I am working on a simple game project on my studies, still not too good at it. I’ve tried to implement an “if-statement” that limited my game character movements inside the canyon so it could not go through the walls and find itself underground. I thought that it looks pretty good and functional but I still get information in the console that properties x_pos are undefined in line 160. Can someone smarter show me where is my problem? I suppose that I should somehow recall properties inside the if-statement but as far I’ve tried I just ruined everything and made it messier than this is now.
//The Game Project 5 - Bring it all together
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 treePos_y;
var collectables;
function setup() {
createCanvas(1024, 576);
floorPos_y = (height * 3) / 4;
gameChar_x = width / 2;
gameChar_y = floorPos_y;
treePos_y = floorPos_y - 150;
// 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 = [
100, 250, 500, 650, 950, 1390, 1560, 1840, 2130, 2450, 2900, 3100, 3380,
3500, 3710, 3900,
];
clouds = [{
x_pos: 120,
y_pos: 100
},
{
x_pos: 400,
y_pos: 150
},
{
x_pos: 600,
y_pos: 100
},
{
x_pos: 900,
y_pos: 150
},
{
x_pos: 600,
y_pos: 100
},
{
x_pos: 900,
y_pos: 150
},
{
x_pos: 1600,
y_pos: 100
},
{
x_pos: 1400,
y_pos: 150
},
{
x_pos: 1900,
y_pos: 150
},
{
x_pos: 2400,
y_pos: 150
},
{
x_pos: 2600,
y_pos: 100
},
{
x_pos: 2900,
y_pos: 150
},
{
x_pos: 3400,
y_pos: 150
},
{
x_pos: 3600,
y_pos: 100
},
{
x_pos: 3900,
y_pos: 150
},
];
mountains = [{
x_pos: 10,
y_pos: 432
},
{
x_pos: 400,
y_pos: 432
},
{
x_pos: 800,
y_pos: 432
},
{
x_pos: 1200,
y_pos: 432
},
{
x_pos: 1600,
y_pos: 432
},
{
x_pos: 1900,
y_pos: 432
},
{
x_pos: 2400,
y_pos: 432
},
{
x_pos: 2800,
y_pos: 432
},
{
x_pos: 3700,
y_pos: 432
},
];
canyons = [{
x_pos: 10,
width: 80
},
{
x_pos: 270,
width: 80
},
{
x_pos: 730,
width: 80
},
{
x_pos: 1010,
width: 80
},
{
x_pos: 1270,
width: 80
},
{
x_pos: 1730,
width: 80
},
{
x_pos: 2010,
width: 80
},
{
x_pos: 2270,
width: 80
},
{
x_pos: 2730,
width: 80
},
{
x_pos: 3010,
width: 80
},
{
x_pos: 3570,
width: 80
},
{
x_pos: 3730,
width: 80
},
];
collectables = [{
x_pos: 140,
y_pos: floorPos_y,
isFound: false
},
{
x_pos: 380,
y_pos: floorPos_y,
isFound: false
},
{
x_pos: 480,
y_pos: floorPos_y - 50,
isFound: false
},
{
x_pos: 670,
y_pos: floorPos_y - 50,
isFound: false
},
{
x_pos: 900,
y_pos: floorPos_y,
isFound: false
},
{
x_pos: 1250,
y_pos: floorPos_y - 50,
isFound: false
},
{
x_pos: 1400,
y_pos: floorPos_y,
isFound: false
},
{
x_pos: 1550,
y_pos: floorPos_y - 50,
isFound: false
},
{
x_pos: 1900,
y_pos: floorPos_y,
isFound: false
},
{
x_pos: 2500,
y_pos: floorPos_y,
isFound: false
},
{
x_pos: 2700,
y_pos: floorPos_y - 50,
isFound: false
},
{
x_pos: 2900,
y_pos: floorPos_y - 50,
isFound: false
},
{
x_pos: 3300,
y_pos: floorPos_y,
isFound: false
},
{
x_pos: 3540,
y_pos: floorPos_y - 50,
isFound: false
},
{
x_pos: 3850,
y_pos: floorPos_y,
isFound: false
},
];
}
function draw() {
background(100, 155, 255); // fill the sky blue
noStroke();
fill(240, 240, 240);
rect(0, floorPos_y, width, height / 4); // draw some green ground
push();
translate(scrollPos, 0);
// Draw clouds.
drawClouds();
// Draw mountains.
drawMountains();
// Draw trees.
drawTrees();
// Draw canyons.
for (var i = 0; i < canyons.length; i++) {
drawCanyon(canyons[i]);
checkCanyon(canyons[i]);
}
// Draw collectable items.
for (var i = 0; i < collectables.length; i++) {
if (collectables[i].isFound == false) {
drawCollectable(collectables[i]);
checkCollectable(collectables[i]);
}
}
pop();
// Draw game character.
drawGameChar();
//Logic to make the game character move or the background scroll.
if (isLeft == true) {
var spaceLeft = gameChar_x - (canyons[i].x_pos + 20);
var deltaX = gameChar_y <= floorPos_y ? 4 : Math.min(4, spaceLeft);
gameChar_x -= deltaX;
} else {
scrollPos += 5;
}
if (isRight == true) {
var spaceRight = canyons[i].x_pos + canyons[i].width - 20 - gameChar_x;
var deltaX = gameChar_y <= floorPos_y ? 4 : Math.min(4, spaceRight);
gameChar_x += deltaX;
} else {
scrollPos -= 5;
}
// Logic to make the game character rise and fall.
//jumping
if (gameChar_y <= floorPos_y) {
gameChar_y += 4;
isFalling = true;
} else {
isFalling = false;
}
// Update real position of gameChar for collision detection.
gameChar_world_x = gameChar_x - scrollPos;
}
// ---------------------
// Key control functions
// ---------------------
function keyPressed() {
console.log(keyCode);
if (keyCode == 37) {
isLeft = true;
}
if (keyCode == 39) {
isRight = true;
}
if (keyCode == 32 && gameChar_y <= floorPos_y + 5) {
gameChar_y -= 70;
}
}
function keyReleased() {
if (keyCode == 37) {
isLeft = false;
}
if (keyCode == 39) {
isRight = false;
}
}
// ------------------------------
// Game character render function
// ------------------------------
// Function to draw the game character.
function drawGameChar() {
// draw game character
if (isLeft && isFalling) {
// add your jumping-left code
fill(255);
stroke(1);
strokeWeight(1);
//lower body
ellipse(gameChar_x, gameChar_y - 20, 20, 20);
//legs
ellipse(gameChar_x - 6, gameChar_y - 7, 7, 7);
ellipse(gameChar_x - 12, gameChar_y - 14, 7, 7);
//upper body
ellipse(gameChar_x - 5, gameChar_y - 31, 15, 15);
//head
ellipse(gameChar_x - 9, gameChar_y - 46, 12, 17);
fill(0);
//button
ellipse(gameChar_x - 9, gameChar_y - 27, 3, 3);
//eye
ellipse(gameChar_x - 11, gameChar_y - 48, 2, 2);
stroke(116, 58, 8);
strokeWeight(2);
fill(116, 58, 8);
//"hair"
line(gameChar_x - 9, gameChar_y - 57, gameChar_x - 3, gameChar_y - 57);
line(gameChar_x - 9, gameChar_y - 56, gameChar_x - 3, gameChar_y - 62);
line(gameChar_x - 9, gameChar_y - 57, gameChar_x - 9, gameChar_y - 63);
//arm
line(gameChar_x - 6, gameChar_y - 30, gameChar_x - 20, gameChar_y - 35);
//nose
noStroke();
fill(255, 0, 0);
triangle(
gameChar_x - 13,
gameChar_y - 47,
gameChar_x - 23,
gameChar_y - 40,
gameChar_x - 13,
gameChar_y - 43
);
} else if (isRight && isFalling) {
// add your jumping-right code
fill(255);
stroke(1);
strokeWeight(1);
//lower body
ellipse(gameChar_x, gameChar_y - 20, 20, 20);
//legs
ellipse(gameChar_x + 6, gameChar_y - 7, 7, 7);
ellipse(gameChar_x + 12, gameChar_y - 14, 7, 7);
//upper body
ellipse(gameChar_x + 5, gameChar_y - 31, 15, 15);
//head
ellipse(gameChar_x + 9, gameChar_y - 46, 12, 17);
fill(0);
//button
ellipse(gameChar_x + 9, gameChar_y - 27, 3, 3);
//eye
ellipse(gameChar_x + 11, gameChar_y - 48, 2, 2);
stroke(116, 58, 8);
strokeWeight(2);
fill(116, 58, 8);
//"hair"
line(gameChar_x + 9, gameChar_y - 57, gameChar_x + 3, gameChar_y - 57);
line(gameChar_x + 9, gameChar_y - 56, gameChar_x + 3, gameChar_y - 62);
line(gameChar_x + 9, gameChar_y - 57, gameChar_x + 9, gameChar_y - 63);
//arm
line(gameChar_x + 6, gameChar_y - 30, gameChar_x + 20, gameChar_y - 35);
//nose
noStroke();
fill(255, 0, 0);
triangle(
gameChar_x + 13,
gameChar_y - 47,
gameChar_x + 23,
gameChar_y - 40,
gameChar_x + 13,
gameChar_y - 43
);
} else if (isLeft) {
// add your walking left code
fill(255);
stroke(1);
strokeWeight(1);
//lower body
ellipse(gameChar_x, gameChar_y - 13, 20, 20);
//legs
ellipse(gameChar_x, gameChar_y, 7, 7);
ellipse(gameChar_x - 12, gameChar_y - 7, 7, 7);
//upper body
ellipse(gameChar_x, gameChar_y - 26, 15, 15);
//head
ellipse(gameChar_x, gameChar_y - 40, 12, 17);
fill(0);
//button
ellipse(gameChar_x - 4, gameChar_y - 23, 3, 3);
//eye
ellipse(gameChar_x - 2, gameChar_y - 42, 2, 2);
stroke(116, 58, 8);
strokeWeight(2);
fill(116, 58, 8);
//"hair"
line(gameChar_x, gameChar_y - 51, gameChar_x - 5, gameChar_y - 56);
line(gameChar_x, gameChar_y - 49, gameChar_x, gameChar_y - 56);
line(gameChar_x, gameChar_y - 51, gameChar_x + 5, gameChar_y - 56);
//arm
line(gameChar_x, gameChar_y - 27, gameChar_x, gameChar_y - 15);
//nose
noStroke();
fill(255, 0, 0);
triangle(
gameChar_x - 6,
gameChar_y - 39,
gameChar_x - 17,
gameChar_y - 33,
gameChar_x - 6,
gameChar_y - 36
);
} else if (isRight) {
// add your walking right code
fill(255);
stroke(1);
strokeWeight(1);
//lower body
ellipse(gameChar_x, gameChar_y - 13, 20, 20);
//legs
ellipse(gameChar_x, gameChar_y, 7, 7);
ellipse(gameChar_x + 12, gameChar_y - 7, 7, 7);
//upper body
ellipse(gameChar_x, gameChar_y - 26, 15, 15);
//head
ellipse(gameChar_x, gameChar_y - 40, 12, 17);
fill(0);
//button
ellipse(gameChar_x + 4, gameChar_y - 23, 3, 3);
//eye
ellipse(gameChar_x + 2, gameChar_y - 42, 2, 2);
stroke(116, 58, 8);
strokeWeight(2);
fill(116, 58, 8);
//"hair"
line(gameChar_x, gameChar_y - 51, gameChar_x - 5, gameChar_y - 56);
line(gameChar_x, gameChar_y - 49, gameChar_x, gameChar_y - 56);
line(gameChar_x, gameChar_y - 51, gameChar_x + 5, gameChar_y - 56);
//arm
line(gameChar_x, gameChar_y - 27, gameChar_x, gameChar_y - 15);
//nose
noStroke();
fill(255, 0, 0);
triangle(
gameChar_x + 6,
gameChar_y - 39,
gameChar_x + 17,
gameChar_y - 33,
gameChar_x + 6,
gameChar_y - 36
);
} else if (isFalling || isPlummeting) {
// add your jumping facing forwards code
fill(255);
stroke(1);
strokeWeight(1);
//lower body
ellipse(gameChar_x, gameChar_y - 23, 20, 20);
//legs
ellipse(gameChar_x - 7, gameChar_y - 13, 7, 7);
ellipse(gameChar_x + 7, gameChar_y - 13, 7, 7);
//upper body
ellipse(gameChar_x, gameChar_y - 36, 15, 15);
//head
ellipse(gameChar_x, gameChar_y - 50, 12, 17);
fill(0);
//button
ellipse(gameChar_x, gameChar_y - 33, 3, 3);
//eyes
ellipse(gameChar_x - 2, gameChar_y - 52, 2, 2);
ellipse(gameChar_x + 2, gameChar_y - 52, 2, 2);
stroke(116, 58, 8);
strokeWeight(2);
fill(116, 58, 8);
//"hair"
line(gameChar_x, gameChar_y - 61, gameChar_x - 5, gameChar_y - 66);
line(gameChar_x, gameChar_y - 59, gameChar_x, gameChar_y - 66);
line(gameChar_x, gameChar_y - 61, gameChar_x + 5, gameChar_y - 66);
//arms
line(gameChar_x - 7, gameChar_y - 37, gameChar_x - 15, gameChar_y - 57);
line(gameChar_x + 7, gameChar_y - 37, gameChar_x + 15, gameChar_y - 57);
//nose
noStroke();
fill(255, 0, 0);
triangle(
gameChar_x - 2,
gameChar_y - 49,
gameChar_x - 10,
gameChar_y - 43,
gameChar_x + 2,
gameChar_y - 49
);
} else {
// add your standing front facing code
fill(255);
stroke(1);
strokeWeight(1);
//lower body
ellipse(gameChar_x, gameChar_y - 13, 20, 20);
//legs
ellipse(gameChar_x - 5, gameChar_y, 7, 7);
ellipse(gameChar_x + 5, gameChar_y, 7, 7);
//upper body
ellipse(gameChar_x, gameChar_y - 26, 15, 15);
//head
ellipse(gameChar_x, gameChar_y - 40, 12, 17);
fill(0);
//button
ellipse(gameChar_x, gameChar_y - 23, 3, 3);
//eyes
ellipse(gameChar_x - 2, gameChar_y - 42, 2, 2);
ellipse(gameChar_x + 2, gameChar_y - 42, 2, 2);
stroke(116, 58, 8);
strokeWeight(2);
fill(116, 58, 8);
//"hair"
line(gameChar_x, gameChar_y - 51, gameChar_x - 5, gameChar_y - 56);
line(gameChar_x, gameChar_y - 49, gameChar_x, gameChar_y - 56);
line(gameChar_x, gameChar_y - 51, gameChar_x + 5, gameChar_y - 56);
//arms
line(gameChar_x - 7, gameChar_y - 27, gameChar_x - 15, gameChar_y - 17);
line(gameChar_x + 7, gameChar_y - 27, gameChar_x + 15, gameChar_y - 17);
//nose
noStroke();
fill(255, 0, 0);
triangle(
gameChar_x - 2,
gameChar_y - 39,
gameChar_x - 10,
gameChar_y - 33,
gameChar_x + 2,
gameChar_y - 39
);
}
}
// ---------------------------
// Background render functions
// ---------------------------
// Function to draw cloud objects.
function drawClouds() {
for (var i = 0; i < mountains.length; i++) {
//cloud 1
fill(224, 224, 224, 210);
ellipse(clouds[i].x_pos, clouds[i].y_pos, 100 * 0.8, 100 * 0.8);
ellipse(
clouds[i].x_pos + 50 * 0.8,
clouds[i].y_pos + 10 * 0.8,
80 * 0.8,
80 * 0.8
);
ellipse(
clouds[i].x_pos - 50 * 0.8,
clouds[i].y_pos + 10 * 0.8,
80 * 0.8,
80 * 0.8
);
ellipse(
clouds[i].x_pos - 90 * 0.8,
clouds[i].y_pos + 20 * 0.8,
60 * 0.8,
60 * 0.8
);
ellipse(
clouds[i].x_pos + 90 * 0.8,
clouds[i].y_pos + 20 * 0.8,
60 * 0.8,
60 * 0.8
);
//cloud 2
fill(154, 153, 161, 210);
ellipse(
clouds[i].x_pos - 100 * 0.8,
clouds[i].y_pos + 30 * 0.8,
50 * 0.8,
50 * 0.8
);
ellipse(
clouds[i].x_pos - 125 * 0.8,
clouds[i].y_pos + 40 * 0.8,
30 * 0.8,
30 * 0.8
);
ellipse(
clouds[i].x_pos - 75 * 0.8,
clouds[i].y_pos + 40 * 0.8,
30 * 0.8,
30 * 0.8
);
//cloud 3
ellipse(
clouds[i].x_pos + 110 * 0.8,
clouds[i].y_pos + 30 * 0.8,
50 * 0.8,
50 * 0.8
);
ellipse(
clouds[i].x_pos + 85 * 0.8,
clouds[i].y_pos + 40 * 0.8,
30 * 0.8,
30 * 0.8
);
ellipse(
clouds[i].x_pos + 135 * 0.8,
clouds[i].y_pos + 40 * 0.8,
30 * 0.8,
30 * 0.8
);
}
}
// Function to draw mountains objects.
function drawMountains() {
for (var i = 0; i < mountains.length; i++) {
//big mountain 1
fill(99, 106, 136);
triangle(
mountains[i].x_pos,
mountains[i].y_pos,
mountains[i].x_pos + 170 * 0.95,
mountains[i].y_pos - 282 * 0.95,
mountains[i].x_pos + 340 * 0.95,
mountains[i].y_pos
);
//big mountain 2
fill(110, 118, 150);
triangle(
mountains[i].x_pos - 30,
mountains[i].y_pos,
mountains[i].x_pos + 60 * 0.95,
mountains[i].y_pos - 232 * 0.95,
mountains[i].x_pos + 170 * 0.95,
mountains[i].y_pos
);
//medium mountain 3
fill(133, 137, 166);
triangle(
mountains[i].x_pos + 20,
mountains[i].y_pos,
mountains[i].x_pos + 160 * 0.95,
mountains[i].y_pos - 152 * 0.95,
mountains[i].x_pos + 280 * 0.95,
mountains[i].y_pos
);
}
}
// Function to draw trees objects.
function drawTrees() {
for (var i = 0; i < trees_x.length; i++) {
//trunk
fill(43, 24, 14);
rect(trees_x[i] - 10, treePos_y + 90, 20, 60);
//branches
noFill();
stroke(43, 24, 14);
strokeWeight(5);
bezier(
trees_x[i] + 8,
treePos_y + 90,
trees_x[i] + 50,
treePos_y + 60,
trees_x[i] + 60,
treePos_y + 10,
trees_x[i] + 60,
treePos_y + 10
);
bezier(
trees_x[i] - 8,
treePos_y + 90,
trees_x[i] - 50,
treePos_y + 60,
trees_x[i] - 60,
treePos_y + 10,
trees_x[i] - 60,
treePos_y + 10
);
bezier(
trees_x[i] + 3,
treePos_y + 90,
trees_x[i] + 30,
treePos_y + 30,
trees_x[i] + 30,
treePos_y + 30,
trees_x[i] + 30,
treePos_y - 5
);
bezier(
trees_x[i] - 3,
treePos_y + 90,
trees_x[i] - 30,
treePos_y + 30,
trees_x[i] - 30,
treePos_y + 30,
trees_x[i] - 30,
treePos_y - 5
);
bezier(
trees_x[i] - 25,
treePos_y + 75,
trees_x[i] - 50,
treePos_y + 90,
trees_x[i] - 50,
treePos_y + 80,
trees_x[i] - 65,
treePos_y + 70
);
bezier(
trees_x[i] + 25,
treePos_y + 75,
trees_x[i] + 50,
treePos_y + 90,
trees_x[i] + 50,
treePos_y + 80,
trees_x[i] + 65,
treePos_y + 70
);
bezier(
trees_x[i] - 25,
treePos_y + 75,
trees_x[i] - 50,
treePos_y + 90,
trees_x[i] - 50,
treePos_y + 80,
trees_x[i] - 65,
treePos_y + 70
);
bezier(
trees_x[i] - 25,
treePos_y + 40,
trees_x[i] - 10,
treePos_y + 35,
trees_x[i] - 10,
treePos_y + 45,
trees_x[i],
treePos_y + 30
);
bezier(
trees_x[i] + 27,
treePos_y + 20,
trees_x[i],
treePos_y + 10,
trees_x[i] - 10,
treePos_y + 10,
trees_x[i],
treePos_y
);
//snow on trees
noStroke();
fill(255, 200);
//first snow from the left
ellipse(trees_x[i] - 44, treePos_y + 79, 10, 7);
ellipse(trees_x[i] - 49, treePos_y + 81, 8, 5);
ellipse(trees_x[i] - 39, treePos_y + 81, 8, 5);
//second snow from the left
ellipse(trees_x[i] - 10, treePos_y + 35, 10, 7);
ellipse(trees_x[i] - 14, treePos_y + 37, 8, 5);
ellipse(trees_x[i] - 6, treePos_y + 33, 8, 5);
//third snow from the left
ellipse(trees_x[i] + 16, treePos_y + 10, 15, 10);
ellipse(trees_x[i] + 10, treePos_y + 9, 13, 8);
ellipse(trees_x[i] + 20, treePos_y + 14, 13, 8);
//fourth snow from the left
ellipse(trees_x[i] + 45, treePos_y + 76, 15, 10);
ellipse(trees_x[i] + 40, treePos_y + 79, 13, 8);
ellipse(trees_x[i] + 50, treePos_y + 79, 13, 8);
}
}
// ---------------------------------
// Canyon render and check functions
// ---------------------------------
// Function to draw canyon objects.
function drawCanyon(t_canyon) {
fill(99);
rect(t_canyon.x_pos, floorPos_y, t_canyon.width, height);
fill(70);
rect(t_canyon.x_pos + 10, floorPos_y, t_canyon.width - 20, height);
//water
fill(123, 193, 239);
rect(t_canyon.x_pos + 10, floorPos_y + 80, t_canyon.width - 20, height / 4);
}
// Function to check character is over a canyon.
function checkCanyon(t_canyon) {
if (
gameChar_world_x > t_canyon.x_pos &&
gameChar_world_x < t_canyon.x_pos + t_canyon.width &&
gameChar_y >= floorPos_y
) {
isPlummeting = true;
gameChar_y += 5;
} else {
isPlummeting = false;
}
}
// ----------------------------------
// Collectable items render and check functions
// ----------------------------------
// Function to draw collectable objects.
function drawCollectable(t_collectable) {
fill(255, 223, 128);
noStroke();
triangle(
t_collectable.x_pos,
t_collectable.y_pos,
t_collectable.x_pos - 8,
t_collectable.y_pos - 30,
t_collectable.x_pos + 8,
t_collectable.y_pos - 30
);
fill(165, 23, 105);
strokeWeight(1);
stroke(1);
ellipse(t_collectable.x_pos, t_collectable.y_pos - 35, 20);
fill(247, 196, 225);
ellipse(t_collectable.x_pos, t_collectable.y_pos - 45, 18);
}
// 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
) < 50
) {
t_collectable.isFound = true;
}
}