塗りつぶしたくない図形が塗りつぶされる

Question

前提

画面上のランダムな位置に円が描画され、それをクリックして消すとスコアが入るゲームをつくろうとしています。

実現したいこと

マウスカーソルが円と重なった際に円を塗りつぶしたい

発生している問題・エラーメッセージ

マウスカーソルが円と重なっていなくても図形が緑色に塗りつぶされてしまう

該当のソースコード

processingです

ソースコード
void setup() {

size(1920,1080);

background(0);

}

float x = 0;
float y = 0;

float tx = x - 50;
float ty = y - 50;

float tx2 = x + 50;
float ty2 = y + 50; //x,yが円の中心+-50の位置

void draw() {

x = random(0,1080);
y = random(0,1920);

ellipse(x,y,100,100);

if( tx <= mouseX  && mouseX <= tx2){
 
  if( ty <= mouseY && mouseY <= ty2){//マウスカーソルのx座標、y座標がともに円の内部にきたら
         
     fill(0,255,0);  //塗りつぶす
  
 }

}
delay(2500); //円が描画されるスピードを調節
}

###最後に
プログラミング初心者なので、参考のためにも「前提」に書いてあるようなゲームを作るためのコードを作っていただけたらめちゃめちゃありがたいです！！

Comments

[dodox86]

> プログラミング初心者なので、参考のためにも「前提」に書いてあるようなゲームを作るためのコードを作っていただけたらめちゃめちゃありがたいです！！

初心の方と言えどもこれでは丸投げです。

[質問するときのヒント] https://teratail.com/help/question-tips
[推奨していない質問] https://teratail.com/help/avoid-asking

