Processing 単純ゲーム制作中 あたり判定と分からない所を教えてください。

Question

コード
//プレイヤーの設定
int playerx=400; //プレイヤーのｘ座標
int playery=500; //プレイヤーのy座標
int playerw=60;  //プレイヤーの幅
int playerh=30; //プレイヤーの高さ
int maruw=30; //物体の幅
int maruh=30; //物体の高さ
int[]maruy=new int[20];//物体のy座標は０～１９までの２０個の変数
int[]maruColor= new int[20];//物体の色設定
//int[]maruSpeed=new int[20];
int[]marutaiki=new int[20];

float r;
float g;
float b;

void setup(){ // 初期設定
  size(800,600);  //800×600サイズ
  noStroke(); // 線なし
  r=random(255);
  g=random(255); //ランダムに表示
  b=random(255);
  for(int i=0; i<20; i++){  //繰り返す変数iは０～１９まで変化する
    maruy[i]=40; //４０を代入
    maruColor[i]=int(random(2));
    //maruSpeed[i]=int(random(2,6));
  }
}
void draw(){
  background(0);  //背景の色は黒
  playersettei();
  marusettei();
  maruMove();

}

void playersettei(){ //プレイヤーの表示
  if(mousePressed){  //マウスを押すとプレイヤーのバーが表れる
   rect(mouseX,playery,playerw,playerh,5);
    fill(r,g,b);
    r=random(255); //マウスを押すたびにバーの色がランダムに変わる
    g=random(255);
    b=random(255);
  }
   //if((playerx+playerw)>800){
   //  playerx =800;
}
void marusettei(){ //物体の設定
  for(int i=0; i<20; i++){  //赤い球体の物体を２０個並べる繰り返しの処理
    if(maruColor[i]==0){  //
      fill(0,255,255);
    }else{
      fill(255,0,255);
    }
    ellipse(i*40+20,maruy[i],maruw,maruh);
  }
  
}
void maruMove(){
  for(int i=0; i<20; i++){
    if(marutaiki[i]>0){
      marutaiki[i]--;
    }else{
      maruy[i]+=2;
    }
    maruy[i] +=2;
    if(maruy[i]>height){
      maruy[i]=40;
      maruColor[i]=int(random(2)); //物体の色の配置がランダムで変わる
      marutaiki[i]=int(random(60,240));
    }
  }
}


