質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Processing

Processingは、オープンソースプロジェクトによるCGのためのプログラミング言語です。Javaをベースにしており、グラフィック機能に特化しています。イメージの生成やアニメーションなど、視覚的なフィードバックを簡単に得ることが可能です。

Q&A

解決済

1回答

884閲覧

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

naaaaaaa

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Processing

Processingは、オープンソースプロジェクトによるCGのためのプログラミング言語です。Javaをベースにしており、グラフィック機能に特化しています。イメージの生成やアニメーションなど、視覚的なフィードバックを簡単に得ることが可能です。

1グッド

1クリップ

投稿2023/01/12 11:07

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👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

thkana

2023/01/12 13:32

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

回答1

0

ベストアンサー

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

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

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

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}

投稿2023/01/12 13:22

編集2023/01/12 13:24
TN8001

総合スコア9194

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

naaaaaaa

2023/01/13 07:44

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Processing

Processingは、オープンソースプロジェクトによるCGのためのプログラミング言語です。Javaをベースにしており、グラフィック機能に特化しています。イメージの生成やアニメーションなど、視覚的なフィードバックを簡単に得ることが可能です。