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();
}
回答1件