Блог

Я использую p5.js / p5.играйте в фреймворк, и я создаю игру. моя проблема в том, что у меня есть 4 разных сцены для игры: главное меню, загрузка, игра, сцены эндшпиля. Я включил кнопки, которые можно щелкнуть, чтобы изменить сцену, но по какой-то причине они не скрываются после нажатия и не переходят к следующей сцене. Я могу изменить сцену, если нажму на холст за пределами макета телевизора, но не на кнопку. Если вы нажмете на кнопку, она изменится только на сцену загрузки, и больше ничего не произойдет. Я бы хотел, чтобы мои 4 кнопки были доступны для нажатия, которые переключаются на разные сцены. пожалуйста, помогите.

код ниже. ( извините за объем кода, кстати )

 const MAIN_MENU = 0;
const LOADING = 1;
const GAME = 2;
const END_GAME = 3;

var currentState = MAIN_MENU;


let bg;
let logo;
let button;
let button1;
let tv;
let vid;
let showVid = true;
let click;
let stationSprite;
let rock1Sprite;
let rock2Sprite;
let rock3Sprite;
let houseSprite;
let ground;
let house;



function preload() { // assessts for images, sprites, audio and video
    bg = loadImage('assets/space.png');
    logo = loadImage('assets/logo.png');
    rock1 = loadImage('assets/rock1.png');
    rock2 = loadImage('assets/rock2.png');
    tv = loadSound('assets/tv.mp3');
    click = loadSound('assets/click.mp3');
    go = loadImage('assets/go.png');
    hs = loadImage('assets/hs.png');
    bg1 = loadImage('assets/space.png');
    a = loadImage('assets/a.png');
    d = loadImage('assets/d.png');
    sb = loadImage('assets/sb.png');
    mouse = loadImage('assets/mouse.png');
    vid = createVideo('assets/vid.mp4')
    station = loadImage('assets/station.png');
    rock1 = loadImage('assets/rock1.png');
    rock2 = loadImage('assets/rock2.png');
    rock3 = loadImage('assets/rock3.png');
    ground = loadImage('assets/ground.png');
    house = loadImage('assets/house.png');
}

function setup() {
    menuSetup();
    loadSetup();
    gameSetup();
    endGameSetup();
}

function soundPlay() { // when clicked button makes a sound and changes screen from main menu to loading
    tv.play();
    if (!click.isPlaying()) {
        click.play();
        currentState = LOADING;
    }
    button.hide();
}

function tvCode() {
    stroke(189, 51, 164); // code for tv static
    rect(190, 90, 1070, 600, 10);
    for (let i = 200; i < 1250; i  ) {
        let r = random(255);
        stroke(r);
        line(i, 100, i, 680);
    }
}

function drawScreens() { // function for differnt screens
    menuScreen();
    loadingScreen();
    gameScreen();
    endGameScreen();
}

function menuScreen() { // code for menu screen
    tvCode()
    image(logo, 550, 70, 300, 300); // code for the tv and logo and images.
    stroke(210, 105, 30);
    line(740, 30, 700, 85);
    line(660, 30, 700, 85);
    circle(660, 30, 20);
    circle(740, 30, 20);
    image(rock1, 1300, 70, 100, 100);
    image(rock2, 60, 70, 100, 100);
    fill(255);

}

function loadingScreen() { // code for the loading screen
    background(bg);
    tvCode()
    image(logo, 180, 70, 200, 200);
    stroke(189, 51, 164);
    line(740, 30, 700, 85);
    line(660, 30, 700, 85);
    circle(660, 30, 20);
    circle(740, 30, 20);
    image(rock1, 1300, 70, 100, 100);
    image(rock2, 60, 70, 100, 100);
    rect(400, 150, 650, 300, 10);
    image(bg1, 400, 155, 650, 290);
    rect(400, 450, 650, 180, 10);
    image(bg1, 400, 455, 650, 170);

    image(a, 410, 500, 24, 24);

    image(d, 410, 550, 24, 24);
    image(mouse, 710, 500, 25, 25);
    image(sb, 710, 550, 75, 25);
    noStroke();
    fill(255)
    textSize(20);
    textStyle(BOLD);
    text("CONTROLS:", 660, 470);
    text("=  SHOOT  ", 800, 570);
    text("=  AIM", 750, 520);
    text("=  Move Left", 450, 520);
    text("=  Move Right", 450, 570);


    text("LOADING: . . .", 650, 150);

    if (showVid) {
        image(vid, 400, 150, 650, 300);
    }
    button = createButton('CLICK TO START GAME');
    button.position(650, 650);
    button.mousePressed(soundPlay)
        // currentState = GAME;
}

