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

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();
}

TN8001

2023/01/12 13:22

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

thkana

2023/01/12 13:32

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

回答1件

ベストアンサー

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

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

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

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

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

js
1function setup() {
2  createCanvas(500, 500);
3  rectMode(CENTER);
4
5  photo = loadImage("kuruma2.jpg");
6  photo2 = loadImage("kumo.png");
7  photo3 = loadImage("hata.PNG");
8
9  //startScreen();
10  //resetGame();
11  gameState = "first";
12}
13
14function draw() {
15  if (gameState === "first") {
16    startScreen();
17  } else {
18    updateGame();
19    drawGame();
20  }
21}