```### 前提・実現したいこと
ゲームを作っています。理想のゲームは、マウスを押すと四角いバーが出てきてそのバーは色が二色に変わります(今の場合、紫と水色に突然的に変わります、なぜそうなっているのかわからない・・）そしてボールが上からランダムに色の配置を変えながら落ちてきます。バーの色(例えば水色）の時に同じ色(水色）のボールに触れたらポイントゲットです。あたり判定の仕方も教えてください。とあるサイトのゲームを参考に自分で考えながら作っているのでよく解らないコードになっていると思いますが初心者なので詳しく教えてくださるとうれしいです。

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

### 発生している問題・エラーメッセージ
バーの色が勝手にランダムになる。ｺｰﾄﾞにrandomを入れてあるのは最初バーの色をランダムに設定したからです。でも球体を追加したら球体の色と同じになってしまいました。
for文の解説ももっと分かりやすいのが有ったら教えてください。

エラーメッセージ

### 該当のソースコード
//プレイヤーの設定
int playerx=400; //プレイヤーのｘ座標
int playery=500; //プレイヤーのy座標
int playerw=60;  //プレイヤーの幅
int playerh=30; //プレイヤーの高さ
int maruw=30; //物体の幅
int maruh=30; //物体の高さ
int[]maruy=new int[20];//物体のy座標は０～１９までの２０個の変数
int[]maruColor= new int[20];//物体の色設定
//int[]maruSpeed=new int[20];
int[]marutaiki=new int[20];

float r;
float g;
float b;

void setup(){ // 初期設定
  size(800,600);  //800×600サイズ
  noStroke(); // 線なし
  r=random(255);
  g=random(255); //ランダムに表示
  b=random(255);
  for(int i=0; i<20; i++){  //繰り返す変数iは０～１９まで変化する
    maruy[i]=40; //４０を代入
    maruColor[i]=int(random(2));
    //maruSpeed[i]=int(random(2,6));
  }
}
void draw(){
  background(0);  //背景の色は黒
  playersettei();
  marusettei();
  maruMove();

}

void playersettei(){ //プレイヤーの表示
  if(mousePressed){  //マウスを押すとプレイヤーのバーが表れる
   rect(mouseX,playery,playerw,playerh,5);
    fill(r,g,b);
    r=random(255); //マウスを押すたびにバーの色がランダムに変わる
    g=random(255);
    b=random(255);
  }
   //if((playerx+playerw)>800){
   //  playerx =800;
}
void marusettei(){ //物体の設定
  for(int i=0; i<20; i++){  //赤い球体の物体を２０個並べる繰り返しの処理
    if(maruColor[i]==0){  //
      fill(0,255,255);
    }else{
      fill(255,0,255);
    }
    ellipse(i*40+20,maruy[i],maruw,maruh);
  }
  
}
void maruMove(){
  for(int i=0; i<20; i++){
    if(marutaiki[i]>0){
      marutaiki[i]--;
    }else{
      maruy[i]+=2;
    }
    maruy[i] +=2;
    if(maruy[i]>height){
      maruy[i]=40;
      maruColor[i]=int(random(2)); //物体の色の配置がランダムで変わる
      marutaiki[i]=int(random(60,240));
    }
  }
}


```ここに言語名を入力
ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[y_waiwai]

このままではコードが読みづらいので、質問を編集し、<code>ボタンを押し、出てくる’’’の枠の中にコードを貼り付けてください

[aiaiaiai]

修正依頼ありがとうございます。
宜しくお願い致します。

[thkana]

あと、tagの[文字コード]って、なにか関係あるのかしら?

[aiaiaiai]

すみません。どれのことでしょうか。。

[TN8001]

当たり判定は英語ですがコピペで動くコード付きで丁寧に書かれていて分かりやすそうでした。
http://www.jeffreythompson.org/collision-detection/circle-rect.php

[thkana]

PCのブラウザであれば、ページの一番上のほうにxxに関する質問、としていくつか並んでいるうちに[文字コード]というのがあります(あなたが質問の時に指定したもののはず)が関係ないのでは。
もし変更するのであれば、質問の[編集]に入ると、質問の下にその質問に関連した用語がいくつか並んでいると思います。[文字コード]がこの質問に関係ないと思うのであれば、その横のバツ印をクリックすれば...多分消えると思うのですが(自分ではやったことない)

スマホだったら...知りません。

[aiaiaiai]

なるほど。わかりました。修正してみます。

[thkana]

距離の計算はdist()関数がせっかく用意されているので使ってほしいな、なんて思ったり>TN8001さん

[TN8001]

参考コードに対する突込みですね？
2点の距離は標準で用意されているんですね^^

基本シェイプの当たり判定を簡単にできるライブラリがないのかなと思ってざっと探したんですがないんですかねぇ。

コードも書きかけたのですが、ゲームの仕様がわからなくて書けませんでした^^;

[aiaiaiai]