function gameScreen() { // code for game screen
    background(bg);

    fill(227, 218, 201);
    image(ground, 0, 700, windowWidth);
    fill(255)
    textSize(20);
    textStyle(BOLD);
    text("SCORE:", 10, 30)

    drawSprites();
    crosshairs();
    stationMove();
    noCursor();
}

function endGameScreen() { // code for endgame screen 
    background(bg);
    tvCode()
    image(logo, 180, 70, 200, 200);
    stroke(210, 105, 30);
    line(740, 30, 700, 85);
    line(660, 30, 700, 85);
    circle(660, 30, 20);
    circle(740, 30, 20);
    image(rock1, 1300, 70, 100, 100);
    image(rock2, 60, 70, 100, 100);
    image(go, 600, 60, 200, 200);
    rect(400, 250, 650, 300, 10);
    image(bg1, 400, 255, 650, 290);
    image(hs, 600, 200, 200, 200);

}


function menuSetup() {
    vid = createVideo('assets/vid.mp4')
    tv.loop();
    tv.setVolume(0.02)
    click.setVolume(0.05)
    bg = loadImage('assets/space1.png');
    createCanvas(windowWidth, windowHeight);
    strokeWeight(10);
    frameRate(40);
    button = createButton('CLICK HERE TO PLAY THE GAME');
    button.position(600, 650);
    button.mousePressed(soundPlay)
}

function loadSetup() {
    vid = createVideo('assets/vid.mp4')
    bg = loadImage('assets/space1.png');
    createCanvas(windowWidth, windowHeight);
    strokeWeight(10);
    vid.hide();
    vid.play();
    let videoLength = 48000; //  hides video after length of video is finished
    setTimeout(() => showVid = false, videoLength)
}


function gameSetup() {
    bg = loadImage('assets/space.png');
    createCanvas(windowWidth, windowHeight);

    stationSprite = createSprite(660, 670); // creates the sprite for the tower
    station.resize(100, 100);
    stationSprite.addImage(station);

    rock1Sprite = createSprite(160, 170); // creates the sprite for the meteor 1
    rock1.resize(80, 80);
    rock1Sprite.addImage(rock1);

    rock2Sprite = createSprite(560, 270); // creates the sprite for the meteor 2
    rock2.resize(80, 80);
    rock2Sprite.addImage(rock2);

    rock3Sprite = createSprite(960, 370); // creates the sprite for the meteor 3
    rock3.resize(80, 80);
    rock3Sprite.addImage(rock3);

    houseSprite = createSprite(1400, 710); // creates the sprite for the house 1
    house.resize(100, 100);
    houseSprite.addImage(house);
    houseSprite = createSprite(50, 710); // creates the sprite for the house 2 
    house.resize(100, 100);
    houseSprite.addImage(house);
    houseSprite = createSprite(550, 710); // creates the sprite for the house 3
    house.resize(100, 100);
    houseSprite.addImage(house);


}

function endGameSetup() {
    button = createButton('RETRY');
    button.position(675, 600);
    button1 = createButton('HOME');
    button1.position(675, 650);
    button.mousePressed(soundPlay)
    button1.mousePressed(soundPlay)
}

function stationMove() {

    if (keyIsDown(68)) { // controls right direction
        stationSprite.setSpeed(1.5, 0);
    } else if (keyIsDown(65)) { // controls left direction
        stationSprite.setSpeed(-1.5, 0);
    } else
        stationSprite.setSpeed(0, 0)
}

function crosshairs() { // aim crosshairs for game using mouse
    stroke(255);
    strokeWeight(2);
    line(mouseX, mouseY, mouseX   20, mouseY);
    line(mouseX, mouseY, mouseX - 20, mouseY);
    line(mouseX, mouseY, mouseX, mouseY   20);
    line(mouseX, mouseY, mouseX, mouseY - 20);
}

function mouseClicked() {
    if (currentState == MAIN_MENU) {
        currentState = LOADING;
    } else if (currentState == LOADING) {
        currentState = GAME;
    } else if (currentState == GAME) {
        currentState = END_GAME;
    } else if (currentState == END_GAME) {
        currentState = MAIN_MENU;
    }
}

function draw() {
    background(bg);
    switch (currentState) {
        case MAIN_MENU:
            menuScreen();
            break;
        case LOADING:
            loadingScreen();
            break;
        case GAME:
            gameScreen();
            break;
            case END_GAME:
            endGameScreen();
            break;
    }
}