processingでのボタンでのY座標移動のやり方

Question

void setup() {
size(500, 300);
}
int w = 0;
int x = 20; // 円の中心のX座標
int vx = 4; // 速度
int y = 80;
int vy = 4;
int d;//長方形のY座標

void draw() {
d = mouseY ;
x += vx;

y += vy;
if (y - 20 < 0 || y + 20 > height) {
vy = -vy;
}
background(204);
ellipse(x, y, 40, 40);
if (x - 20 < 30 || x + 20 > 470) {
if (y > d && y < d + 100)
vx = -vx;
if ((keyPressed ==true) && (key == 'w')){
w = w + 5;
}else
w = w - 1;
}
rect(0, w, 30, 100); //長方形描写
rect(470, mouseY, 30, 100);
}

上記のプログラムで左右二つの長方形を操作して動くボールをラリーするものを作りたいです。右の長方形のY座標をマウス、左の長方形をWキーを押しているかいないかでうごかしたいのですが実行しても左の長方形が固まって動かなかったり長方形が消えたりしてうまくうごきません。右の長方形は正常です。

どうすればスムーズに動くようになりますか？
またrect(0, w, 30, 100)という表記の仕方では左の長方形のY座標を二つのキーに割り当てることは出来ないのでしょうか？
JavaScriptで実行しています。

Answer 1

W押したとき押さなかったときで上下したいとわかったので、こんな感じになるのかなと

※位置更新と描画は分けたほうがわかりやすいです(UpdateとDraw)

void setup() {
  size(500, 300);
}
int w = 0;
int x = 20; // 円の中心のX座標
int vx = 4; // 速度
int y = 80;
int vy = 4;
int d;//長方形のY座標

void update() {
  // 棒の動き
  {
    // 右の棒のY
    d = mouseY ;

    // 左の棒のY
    if ((keyPressed ==true) && (key == 'w')){
      w = w + 5; 
    }
    else {
      w = w - 1;
    }
  }
  
  // ボールの動き
  x += vx;
  y += vy;
  if (y - 20 < 0 || y + 20 > height) {
    vy = -vy;
  }

  // 当たり判定
  // 左の棒(ただしXが棒より左の判定がないので入れてね)
  if (x - 20 < 30 && vx < 0) {
    if (y > w && y < w + 100) {
      vx = -vx;
    }
  }
  // 右の棒(ただしXが棒より右の判定がないので入れてね)
  else if (x + 20 > 470 && vx > 0) {
    if (y > d && y < d + 100) {
      vx = -vx;
    }
  }
}

void draw() {
　// 移動処理(更新処理)
  update();
  
  background(204);
  ellipse(x, y, 40, 40);
  
  rect(0, w, 30, 100); //長方形描写
  rect(470, d, 30, 100);
}

Comments

[arazin12]

void setup() {
size(500, 300);
}
int w = 0;
int x = 20; // 円の中心のX座標
int vx = 4; // 速度
int y = 80;
int vy = 4;
int d;//長方形のY座標

void draw() {
background(204);
d = mouseY ;
x += vx;

y += vy;
if (y - 20 < 0 || y + 20 > height) {
vy = -vy;
}
ellipse(x, y, 40, 40);
if (x - 20 < 30 || x + 20 > 470) {
if (y > d && y < d + 100)
vx = -vx;
if ((keyPressed ==true) && (key == 'w')){
w = w + 5;
}else
w = w - 5;
}
rect(0, mouseY, 30, 100); //長方形描写
rect(470, w, 30, 100);
}

コメントしてもらったところを見て左の長方形をボタンで動かすからダメなのかと思い、右の長方形を動くようにしたのですがそういうことではないんでしょうか。

[rururu3]

質問である、「左の長方形をWキーを押しているかいないかでうごかしたい」
が、Wキーを押してたらどう動いて押してなかったらどう動くかが書かれてないので、そこがわかればもう少し解説しやすくなります。

[arazin12]

なるほどすみません。Wを押したら長方形が下方向に、離したら上方向に上がっていくような形にしたいです。

[rururu3]

回答修正しますね

[rururu3]

あと忘れていたのですが、これJavaScriptではなくJavaなのでタグなど修正しておいたほうがいいです

[arazin12]

わかりやすく教えてくれてありがとうございます。