Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Olá Lucas Rafael, tudo bem?
Desculpa pela demora em obter um retorno.
Fiz o teste no seu jogo e o som funcionou normalmente aqui, mas notei que quando vou clicar no botão start ele não carrega o jogo, até mesmo se escolher a dificuldade. Por isso abaixo deixo um passo a passo explicando mais sobre criação de menu e mudança de tela no p5js com isso pode efetuar alguns ajustes no seu game!
1º Menu
No sketch.js crie uma variável, por exemplo, tela 1, pois será ela o ponto inicial para criação das próximas telas que você precisará, no meu caso criei tela1, o menu do jogo e tela2 o jogo.
Segue abaixo o código:
var tela=1;
var x = 150
var y = 100
var l = 100
var h = 30
function setup() {
createCanvas(400, 400);
}
function draw() {
//inicializando a tela 1
if(tela==1){
tela1();
}
//inicializando a tela 2
if(tela==2){
tela2();
}
}
É preciso se atentar nesse inicializar tela utilizando o If, pois será por ele que conseguiremos navegar tela por tela.
2º Telas
Depois que criei o meu sketch.js começarei a preparar as telas, por exemplo, vou criar a tela 1 que é o menu, primeiro vou criar um arquivo com o nome tela_inicial_1.
Dentro do novo arquivo criado insiro o código:
function tela1(){
background(123,253,145);
rect(x,y,l,h)
textSize(20)
text("Entrar",x+20,y+20)
}Meu resultado será parecido com isso:
Depois passarei para criação da tela 2, primeiro abro um novo arquivo e coloco o nome tela_final.
E aí insiro o meu código parecido com a tela 1:
function tela2(){
background(123,125,145);
textSize(20)
text("Estamos na tela 2",100,100);
}Só coloquei um texto para mostrar a troca da tela, aí o resultado ficou assim:
E por fim, não podemos deixar de configurar o mouse. Por isso criei um arquivo com o nome mouse.
Dentro dela fiz as seguintes configurações para funcionar o meu clique em cada botão.
function mouseClicked() {
if(mouseX>=x && mouseX<=(x+l) && mouseY>=y && mouseY<=(y+h)){
tela=2;
}
}Com isso quando clicar no botão entrar vai me enviar para tela 2 do meu projeto.
No Index.html só preciso apontar os meus aquivos e pronto vou conseguir fazer a troca de telas.
Minha dica para você na opção de escolher o nível crie uma tela que vai aparecer ex: Nivel 1, Nivel 2 e Nivel 3 aí quando a pessoa escolher vai para tela com a dificuldade escolhida ai no jogo faça as alterações para cada tela para aumentar a dificuldade.
Aqui foi um exemplo meu para você adaptar no seu jogo fica a vontade para mudanças.
Deixo aqui o link do projeto:
https://editor.p5js.org/monalisaa/sketches/ImC5tUmSi
Reforço que estou à disposição para tirar dúvidas.
Abraços.