TN8001さん
もしよろしければコードを教えていただけないでしょうか。
このゲームは、画面下にあるバーが５秒ごとに水色、紫に変わります。そして上から２０個物体(円）がランダムに配色を変えて落ちてきます。プレイヤーはバーの色と一緒の物体に触れることができたらポイントゲットです。
分かりずらいところがあれば言ってください。是非お願い致します。

Answer 1

質問中のコードは、
｀｀｀Processing
(｀記号はわざと全角にしています。本来は半角)
ソースコード
｀｀｀
の「ソースコード」のところを置き換える形で書き込んで下さい。｀｀｀の後に言語名を書くと多少色付けとか変わるみたいなので、Processingと書いておきます。そうすると、以下のようにコードが(それっぽく)表示されるはずです。編集してみて下さい。

void playersettei() { //プレイヤーの表示
  if (mousePressed) {  //マウスを押すとプレイヤーのバーが表れる
    rect(mouseX, playery, playerw, playerh, 5);
    r=random(255); //マウスを押すたびにバーの色がランダムに変わる
    g=random(255);
    b=random(255);
    fill(r, g, b);
  }
  //if((playerx+playerw)>800){
  //  playerx =800;
}

で、この関数は、

• これまでの描画色で四角(プレイヤーのバー)を描き
• r,g,bを乱数で発生して
• その色を設定する

という処理をしています。現実としては、「これまでの描画色」とはなんでしょう。観察してみて下さい。右端のボールの色とバーが同じになるような変化をしているはずです。これが

バーの色が勝手にランダムになる。

の現象です。

もし、乱数で発生した色でバーを描画したいのなら、

    r=random(255); //マウスを押すたびにバーの色がランダムに変わる
    g=random(255);
    b=random(255);
    fill(r, g, b);
    rect(mouseX, playery, playerw, playerh, 5);

の順にしなければいけないわけですが...

これでは多分期待しているのと違うことが起こるかと思います。やってみて、何が起こるか確かめて、なぜそうなるか考えてみて下さい。

---

当たり判定。

図の通り。プレーヤーのバーに対して、物体(円)の中心が赤線のエリアの内側だったら「あたり」。物体一つ一つについてこれを調べればいいわけです。一つの式でど～んと、というのも出来ないとはいいませんが、赤線のエリアをいくつかに分割して調べた方が混乱しないで考えられると思います。(なお、バーの角の丸みは面倒になるので端折っています。こだわるなら自力でどうぞ)
例えば、

• (playerx,playery-maruh/2)と(playerx+playerw,playery+plyaerh+maurh/2)を対角とする長方形
• (playerx-maruw/2,playery)と(playerx+playerw+maruw/2,playery+playerh)を対角とする長方形
• (playerx, playery)を中心とする半径maruh/2の円内
• (playerx+playerw,playery)を中心とする半径maruh/2の円内
• (playerx+playerw,playery+playerh)を中心とする半径maruh/2の円内
• (playerx,playery+playerh)を中心とする半径maruh/2の円内

のいずれかにいずれかの物体の中心i*40+20,maruy[i]が入っていれば「あたり」なわけですね。

Comments

[aiaiaiai]

ありがとうございます
本来やりたかった感じになりました。
このあとのあたり判定ももし可能でしたら教えていただきたいです。

[thkana]

ふむ、あれで良かったんですか。そうするとボールと同じ色を狙うってのはとてつもなく難しいことのような気がしますが...まぁいいか。
「あたり判定」ですね。
では、「あたる」とはどういうことか定義してみて下さい。

[aiaiaiai]

確かにバーの色がランダムになっていると変ですよね。そう思ってバーの色をランダムというか一定の時間(例えば５秒）ごとに水色か紫になればいいと思い、ifとif elseでコードをうってみたのですが、初心者のあまりうまくいかず紫になってしまいました。ここにヒントをいただけないですか？？

[aiaiaiai]

あたり判定はバーとボールが重なっている時を真としています。
そんな感じしかよく解りません・・・

[thkana]

色切り替え
いくつか方法はあるでしょうが、
playerColor変数を設置して、maruColorと同様の手順で水色または紫で描画することとして、
マウスボタンが「押された」(=いままで押されていなかった、いまは押されている)ときにはランダムで0または1をplayerColorに設定。
また、押されている時間をカウントする変数を設定し、
マウスボタンが押されていないときはカウントを0に
マウスボタンが「押されている」間カウントを1ずつ増加する。draw()は1/frameRate秒毎に実行されるのだから、カウントがN*frameRateで割り切れるかどうかを調べればN秒毎という時間が測れるので、割り切れた時にはplayerColorを反転する。
とかでどうでしょう。

[aiaiaiai]

thkanaさん
ありがとうございます。
図まで書いていただいて恐縮です。
void hitCheck(){
int marux;
for(int i=0; i<20; i++){
marux=i*40;20;
if((playerx,playery-maruh/2)&&(playerx+playerw,playery+playerh+maruh/2)
最初のとこらへんなのですがこういった感じであってますでしょうか。
返信宜しくお願いします。

[thkana]

> if((playerx,playery-maruh/2)&&playerx+playerw,playery+playerh+maruh/2)
聞く前に自分で試してみたら? デバッグ依頼はだめでしょ。(依頼にしても実行出来るものにして欲しい)

Answer 2

• グローバル変数（playerx等）をできるだけ減らし、変数の取り違え等のミスの可能性を下げました。
• playerxやplayerw等関連する値はクラスにまとめ、クラスのオブジェクトして扱いました。
• void playersettei()やvoid marusettei()等の関数を各クラスの関数にして、責務をはっきりさせました。
• 組み込みの変数と名前が被らないように、定数（大文字）メンバ変数（_小文字）等命名に注意しました。
• fill(0,255,255)等ぱっと見何色かわからないので、color型で分かりやすい名前を付けました。

// 5秒おきにランダムに変わるという仕様ですが、急に変わってイラっとしたｗ のと、
// 半分の丸が無駄になるのが気になって、マウスを押すたびに交互に代わるように勝手に変えました^^;
// 5秒おきにする場合は RANDOM_CHANGE = true; に変えてください
final boolean RANDOM_CHANGE = false;

final color CYAN = color(0, 255, 255); // 水色
final color MAGENTA = color(255, 0, 255); // 紫

Player player; // 操作する四角
Circle[] circles = new Circle[20]; // 降ってくる丸の配列
int score; // 点数

void setup() {
  size(800, 600);
  noStroke();

  // 四角の初期化
  player = new Player(400, 500, 60, 30); // 初期位置と幅、高さ

  // 丸たちの初期化
  for (int i = 0; i < circles.length; i++) {
    int x = i * 40 + 20;
    int y = -int(random(height)); // 初期Y座標をランダムな画面外座標にすることによって、出現順をランダムにする
    circles[i] = new Circle(x, y, 15); // 初期位置と半径
  }
}

void draw() {
  background(0);

  player.update(); // 四角の位置をマウスX座標に更新
  player.draw(); // 四角を描画

  for (int i = 0; i < circles.length; i++) {
    circles[i].update(); // 当該丸の位置を更新（落下）
    if (player.isCollision(circles[i])) { // 四角と当該丸が接触していたら。。。
      circles[i].dead(); // 丸を破壊扱いにする

      if (player.getColor() == circles[i].getColor()) { // 四角と当該丸が同じ色だったら。。。
        score += 10; // スコアをプラス
      } else { // 四角と当該丸が違う色だったら。。。
        score -= 100; // スコアをマイナス
      }
    }

    circles[i].draw(); // 当該丸を描画（破壊状態だったら描画しないようにしてあるので、無条件に呼んでok）
  }

  // スコアを描画
  fill(255); // 白
  textSize(20); // フォントサイズ
  text("SCORE", 10, 30);
  text(score, 100, 30);

  // 秒数を描画
  int seconds = frameCount / 60;
  text("TIME", 10, 60);
  text(seconds, 100, 60);
}

// マウスを押した瞬間
void mousePressed() {
  if (!RANDOM_CHANGE) { // 5秒おきモードでなければ色を変える
    player.changeColor();
  }
}


// 丸に関連する処理をまとめたクラス
class Circle {
  private int _x; // X座標
  private int _y; // Y座標
  private int _radius; // 半径
  private int _speed; // 落下速度
  private color _color; // 色
  private boolean _isAlive; // 生死状態

  // コンストラクタ X座標, Y座標, 半径
  Circle(int cx, int cy, int radius) {
    _x = cx;
    _y = cy;
    _radius = radius;
    _speed = int(random(1, 4)); // 落下速度 ランダム
    _isAlive = true; // 最初は生き
    changeColor(); // 色 ランダム
  }

  // X座標の取得
  int getX() {
    return _x;
  }
  // Y座標の取得
  int getY() {
    return _y;
  }
  // 半径の取得
  int getRadius() {
    return _radius;
  }
  // 色の取得
  color getColor() {    
    return _color;
  }
  // 生死状態の取得
  boolean isAlive() {
    return _isAlive;
  }

  // 破壊状態に変更
  void dead() {
    _isAlive = false;
  }

  // 描画
  void draw() {
    if (_isAlive) { // 生き状態時のみ描画
      fill(_color);
      ellipse(_x, _y, _radius * 2, _radius * 2);
    }
  }

  // 位置の更新
  void update() {
    _y += _speed;
    if (height < _y) { // 画面外に落ちたら状態をリセット
      _y = -_radius * 2;
      _isAlive = true;
      _speed =int(random(1, 4));
      changeColor();
    }
  }

  // 色をランダムに変える
  void changeColor() {
    _color = int(random(2)) == 0 ? CYAN : MAGENTA;
  }
}


// 四角に関連する処理をまとめたクラス
class Player {
  private int _x; // X座標
  private int _y; // Y座標
  private int _width; // 幅
  private int _height; // 高さ
  private color _color; // 色

  // コンストラクタ X座標, Y座標, 幅, 高さ
  Player(int x, int y, int w, int h) {
    _x = x;
    _y = y;
    _width = w;
    _height = h;
    _color = CYAN; // 最初は水色
  }

  // 色の取得
  color getColor() {
    return _color;
  }

  // 描画
  void draw() {
    if (mousePressed) { // マウスが押されている時だけ描画
      fill(_color);
      rect(_x, _y, _width, _height, 5);
    }
  }

  // 位置の更新
  void update() {
    _x = mouseX - (_width / 2); // マウス位置に中心を合わす

    if (RANDOM_CHANGE) { // 5秒おきモードの場合色を変える
      // frameCountはフレームごとに1増える デフォルトでは1秒60フレーム
      // frameCount % 2 == 0なら交互に frameCount % 10 == 0なら10フレームに1回
      // frameCount % (60 * 5) == 0なら300フレームに1回 = 5秒に1回
      if (frameCount % (60 * 5) == 0) {
        changeColor();
      }
    }
  }

  // 色を変える
  void changeColor() {
    if (RANDOM_CHANGE) { // 5秒おきモードの場合。。。
      _color = int(random(2)) == 0 ? CYAN : MAGENTA; // ランダムに変える
    } else {
      _color = _color == CYAN ? MAGENTA : CYAN; // 交互に変える
    }
  }

  // 丸との当たり判定
  boolean isCollision(Circle circle) {
    if (!mousePressed) return false; // マウスが押されてなければ当たっていない
    if (!circle.isAlive()) return false; // 丸が破壊されていれば当たっていない

    // いろいろ計算^^;
    boolean isCollision = circleRect(circle.getX(), circle.getY(), circle.getRadius(), _x, _y, _width, _height);

    // 例えば丸を取るほど幅が広がる とか
    //_width += isCollision ? 2 : 0;
    return isCollision;
  }

  // 以下参考コードをちょい変更
  // http://www.jeffreythompson.org/collision-detection/circle-rect.php
  // CIRCLE/RECTANGLE
  private boolean circleRect(int cx, int cy, int radius, int rx, int ry, int rw, int rh) {

    // temporary variables to set edges for testing
    int testX = cx;
    int testY = cy;

    // which edge is closest?
    if (cx < rx) testX = rx;      // test left edge
    else if (cx > rx + rw) testX = rx + rw;   // right edge
    if (cy < ry) testY = ry;      // top edge
    else if (cy > ry + rh) testY = ry + rh;   // bottom edge

    // get distance from closest edges
    //    float distX = cx - testX;
    //    float distY = cy - testY;
    //    float distance = sqrt((distX * distX) + (distY * distY));
    float distance = dist(cx, cy, testX, testY);

    // if the distance is less than the radius, collision!
    if (distance <= radius) {
      return true;
    }
    return false;
  }
}

クラスに分けると処理があっちこっちに飛んで、わかりにくく感じるかもしれません。
しかし機能を変更や追加をしようとしたときに、
「Playerのあの関数を見ればいいんだ」
「Playerに新たに関数を追加しよう」
等、どこを変えればいいのかが明瞭になり、作っていくうちにだんだんメリットを感じてくると思います。

---

final boolean RANDOM_CHANGE = false;
final color CYAN = color(0, 255, 255);
final color MAGENTA = color(255, 0, 255);
final int MARU_RADIUS = 15;
final int MARU_COUNT = 20;

int playerX = 400;
int playerY = 500;
int playerWidth = 60;
int playerHeight = 30;
color playerColor = CYAN;

int[] marusX = new int[MARU_COUNT];
int[] marusY = new int[MARU_COUNT];
color[] marusColor = new color[MARU_COUNT];
int[] marusSpeed = new int[MARU_COUNT];
boolean[] marusAlive = new boolean[MARU_COUNT];

int score;

void setup() {
  size(800, 600);
  noStroke();

  for (int i = 0; i < MARU_COUNT; i++) {
    marusX[i] = i * 40 + 20;
    marusY[i] = -int(random(height));

    if (int(random(2)) == 0) {
      marusColor[i] = CYAN;
    } else {
      marusColor[i] = MAGENTA;
    }

    marusSpeed[i] = int(random(1, 4));
    marusAlive[i] = true;
  }
}

void draw() {
  background(0);

  // player更新
  playerX = mouseX - (playerWidth / 2);
  if (RANDOM_CHANGE) {
    if (frameCount % (60 * 5) == 0) {
      if (int(random(2)) == 0) {
        playerColor = CYAN;
      } else {
        playerColor = MAGENTA;
      }
    }
  }

  // player描画
  if (mousePressed) {
    fill(playerColor);
    rect(playerX, playerY, playerWidth, playerHeight, 5);
  }


  for (int i = 0; i < MARU_COUNT; i++) {
    // maru更新
    marusY[i] += marusSpeed[i];
    if (height < marusY[i]) {
      marusY[i] = -MARU_RADIUS * 2;
      marusAlive[i] = true;
      marusSpeed[i] =int(random(1, 4));

      if (int(random(2)) == 0) {
        marusColor[i] = CYAN;
      } else {
        marusColor[i] = MAGENTA;
      }
    }

    // 当たり判定
    if (mousePressed) {
      if (marusAlive[i]) {
        if (circleRect(marusX[i], marusY[i], MARU_RADIUS, playerX, playerY, playerWidth, playerHeight)) {
          marusAlive[i] = false;

          if (playerColor == marusColor[i]) {
            score += 10;
          } else {
            score -= 100;
          }
        }
      }
    }

    // maru描画
    if (marusAlive[i]) {
      fill(marusColor[i]);
      ellipse(marusX[i], marusY[i], MARU_RADIUS * 2, MARU_RADIUS * 2);
    }
  }

  fill(255);
  textSize(20);
  text("SCORE", 10, 30);
  text(score, 100, 30);

  int seconds = frameCount / 60;
  text("TIME", 10, 60);
  text(seconds, 100, 60);
}

void mousePressed() {
  if (!RANDOM_CHANGE) {
    if (playerColor == CYAN) {
      playerColor = MAGENTA;
    } else {
      playerColor = CYAN;
    }
  }
}


// 以下参考コードをちょい変更
// http://www.jeffreythompson.org/collision-detection/circle-rect.php
// CIRCLE/RECTANGLE
private boolean circleRect(int cx, int cy, int radius, int rx, int ry, int rw, int rh) {

  // temporary variables to set edges for testing
  int testX = cx;
  int testY = cy;

  // which edge is closest?
  if (cx < rx) testX = rx;      // test left edge
  else if (cx > rx + rw) testX = rx + rw;   // right edge
  if (cy < ry) testY = ry;      // top edge
  else if (cy > ry + rh) testY = ry + rh;   // bottom edge

  // get distance from closest edges
  //    float distX = cx - testX;
  //    float distY = cy - testY;
  //    float distance = sqrt((distX * distX) + (distY * distY));
  float distance = dist(cx, cy, testX, testY);

  // if the distance is less than the radius, collision!
  if (distance <= radius) {
    return true;
  }
  return false;
}

Comments

[TN8001]

好き勝手に書いちゃったので、参考にされてもされなくても構いません。
もちろんコードについてわからない点があればお気軽にどうぞ^^
これが正解というのがないのが、面白いところでもあり難しいところでもありますね。

3倍のコード量になっちゃいましたが、ゲッター（getX()等）なんかはProcessingでは直接_xが見えてしまうので不要かもしれません。

[thkana]

(雑感)JavaとかC/C++の質問であればガシガシとテクニックを繰り出して説明すればいいんですけど、ProcessingとかArduinoだとそもそもが「プログラミングの門外漢でもそれなりにコンピュータを動かせますよ～」と釣っているので、どこまで盛り込むかはいつも悩ましいところですよね。

[aiaiaiai]

ありがとうございます。
実行して見たらまさに理想形になりました！
しかし、まとめられてしまうといまいち理解できず苦しんでいます。。
お願いと云うかもし可能であればもっと分かりやすいというか初心者でもわかるコードで書いていただけると参考になります！

[TN8001]

クラスを使わずintやint[]のままが良いという意味ですか？
比較のために同内容になるように書いてみます（が、あまり乗り気がしないのでちょっと時間かかるかもしれません^^;

[aiaiaiai]

そうしていただきたいです。。すみません
クラスなどはまだ使わずに１から理解したいので。
お願い致します

[TN8001]

割と素直に関数化したものと、全部展開したもの
3パターン張ろうとしたら文字数オーバーでしたｗ
とりあえず全部展開版を追記しましたが、わかりやすいかどうかがわかりません^^;

[aiaiaiai]

ありがとうございます！！
これからこちらを参考にさせていただいてコードを書いてみます。
ここで質問なのですがCYANとはどういう意味でしょうか。
調べてみたのですが答えにたどり着くことができませんでした。

[TN8001]

色の三原色 シアン マゼンタ イエロー
のシアンです

[aiaiaiai]

なるほど。ありがとうございます！

[aiaiaiai]

TN8001さん
すみません。
// player更新
playerX = mouseX - (playerWidth / 2);
if (RANDOM_CHANGE) {
if (frameCount % (60 * 5) == 0) {
if (int(random(2)) == 0) {
playerColor = CYAN;
} else {
playerColor = MAGENTA;
}
}
}
この部分がどうしても理解できず先に進めません、frameCountがわからないです。％は余りを出すということで間違いないでしょうか？？

[TN8001]

frameCountはフレームごとに1増えます。デフォルトでは1秒60フレームです。
なので実行してから1秒後には60になっています。5秒後には300で、1分後には3600です。

％は余りで合っています。
frameCount % 300が0になるのはframeCountが300の倍数の時です（300,600,900,1200,...）
つまり5秒に1回playerColorを変えるということです。

連続する数字を割った余りを使ってｎ個おきに何かする」というのはよく出てくるので、％が出てきたらそういうことかな？と思ってよいです。