> if( tx <= mouseX && mouseX <= tx2){
>
> if( ty <= mouseY && mouseY <= ty2){//マ

この判定では円ではなく左上座標(tx, ty) 右下座標(tx2, ty2)で示される矩形（正方形）の範囲ですね。
中学数学、「三平方の定理」で斜辺が円の半径の長さ以内であれば円の中と判定することができます。

Answer 1

画面上のランダムな位置に円が描画され、それをクリックして消すとスコアが入るゲームをつくろうとしています。

最近似た質問に回答しました（ちょっと違うというのは理解しています）
ランダムに配置させた図形の色を変える方法

円との当たり判定の「参考」にはなるはずです。

マウスカーソルが円と重なった際に円を塗りつぶしたい

上記回答のmouseClickedを、mouseMovedに置き換えてみました（＋ちょっと整理）

final int NUM = 5;
float[] x = new float[NUM];
float[] y = new float[NUM];
float[] r = new float[NUM];
boolean[] isMouseHover = new boolean[NUM];

void setup() {
  size(400, 300);
  ellipseMode(RADIUS);

  for (int i = 0; i < NUM; i++) {
    x[i] = random(width);
    y[i] = random(height);
    r[i] = random(50, 100);
  }
}

void draw() {
  background(255);

  for (int i = 0; i < NUM; i++) {
    if (isMouseHover[i]) {
      fill(0, 255, 0);
    } else {
      fill(255);
    }
    circle(x[i], y[i], r[i]);
  }
}

void mouseMoved() {
  for (int i = 0; i < NUM; i++) {
    if (dist(x[i], y[i], mouseX, mouseY) < r[i]) {
      isMouseHover[i] = true;
    } else {
      isMouseHover[i] = false;
    }
  }
}

---

プログラミング初心者なので、参考のためにも「前提」に書いてあるようなゲームを作るためのコードを作っていただけたらめちゃめちゃありがたいです！！

代わりに作ってしまっては、それは「プログラミング」と言えるのでしょうか？
claus__さんの理解度もわかりませんし、かといって０から説明するわけにもいきません。

求めている回答ではないでしょうが、比較的簡単にできそうなライブラリを使用した例を出しておきます。

メニューの「スケッチ」－「ライブラリをインポート...」から、Fisicaをインストールしておきます。

import fisica.*;

FWorld world;
int timeLimit = 15;
int startMS; // ゲーム開始時間
int countDown;
int score;
PImage photo1;
PImage photo2;

Scene scene = Scene.TITLE; // 現在の画面
enum Scene { // 画面を表すenum
  TITLE, PLAY, GAMEOVER,
}


void setup() {
  fullScreen();
  background(255, 255, 0);
  fill(0);
  textSize(90);

  Fisica.init(this);
  world = new FWorld();
  world.setEdges();
  world.setGravity(0, 0);

  // 画像読み込みは初回１回でよい（同じ画像を使いまわす）
  //photo = loadImage("2.png");
  photo1 = loadImage("https://www.gravatar.com/avatar/65adad388f02d47ab7fb7e48579efe41?d=identicon", "png");
  photo2 = loadImage("https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg");
}

void draw() {
  switch(scene) {
  case TITLE:
    title();
    break;
  case PLAY:
    play();
    break;
  case GAMEOVER:
    gameover();
    break;
  }
}

void title() {
  background(255, 255, 0);

  push(); // textAlignやtextSizeの変更がほかに影響しないように、push popで閉じ込める
  textAlign(CENTER, CENTER); // センタリング
  text("HOGE GAME", 0, 0, width, height); // 画面中央

  if (frameCount % 60  < 30) { // 点滅
    textSize(44);
    text("Mouse Click to Play", 0, height / 2, width, height / 2); // 画面下半分中央
  }
  pop();
}

void play() {
  background(255);

  text("SCORE:" + score, width - 600, 100);

  int ms = (millis() - startMS) / 1000; // 開始時間を引く

  countDown = timeLimit - ms;
  if (countDown <= 0) {
    scene = Scene.GAMEOVER; // 結果画面に遷移
  }
  if (countDown <= 10) {
    text("COUNT DOWN :" + countDown, 100, 100);
  }

  if (frameCount % 60 == 1) {
    add();
  }

  world.step();
  world.draw();
}

void gameover() {
  background(255, 255, 0);

  push();
  textAlign(CENTER, CENTER);
  text("TIME OVER\nYOUR SCORE " + score, 0, 0, width, height);

  if (frameCount % 60  < 30) {
    textSize(44);
    text("Mouse Click to Title", 0, height / 2, width, height / 2);
  }
  pop();
}

void mouseClicked() {
  switch(scene) {
  case TITLE:
    scene = Scene.PLAY; // ゲーム画面に遷移
    startMS = millis(); // ゲーム開始時間記録
    break;
  case GAMEOVER:
    scene = Scene.TITLE; // タイトル画面に遷移
    countDown = 0; // 変数再初期化
    score = 0;
    // FCircleだけを取り除くのはそこそこ面倒なので、FWorldごと作り直し（雑いｗ
    world = new FWorld();
    world.setEdges();
    world.setGravity(0, 0);
    break;
  }
}

void mousePressed() {
  FBody body = world.getBody(mouseX, mouseY);
  if(body == null) return;
  
  String name = body.getName();
  if ("aaa".equals(name)) {
    world.remove(body);
    score += 500;
  }
  if ("bbb".equals(name)) {
    world.remove(body);
    score += 300;
  }
}

void add() {
  FBody body;
  
  if (1 < random(2)) {
    body = new FCircle(135); // （丸い当たり判定）
    body.attachImage(photo1);
    body.setName("aaa"); // 区別できればなんでもいい
  } else {
    body = new FBox(95, 95); // （四角い当たり判定）
    body.attachImage(photo2);
    body.setName("bbb");
  }
  
  float x = random(width - 100) + 50;
  float y = random(height - 100) + 50;
  body.setPosition(x, y);

  PVector p = PVector.random2D().mult(10000);
  body.addForce(p.x, p.y);
  body.setDamping(0);
  body.setDensity(0.2);
  body.setFriction(0);
  body.setRestitution(1);
  body.setStroke(1);

  world.add(body);
}

Comments

[claus__]

ご丁寧にありがとうございます。私は現在高校2年生なのですが、来月半ばに文化祭が控えており、その出し物としてこのゲームを作っていて、図書館で本を借りて勉強していましたが、(受験勉強も考えると)このペースでは独学では間に合わないと感じ皆様のお力をお借りした次第でございます。
とりあえず今はいただいた回答を読んで作業に戻りたいと思います。また疑問点や進捗がありましたら報告させていただきます。
わざわざ本当にありがとうございます。

[TN8001]

了解しました。納期が迫っているわけですね^^;

場合によっては方針転換する必要もあるかもしれませんね（大いに参考にできる類のゲームにする等）
[processing ゲーム - Google 検索](https://www.google.com/search?q=processing+%E3%82%B2%E3%83%BC%E3%83%A0&lr=lang_ja)

> また疑問点や進捗がありましたら報告させていただきます。

回答コードに対する疑問はお気軽にコメントください^^

わたしはFisicaが好きなのですが、なぜか質問者受けが悪いですね^^;

福笑い
[processingで図形を選択して動かす方法](https://teratail.com/questions/318539)

ブロック崩し
[proccesingでブロック崩しを作っていたところブロックが表示されなくなった](https://teratail.com/questions/304568)

[claus__]

こんばんは、進捗報告をいたします。
まず制限時間の概念を設け、試験用として15秒でゲームが終了するようにしました。
いま壁に当たっているのは、スコアの加算方法についてです。円を消すとスコアがもらえるようにしたいのですが、どのようなプログラムを書けばいいのか全く分からなくなってしまっている状況です。
また、円が現れる頻度を調整するためにはどこを変えればいいのでしょうか。

現在のコードがこちらです。
↓
import fisica.*;

FWorld world;
color bodyColor = #155AAD;
color hoverColor = #55AA11;

int timeLimit = 15;
int countDown;

void setup() {
fullScreen();

Fisica.init(this);
world = new FWorld();

textSize(90);

}

void draw() {
background(255);

int ms = millis()/1000; //制限時間

println(ms);

countDown = timeLimit - ms;
if(countDown > 0){
if(countDown <= 10){
text("COUNT DOWN :"+countDown,100,100);
}
} else{
background(255,255,0);
text("TIME OVER" , 300, 400);

return;
}

if (frameCount % 150 == 1) {
add();
}

for (Object body : world.getBodies()) {
((FBody)body).setFillColor(bodyColor);
}

FBody hovered = world.getBody(mouseX, mouseY);
if (hovered != null) {
hovered.setFillColor(hoverColor);
}

world.step();
world.draw();

}

void mousePressed() {
FBody body = world.getBody(mouseX, mouseY);
if (body instanceof FCircle) {
world.remove(body);
}
}

void add() {
FCircle circle = new FCircle(50);
float x = random(width - 100) + 50;
float y = random(height - 100) + 50;
circle.setPosition(x, y);
circle.setFillColor(bodyColor);
circle.setStatic(true);

// 以下をコメント解除すると丸が動き回るハードモードだぞ！
PVector p = PVector.random2D().mult(10000);
circle.addForce(p.x, p.y);
circle.setDamping(0);
circle.setDensity(0.2);
circle.setFriction(0);
circle.setRestitution(1);
circle.setStatic(false);
world.setEdges();
world.setGravity(0, 0);

world.add(circle);
}

[TN8001]

> 円を消すとスコアがもらえるようにしたい

スコア変数を用意し丸を消すところ（world.remove(body)）でスコアを増やします。
もちろんスコアの表示も必要です。

> また、円が現れる頻度を調整するためにはどこを変えればいいのでしょうか。

if (frameCount % 150 == 1) {
ここの150を小さくすると頻度が上がります。
frameCountは１秒で60進みます。
frameCount % 60とすれば１秒にいっこで、% 30とすれば 0.5秒にいっこです。
いまは2.5秒にいっこということです。

回答を更新しておきました。

[claus__]

ありがとうございます!!
ちょっとだけプログラムを書き換え、的については画像をインポートしました。
またスコアは500点単位にしたのですが、
タイトル画面をつくり、ゲーム終了後はタイトル画面に戻るプログラムってどうやるんでしょうか...
丸投げになってしまい本当に申し訳ありません...
現在のプログラムは以下の通りです。
import fisica.*;

FWorld world;
color bodyColor = #155AAD;
color hoverColor = #55AA11;

int timeLimit = 15;
int countDown;
int score;

void setup() {
fullScreen();

Fisica.init(this);
world = new FWorld();
world.setEdges();
world.setGravity(0, 0);

textSize(90);
}

void draw() {
background(255);

fill(0);
text("SCORE:" + score, width - 600, 100);

int ms = millis() / 1000; //制限時間
println(ms);

countDown = timeLimit - ms;
if (countDown > 0) {
if (countDown <= 10) {
text("COUNT DOWN :" + countDown, 100, 100);
}
} else {
background(255, 255, 0);
text("TIME OVER", 300, 400);
text("YOUR SCORE " + score, 960, 540);
return;
}

if (frameCount % 60 == 1) {
add();
}

for (Object body : world.getBodies()) {
((FBody)body).setFillColor(bodyColor);
}

FBody hovered = world.getBody(mouseX, mouseY);
if (hovered != null) {
hovered.setFillColor(hoverColor);
}

world.step();
world.draw();
}

void mousePressed() {
FBody body = world.getBody(mouseX, mouseY);
if (body instanceof FCircle) {
world.remove(body);
score+= 500;
}
}

void add() {
FCircle circle = new FCircle(135);
PImage photo;//画像を読み込むオブジェクト
photo = loadImage("2.png");//画層ファイルを読み込む
circle.attachImage(photo);//四角形に画像を貼り付ける。
float x = random(width - 100) + 50;
float y = random(height - 100) + 50;
circle.setPosition(x, y);
circle.setFillColor(bodyColor);

PVector p = PVector.random2D().mult(10000);
circle.addForce(p.x, p.y);
circle.setDamping(0);
circle.setDensity(0.2);
circle.setFriction(0);
circle.setRestitution(1);

world.add(circle);
}

[TN8001]

（コメントがあったことの）通知が来ないですね^^;

> タイトル画面をつくり、ゲーム終了後はタイトル画面に戻るプログラムってどうやるんでしょうか...

よくあるのはintやenumで、現在の画面を覚えておくような方法です。
[画面遷移機能　タイトル画面作り方](https://teratail.com/questions/paygxz3s5oq2ly)

その際は（ゲームに使った）変数の再初期化をする必要があります。
drawが長くなると見づらいので、関数に分けたほうがいいでしょう。

回答をさらに更新しておきました。

１秒にいっこ増やすよりも「消したら次が出る」ほうが、より（腕前の）差が出ませんかね？（あるいは両方の組み合わせ）

[claus__]

確かにその通りですね！そっちのほうが面白そうです！
最後の仕上げとして、このゲームまでのストーリーをMP4の動画で流したいです。
タイトル画面をクリックすると動画が再生される仕組みにしたいのですが、クリックするとフリーズしてしまいます。
現在のコードは以下の通りです。(ライブラリからMP4再生のソフト？はダウンロードし、dataフォルダにも該当の動画が入っているのですが...
また、コントローラーとしてArduinono
のためのプログラムも入れているのですがあまり気にしないでください)

import fisica.*;
import processing.serial.*;
import ddf.minim.*; //minimライブラリのインポート
import processing.video.*; //videoライブラリの読み込み
Movie mv; //Movie変数を宣言しmovと名付ける

Minim minim; //Minim型変数であるminimの宣言
AudioPlayer player; //サウンドデータ格納用の変数
AudioPlayer at;
AudioPlayer da;
AudioPlayer ha;
Serial myPort;
int x=0;
int y=0;
int z=0;
int c;
int k=0;
int mvt = 0;

FWorld world;
int timeLimit = 80;
int startMS; // ゲーム開始時間
int countDown;
int score;
PImage photo;
PImage photo2;
int teat=10;
int teatk=10;
int mvc = 0;

Scene scene = Scene.TITLE; // 現在の画面
enum Scene { // 画面を表すenum
TITLE, MVE, PLAY, GAMEOVER,
}

void setup() {
fullScreen();
background(255, 255, 0);
fill(0);
textSize(90);
minim = new Minim(this); //初期化
player = minim.loadFile("toy.mp3"); //button01a.mp3をロードする
at = minim.loadFile("attack1.mp3");
da = minim.loadFile("damage7.mp3");
ha = minim.loadFile("clapping_short.mp3");
player.play(); //再生
mv = new Movie(this, "11.mp4");

Fisica.init(this);
world = new FWorld();
world.setEdges();
world.setGravity(0, 0);

// 画像読み込みは初回１回でよい（同じ画像を使いまわす）
photo = loadImage("2.png");
photo2 = loadImage("5.png");
myPort=new Serial(this,"COM7",9600);
//3D図形の塗りは無し（ワイヤーフレーム描画）

//念のためバッファ領域を空にする
myPort.clear();
//とりあえず65という合図用データを送る
myPort.write(65);
}
//photo = loadImage("https://www.gravatar.com/avatar/65adad388f02d47ab7fb7e48579efe41?d=identicon", "png");

void draw() {

switch(scene) {
case TITLE:
title();
break;
case MVE:
mve();
break;

case PLAY:
play();
break;
case GAMEOVER:
gameover();
break;
}
image(mv, 0, 0);
}
void stop(){

player.close(); //サウンドデータを終了
minim.stop();
super.stop();
}

void title() {
background(255, 255, 0);

push(); // textAlignやtextSizeの変更がほかに影響しないように、push popで閉じ込める
textAlign(CENTER, CENTER); // センタリング
text("TOY STOLEN MANIA", 0, 0, width, height); // 画面中央

if (frameCount % 60 < 30) { // 点滅
textSize(44);
text("Mouse Click to Play", 0, height / 2, width, height / 2); // 画面下半分中央
}
pop();
}
void mve() {
mv.play();

if( mvt == 60){
mv.noLoop();

scene = Scene.PLAY;
startMS = millis(); // ゲーム開始時間記録
myPort.clear();
//とりあえず65という合図用データを送る
myPort.write(65);
background(0);
}
mvt++;

}

void play() {

background(255);

text("SCORE:" + score, width - 600, 100);

int ms = (millis() - startMS) / 1000; // 開始時間を引く

countDown = timeLimit - ms;
if (countDown <= 0) {
scene = Scene.GAMEOVER; // 結果画面に遷移
ha.play(); //再生
ha.rewind(); //再生が終わったら巻き戻しておく
}
if (countDown <= 10) {
text("COUNT DOWN :" + countDown, 100, 100);
}

if (frameCount % 60 == 1) {

add();
}

world.step();
world.draw();
image(photo2,x*10-25,y*4-25);
if(z==1){
teat++;
}
if(teat >= teatk){
if(z == 0){
at.play(); //再生
at.rewind(); //再生が終わったら巻き戻しておく
FBody body = world.getBody(x*10-25, y*4-25);
if (body instanceof FCircle) {
da.play(); //再生
da.rewind(); //再生が終わったら巻き戻しておく
world.remove(body);
score += 500;
teat =0;
}
}
}

}

void gameover() {
background(255, 255, 0);
player.rewind(); //再生が終わったら巻き戻しておく

push();
textAlign(CENTER, CENTER);
text("TIME OVER\nYOUR SCORE " + score, 0, 0, width, height);

if (frameCount % 60 < 30) {

textSize(44);
text("Mouse Click to Title", 0, height / 2, width, height / 2);
}
pop();
}

void mouseClicked() {

switch(scene) {
case TITLE:
startMS = millis(); // ゲーム開始時間記録
myPort.clear();
//とりあえず65という合図用データを送る
myPort.write(65);
background(255);
player.play(); //再生
scene = Scene.MVE; // ゲーム画面に遷移

break;

case GAMEOVER:

scene = Scene.TITLE; // タイトル画面に遷移
countDown = 0; // 変数再初期化
score = 0;
// FCircleだけを取り除くのはそこそこ面倒なので、FWorldごと作り直し（雑いｗ
world = new FWorld();
world.setEdges();
world.setGravity(0, 0);
break;
}
}

void mousePressed() {
myPort.clear();
//とりあえず65という合図用データを送る
myPort.write(65);

FBody body = world.getBody(mouseX, mouseY);
if (body instanceof FCircle) {
world.remove(body);
score += 500;
}
}

void add() {
FCircle circle = new FCircle(135);
circle.attachImage(photo);
float x = random(width - 100) + 50;
float y = random(height - 100) + 50;
circle.setPosition(x, y);

PVector p = PVector.random2D().mult(10000);
circle.addForce(p.x, p.y);
circle.setDamping(0);
circle.setDensity(0.2);
circle.setFriction(0);
circle.setRestitution(1);

world.add(circle);
}
void movieEvent(Movie m) {
m.read();
}
void serialEvent(Serial p){
//Arduinoから送られてきたデータが
//３個（２より多い）の場合
if(myPort.available()>2){
//x,y,zの順番でデータを読み込む
x=myPort.read();
y=myPort.read();
z=myPort.read();
//読み込み後、合図データ送信
myPort.write(65);
println(z);

}
}

[TN8001]

> タイトル画面をクリックすると動画が再生される仕組みにしたい

タイトル＞動画＞ゲームということですかね？

1. image(mv, 0, 0); はmve()の中にあるべきでしょう。
2. mv.play(); は再生したいタイミングで1回だけ呼びます。
3. if( mvt == 60){ では1秒で遷移する（けどいいの？）
4. mv.noLoop(); ではすぐには止まらない（最後まで再生してから止まる）

void draw() {
switch(scene) {
case TITLE: title(); break;
case MVE: mve(); break;
case PLAY: play(); break;
case GAMEOVER: gameover(); break;
}
}
void mve() {
image(mv, 0, 0);

if (mvt == 60) { // 60だと1秒だがいいのか？？
mv.stop();
scene = Scene.PLAY;
startMS = millis();
}
mvt++;
}
void mouseClicked() {
switch(scene) {
case TITLE:
scene = Scene.MVE;
mv.play();
break;
case GAMEOVER:
//省略
break;
}
}

それともゲーム中も動画が流れる想定？（だと全く外した回答になるが^^;

> クリックするとフリーズしてしまいます。
> ライブラリからMP4再生のソフト？はダウンロードし、dataフォルダにも該当の動画が入っているのですが...

「フリーズ」はちょっと確認できませんでした。
もしこのような最小例すら（該当動画で）動かないのであれば、別の質問として投稿してください。
[Movie / Reference / Processing.org](https://processing.org/reference/libraries/video/Movie.html)

[claus__]

友人のPCではちゃんと動くんですけどね…ちょっと調べてもよくわからなかったのでそれは一旦置いておき、的の種類を追加するのはどのようなプログラムにすればよいのでしょうか。
他の形の図形もでてくるようにして、的の種類ごとにスコアを変えたいのですが、自分には難しかったみたいです。
本当に頼りっぱなしで申し訳ございません。
完成後はベストアンサーに致します。

[TN8001]

> 友人のPCではちゃんと動くんですけどね

これは何に掛かっているのですか？
「MP4再生」の話ですか？「フリーズ」の話ですか？

> 他の形の図形もでてくるようにして、的の種類ごとにスコアを変えたい

add()するときにランダム？で、図形を選ぶようにすればいいでしょう。
それぞれを区別するには、setName・getNameが使えます。

[setName / FBody (Javadocs: fisica)](http://www.ricardmarxer.com/fisica/reference/fisica/FBody.html#setName(java.lang.String))
[getName / FBody (Javadocs: fisica)](http://www.ricardmarxer.com/fisica/reference/fisica/FBody.html#getName())

> 完成後はベストアンサーに致します。

↑ができたら完成ということでいいんでしょうか？
fisicaを持ち出したのは私ですから使い方等の説明はさせていただきますが、あまりだらだら続くのもどうかと感じています（コメントの通知が来ないのが特にだるいｗ

回答を更新しておきました。

Answer 2

float x = 0;
float tx = x - 50;

x=100;
println(tx);

としたらなにが表示されると思いますか?

tx = x - 50;(代入と初期化は微妙にちがうけどとりあえず話に関係ない)
というのは、プログラム上その場所に到達したとき xの値から50を減じた結果をtxに設定する
というだけの意味で、以降txを参照するごとに参照したときのxの値から50を引くわけではありません。

それと、原則としてdraw()が(デフォルトでは)毎秒60回実行される、という動作を阻害するようなことはしないほうがベターです。つまり、draw()の中でdelay(2500);などとしてそこに２.5秒間もとどまるべきではありません。