ゲームの開始画面を作りたいです。

Question

p5.jsで以下のようにゲームを作っています。
開始画面を作り、画面をクリックするとゲームが始まるという風にしたいのですが、どうやったらよいのかが分かりません。開始画面の入れ方を教えていただきたいです。

let photo;
let photo2;
let photo3;

//全体共通
function resetPosition(all){
all.x += all.hx;
all.y += all.hy;
}

//車
function createCar(){
return{
x:50,
y:250,
hx:0,
hy:0
};
}

function fall(all){
all.hy += 0.15;
}

function jump(all){
all.hy = -4;
}

function drawCar(all){
fill(255);
square(all.x+40,all.y+20,40);
image(photo,all.x,all.y,80,40);
}

function carIsAlive(all){
return all.y < 510;
}

//障害物
function createBlock(y){
return{
x:900,
y,
hx:-2,
hy:0
};
}

function drawBlock(all){
rect(all.x,all.y,80,400);
}

function blockIsAlive(all){
return -100 < all.x;
}

//当たり判定の関数
function allIsHitting(
allA,
allB,
collisionXDistance,
collisionYDistance
){
let currentXDistance = abs(allA.x - allB.x);
if(collisionXDistance <= currentXDistance) return false;

let currentYDistance = abs(allA.y - allB.y);
if(collisionYDistance <= currentYDistance) return false;

return true;
}

//ゲーム
let car;
let blocks;
let gameState;

//障害物の間開ける
function addBlockPair(){
let y = random(-100,100);
blocks.push(createBlock(y));//上
blocks.push(createBlock(y+570));//下
}

//ゲームオーバーの画面
function drawGameoverScreen(){
background(0,192);
textFont("'DotGothic16', sans-serif");
fill(255);
textSize(50);
textAlign(CENTER,CENTER);
text("GAME OVER",width/2,height/2);
textSize(15);
text("Click to try again",width/2,310)

}

function startScreen(){
background(0,200);
textFont("'DotGothic16', sans-serif");
fill(255);
textSize(50);
textAlign(CENTER,CENTER);
text("FRYING CAR",width/2,height/2);
gameState = "first";
}

//ゲームのリセット
function resetGame(){

gameState = "play";

//作成
car = createCar();

blocks = [];
}

//ゲームの更新
function updateGame(){

if(gameState == "gameover") return;

if(frameCount % 120 === 1) addBlockPair(blocks);
blocks = blocks.filter(blockIsAlive);

//位置の更新
resetPosition(car);
for(let block of blocks)resetPosition(block);

//落ちる
fall(car);

//ゲームオーバー
if(!carIsAlive(car)) gameState = "gameover";

//当たり判定
for(let block of blocks){
if(allIsHitting(car,block,20+40,20+200)){
gameState = "gameover";
break;
}
}
}

//ゲームの描画
let a = 0;
function drawGame(){
//描画

background(72,136,181);
drawCar(car);
for(let block of blocks)drawBlock(block);

image(photo2,330,120,200,240);
image(photo2,30,30,200,240);
a-=2;
image(photo3,a+150,100,180,220);

if(gameState === "gameover") drawGameoverScreen();
}

//マウス
function onMousePress(){
if(gameState === "first"){
resetGame();
}
else if(gameState === "play"){
jump(car)
}else if(gameState === "gameover"){
resetGame();
}

}

function setup() {
createCanvas(500, 500);
rectMode(CENTER);

photo = loadImage("kuruma2.jpg");
photo2 = loadImage("kumo.png");
photo3 = loadImage("hata.PNG");

startScreen();

resetGame();

}

function draw() {

updateGame();
drawGame();
}

function mousePressed(){
onMousePress();
}

Comments

[TN8001]

読みにくいので、ソースコードはコードブロックを使ってください。
[ヘルプ｜質問する時のヒント](https://teratail.com/help/question-tips#questionTips35)

[thkana]

読むのが面倒くさいボリューム...

' Processing 状態　ゲームタイトル 'ぐらいでググると、p5.jsではなくてProcessing (Java)が多いですけれど概ね共通に使える情報が手に入るのではないかと思います。

Answer 1

Flappy Birdですね（参考コードは質問に明示してください！）
Flappy Bird ライクなゲーム | p5.js でゲーム制作

playかgameoverの２択から、firstを入れた３択になるようにしようとしているわけですね？
ゲームオーバーを実装 | p5.js でゲーム制作

setup()は初回１回だけ、draw()は１秒に６０回呼ばれているということをしっかり理解してください。

startScreen()をsetup()で呼んでも、すぐdraw()で上書きされてしまいます。
drawGameoverScreen()のように、draw()内で呼び分けるようにします。

どこで呼び分けるかですが、draw()直下が楽そうですかね？（差分のみ）

function setup() {
  createCanvas(500, 500);
  rectMode(CENTER);

  photo = loadImage("kuruma2.jpg");
  photo2 = loadImage("kumo.png");
  photo3 = loadImage("hata.PNG");

  //startScreen();
  //resetGame();
  gameState = "first";
}

function draw() {
  if (gameState === "first") {
    startScreen();
  } else {
    updateGame();
    drawGame();
  }
}

Comments

[naaaaaaa]

理解できました。ありがとうございます！