For context, I’m incredibly new (talking one week) to javascript. I’m involved in a school project to make a choose your own adventure game and am taking it way too seriously. Anyway, I’ve started a game based on mexican folklore and am trying to get a “book” button to work. So you can read in game about the people you meet :). However, one of the “ghost” sprites (la planchada, or planchadafullsprite) will not hide, and the book background will not show up over that sprite’s designated background (planchadabg). This is kind of a trivial question lol but I’m super open to learning about javascript! Here is my code. For reference, I’m doing this on replit. the issues are happening after “showbookscreen” is executed. Sorry for any mistakes I’m super new to coding! 🙂
Also, the button seems to work fine on another screen, with lloronafullsprite and the corresponding background etc. So it means half of the code piece that’s hiding the sprites is working and half of it isn’t? I’m not sure.
//Press a button to choose your path
//See the README file for more information
/* VARIABLES */
let enterButton;
let a1Button;
let a2Button;
let b1Button;
let b2Button;
let screen = 0;
let music;
let softwind;
let lloronaSound;
let musicStopped = false;
let introBg;
let textScreen;
let startButton;
let nextButton;
let charroHead;
let charroFull;
let lloronaHead;
let lloronaFull;
let planchadaHead;
let planchadaFull;
let planchadaBg;
let charroBg;
let lloronaBg;
let forwardButton;
let backButton;
let bookButton;
let bookBg;
let blackBg;
let screenBeforeBook;
let exitButton;
function preload() {
//music
soundFormats("mp3");
music = loadSound("sweetwater.mp3");
lloronaSound = loadSound("Assets/llorona.mp3");
//images
introBg = loadImage("/Assets/introbg.png");
textScreen = loadImage("/Assets/textscreen.png");
startButton = loadImage("/Assets/startbutton.png");
nextButton = loadImage("/Assets/nextbutton.png");
charroHead = loadImage("/Assets/charrohead.png");
charroFull = loadImage("/Assets/charrofull.png");
lloronaHead = loadImage("/Assets/lloronahead.png");
lloronaFull = loadImage("/Assets/lloronafull.png");
lloronaBg = loadImage("/Assets/lloronabg.png");
planchadaBg = loadImage("/Assets/planchadabg.png");
charroBg = loadImage("/Assets/charrobg.png");
forwardButton = loadImage("/Assets/forwardbutton.png");
backButton = loadImage("/Assets/backbutton.png");
planchadaFull = loadImage("/Assets/planchadafull.png");
bookButton = loadImage("/Assets/bookbutton.png");
bookBg = loadImage("/Assets/bookbg.png");
blackBg = loadImage("/Assets/blackbg.png");
exitButton = loadImage("/Assets/exitbutton.png");
}
/* SETUP RUNS ONCE */
function setup() {
createCanvas(780, 520);
textAlign(CENTER);
textSize(20);
noStroke();
// Set up the home screen
background(46, 26, 10);
//Draw background Image
image(introBg, 0, 0);
// Create buttons for all screens
startButton = new Sprite(width/2, height/2 + 200);
nextButton = new Sprite(width + 400, height + 400);
//Resize Images
forwardButton.resize(0,45);
backButton.resize(0,45);
bookButton.resize(0,45);
exitButton.resize(0,45);
// Create sprites
charroFullSprite = new Sprite(charroFull, -2000,-2000)
lloronaFullSprite = new Sprite(lloronaFull, -2000,-2000)
planchadaFullSprite = new Sprite(planchadaFull, -2000,-2000)
charroHeadSprite = new Sprite(charroHead, -2000,-2000)
lloronaHeadSprite = new Sprite(lloronaHead, -2000,-2000)
planchadaHeadSprite = new Sprite(planchadaHead, -2000,-2000)
forwardButtonSprite = new Sprite(forwardButton, -2000,-2000)
backButtonSprite = new Sprite (backButton, -2000,-2000)
bookButtonSprite = new Sprite (bookButton, -2000,-2000)
}
/* DRAW LOOP REPEATS */
function draw() {
// Display start button
startButton.w = 80;
startButton.h = 50;
startButton.collider = "k";
startButton.color = "white";
startButton.text = "start";
//Check start button
if (startButton.mouse.presses()) {
print("pressed");
showIntroScreen0();
screen = 0;
}
// Display Llorona screen
if (screen == 0) {
if (nextButton.mouse.presses()) {
print("pressed");
showLloronaScreen();
screen = 1;
}
}
//Go to charro screen from llorona
if (screen == 1) {
if (forwardButtonSprite.mouse.presses()) {
showCharroScreen();
screen = 2;
}
if (backButtonSprite.mouse.presses()) {
showPlanchadaScreen();
screen = 3;
}
}
//go to llorona screen from planchada
if (screen == 3) {
if (forwardButtonSprite.mouse.presses()) {
print("pressed");
showLloronaScreen();
screen = 1;
}
}
//go to llorona screen from charro
if (screen == 2) {
if (backButtonSprite.mouse.presses()) {
print("pressed");
showLloronaScreen();
screen = 1;
}
}
//go to book screen
if (screen == 1) {
if (bookButtonSprite.mouse.presses()) {
print("pressed");
showBookScreen();
screen = 4;
screenBeforeBook = 1;
}
}
if (screen == 2) {
if (bookButtonSprite.mouse.presses()) {
print("pressed");
showBookScreen();
screen = 4;
screenBeforeBook = 2;
}
}
if (screen == 3) {
if (bookButtonSprite.mouse.presses()) {
print("pressed");
showBookScreen();
screen = 4;
screenBeforeBook = 3;
}
}
//hide buttons in book bg
if (screen == 4) {
forwardButtonSprite.pos = { x: -2000, y: -2000 };
backButtonSprite.pos = { x: -2000, y: -2000 };
bookButtonSprite.pos = { x: -2000, y: -2000 };
lloronaFullSprite.pos = { x: -2000, y: -2000 };
charroFullSprite.pos = { x: -2000, y: -2000 };
planchadaFullSprite.pos = { x: -2000, y: -2000 };
}
//exit book screen
if (screen == 4) {
if (exitButtonSprite.mouse.presses())
if (screenBeforeBook == 1) {
showLloronaScreen();
screen = 1;
}
if (screenBeforeBook == 2) {
showCharroScreen();
screen = 2;
}
if (screenBeforeBook == 3) {
showPlanchadaScreen();
screen = 3;
}
}
}
function mousePressed() {
// Start audio context and play music only on first click and if not stopped
if (!music.isPlaying() && !musicStopped) {
userStartAudio();
music.play();
music.loop();
music.setVolume(0.3);
}
}
/* FUNCTIONS TO DISPLAY SCREENS */
function showIntroScreen0() {
background(46, 26, 10)
image(textScreen, 3, 0);
fill("white");
text(
"Your aunt was murdered ten years ago",
width / 2,
height / 2 - 100
);
//Get rid of begin button
startButton.pos = { x: -100, y: -100};
//Add accept button
nextButton.pos = { x: width/2, y: height/2 + 120};
nextButton.w = 280;
nextButton.h = 90;
nextButton.collider = "k";
nextButton.color = "white";
nextButton.text = "Go searching for answers";
}
async function showLloronaScreen() {
if (music.isPlaying()) {
// Fade out over 1 second
for (let vol = 0.3; vol >= 0; vol -= 0.01) {
music.setVolume(vol);
await delay(33); // approx 30fps
}
music.stop();
musicStopped = true;
}
if (!lloronaSound.isPlaying()) {
lloronaSound.play();
lloronaSound.setVolume(0.05);
}
background(46, 26, 10);
image(lloronaBg, 3, 0);
lloronaFullSprite.pos = { x: width/2, y: height/2 + 50 };
lloronaFullSprite.scale = 0.1;
lloronaFullSprite.rotation = 0;
planchadaFullSprite.pos = { x: -2000, y: -2000 }; // Move planchada off screen
charroFullSprite.pos = { x: -2000, y: -2000 }; // Move charro off screen
fill("antiquewhite");
textAlign(LEFT);
textSize(20);
text(
"tutorial text here",
width/2 - 250,
height/2 - 100
);
//Get rid of accept button
nextButton.pos = { x: -2000, y: -2000 };
//Add forward button at bottom right
forwardButtonSprite.pos = { x: width - 50, y: height - 50 };
forwardButtonSprite.w = 45;
forwardButtonSprite.h = 45;
forwardButtonSprite.collider = "k";
forwardButtonSprite.color = color(255, 255, 255, 0);
forwardButtonSprite.rotation = 0;
//Add back button at bottom left
backButtonSprite.pos = { x: 50, y: height - 50 };
backButtonSprite.w = 45;
backButtonSprite.h = 45;
backButtonSprite.collider = "k";
backButtonSprite.color = color(255, 255, 255, 0);
backButtonSprite.rotation = 0; //Corrected line
//change music
//Add book button at top left
bookButtonSprite.pos = { x: 50, y: 50 };
bookButtonSprite.w = 45;
bookButtonSprite.h = 45;
bookButtonSprite.collider = "k";
bookButtonSprite.color = color(255, 255, 255, 0);
// move exit button off screen
exitButtonSprite.pos = { x: -2000, y: -2000 };
}
function showCharroScreen() {
if (lloronaSound.isPlaying()) {
lloronaSound.pause();
}
background(46, 26, 10);
image(charroBg, 3, 0);
if (charroFullSprite) {
charroFullSprite.remove();
}
charroFullSprite = new Sprite(charroFull, width/2, height/2);
charroFullSprite.scale = 0.1;
lloronaFullSprite.pos = { x: -2000, y: -2000 }; // Move Llorona off screen
forwardButtonSprite.pos = { x: -2000, y: -2000 };
fill("antiquewhite");
textAlign(LEFT);
textSize(20);
text(
"elcharro",
width/2 - 250,
height/2 - 100
);
}
function showPlanchadaScreen() {
if (lloronaSound.isPlaying()) {
lloronaSound.pause();
}
background(46, 26, 10);
image(planchadaBg, 3, 0);
planchadaFullSprite.pos = { x: width/2, y: height/2 + 50 };
planchadaFullSprite.scale = 0.1;
planchadaFullSprite.rotation = 0;
if (screen == 3) {
lloronaFullSprite.pos = { x: width/2, y: height/2 };
} else {
lloronaFullSprite.pos = { x: -2000, y: -2000 };
}
// Move Llorona off screen
backButtonSprite.pos = { x: -2000, y: -2000 };
fill("antiquewhite");
textAlign(LEFT);
textSize(20);
text(
"laplanchada",
width/2 - 250,
height/2 - 100
);
}
function showBookScreen() {
background(46, 26, 10);
image(bookBg, 3, 0);
console.log("Planchada position:", planchadaFullSprite.pos);
console.log("Charro position:", charroFullSprite.pos);
// Add exit button at top right
exitButtonSprite = new Sprite(exitButton, width - 50, 50);
exitButtonSprite.w = 45;
exitButtonSprite.h = 45;
exitButtonSprite.collider = "k";
exitButtonSprite.color = color(255, 255, 255, 0);
}```
