# Whack-a-Mole Game. Make Mole Change Color When Hit

**URL:** <https://discourse.processing.org/t/whack-a-mole-game-make-mole-change-color-when-hit/6523>\
**Category:** Coding Questions\
**Created:** [December 12, 2018, 12:07am UTC](https://discourse.processing.org/t/whack-a-mole-game-make-mole-change-color-when-hit/6523 "2018-12-12T00:07:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rapide](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rapide/32/2775_2.png) [@Rapide](https://discourse.processing.org/u/Rapide)\
**Post date:** [December 12, 2018, 12:07am UTC](https://discourse.processing.org/t/whack-a-mole-game-make-mole-change-color-when-hit/6523/1 "2018-12-12T00:07:23Z")

</div>

I’m making a whack a mole game for my class assignment. I’m pretty much finished besides the final step, which is to make the mole change color when it is clicked on by the mouse, but I’m having trouble doing so.

I want to define a method called molehit in my class which will only set the color of the mole to something else. And use a mousePressed function to check if the click was on the moving mole’s hitbox.  
Finally, it has to loop the condition through the array of moles.

```auto
Mole[] moles = new Mole[4];
Mole myMole;
PFont f;
void setup() {
  size(1350, 600); 
  colorMode(RGB, 100); 
  background(100);
  moles[0] = new Mole (color(80, 40, 30), 165, 270, 2);
  moles[1] = new Mole (color(80, 10, 20), 465, 270, 4);
  moles[2] = new Mole (color(60, 20, 50), 765, 270, 3);
  moles[3] = new Mole (color(70, 40, 50), 1065, 270, 5);
  f = createFont("Georgia", 16);
} 

void draw() {
  background(50, 100, 50);
  stroke(0); 
  fill(40); 
  rect(150, 150, 120, 120); //hole 1
  stroke(0);
  fill(40); 
  rect(450, 150, 120, 120); //hole 2
  stroke(0); 
  fill(40); 
  rect(750, 150, 120, 120); //hole 3
  stroke(0); 
  fill(40); 
  rect(1050, 150, 120, 120); //hole 4
  moles[0].move();
  moles[0].display();
  moles[1].move();
  moles[1].display();
  moles[2].move();
  moles[2].display();
  moles[3].move();
  moles[3].display();
  stroke(50, 100, 50);
  fill(50, 100, 50);
  rect(150, 271, 300, 300); //mole mask
  stroke(50, 100, 50);
  fill(50, 100, 50);
  rect(450, 271, 300, 300); //mole mask 2
    stroke(50, 100, 50);
  fill(50, 100, 50);
  rect(750, 271, 300, 300); //mole mask 3
    stroke(50, 100, 50);
  fill(50, 100, 50);
  rect(1050, 271, 300, 300); //mole mask 4
  textFont(f, 72); 
  textAlign(CENTER);
  fill(0); 
  text("Whack-a-Mole!", 675, 450);
}
Mole object;
class Mole {
  color c;
  float xpos;
  float ypos;
  float speed;
  Mole(color tempc, float tempxpos, float tempypos, float tempspeed) {
    c = tempc; 
    xpos = tempxpos; 
    ypos = tempypos; 
    speed = tempspeed;
  }
  void display() {

    stroke(0); 
    fill(c); 
    rect(xpos, ypos, 90, 140); //mole
  }
  void move() {
    ypos = ypos + speed; 
    if ( (ypos > 270) || ( ypos < 130 ) ) { 
      speed = speed* -1;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![TPMoyer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tpmoyer/32/2138_2.png) [@TPMoyer](https://discourse.processing.org/u/TPMoyer)\
**Post date:** [December 12, 2018, 3:58am UTC](https://discourse.processing.org/t/whack-a-mole-game-make-mole-change-color-when-hit/6523/2 "2018-12-12T03:58:01Z")

</div>

Hey Rapide:  
Had hacked up some of the code from Jose Luis Garcia del Castillo 2017  
[https://github.com/garciadelcastillo/-dashed-lines-for-processing-](https://github.com/garciadelcastillo/-dashed-lines-for-processing-)  
as a utility for being able to put drag-drop line segments or 4 point bezier curves on some sketches.

The attached code includes the mouse interactivity, so should get you started.  
I also have it so that after you click on one of the dots, that dot is remembered as “active” and thereafter if you hit one of the 104 keyboard isolated arrow keys (not the ones in the numeric block, the 4 off by themselves) the attached point will be shifted by one pixel. Did not activate the auto-key-repeat, but only the arrow-key keyPressed.  
The points you will be able to use directly are to have a class for the moles (Node for the del Castilo code), and the mouse behavior (mousePressed and mouseReleased). The feedkeys() function is where I put in the more custom behavior.

```auto
sketch_mouse_interactive.pde 
  /* the dashedlines library is credited with the source concepts/code */
  /* have hacked it up enough that the mouse interactivity does not require it's presence */
  //import garciadelcastillo.dashedlines.*;
  
  //int bezier0Line1=10; /* I normally have these "turned off" by having this trigger variable set to 10 */ 
  int bezier0Line1=0;
  
  /* I normally flip the Y to have +Y go from bottom to top, so salted in this variable into the appropriate
  lines to work either way */
  boolean yInverted=false; 
  //boolean yInverted=true;
  
  void setup() {
    size(718,996); /* dash lines works in default renderer, will not work in P2D or P3D */
   
     colorMode(RGB, 1);
    if(0==bezier0Line1)initializeBezierNodes();
    else if(1==bezier0Line1)initializeLineNodes();
  
    //background(1.);   
    frameRate(4);
    //noLoop();
  }
  
  void draw() {
    //frame.setTitle(round(frameRate) + " fps");
   
    if(yInverted){
      translate(0,height);
      scale(1,-1);
    }  
    
    background(1.);
    //background(.95);
     
    feedKeys();
    if(0==bezier0Line1)drawBezierDraggable();
    if(1==bezier0Line1)drawLineDraggable();
  }

```

```auto
bezier_Edit.pde
  /* 
   * based on Dashed Lines for Processing, by Jose Luis Garcia del Castillo 2017
   * https://github.com/garciadelcastillo/-dashed-lines-for-processing- 
  */
  Node[] n;
  float dist = 0;
  float[] offsetXs;
  float[] offsetYs;
  int tagged=-1;
  boolean didMove=false;
  
  void initializeBezierNodes() {
    /* wanted the control points to be some distance away from their mouse-draggable indicator dots */
    offsetXs = new float[4];
    offsetYs = new float[4];  
    offsetYs[0]= yInverted? 35:-35;
  // offsetYs[0]= yInverted?0:0; 
    offsetYs[3]= yInverted?-35: 35;
  // offsetYs[3]= yInverted? 0:0;
    offsetXs[1]= 35;
    offsetXs[2]=-35;
    n = new Node[4];
    n[0] = new Node(0.25 * width, 0.75 * height, 5);
    n[1] = new Node(0.75 * width, 0.75 * height, 5);
    n[2] = new Node(0.25 * width, 0.25 * height, 5);
    n[3] = new Node(0.75 * width, 0.25 * height, 5);
    //println("n[0].r="+n[0].r);
  }
  
  void initializeLineNodes() {
    /* wanted the control points to be some distance away from their mouse-draggable indicator dots */
    offsetXs = new float[2];
    offsetYs = new float[2];
    offsetYs[0]= 35;
    offsetYs[1]=-35;
    n = new Node[2];
    n[0] = new Node(0.25 * width, 0.75 * height, 5);
    n[1] = new Node(0.75 * width, 0.75 * height, 5);
    //println("n[0].r="+n[0].r);
  }
  
  void renderNodes() {
    for (int ii = 0; ii < n.length; ii++) {
      n[ii].render(offsetXs[ii],offsetYs[ii],ii);
    }
  }
  
  
  // A quick class for a draggable node
  class Node {
  
    float x, y;
    float r;
    boolean dragged;
  
    Node(float x_, float y_, float r_) {
      x = x_;
      y = y_;
      r = r_;
    }
  
    void render(float offsetX,float offsetY,int n) {
      pushStyle();
      ellipseMode(CENTER);
      noStroke();
      //fill(127, 100);   
      if(0==n)fill(1,0,0); else if(1==n)fill(0,1,0); else if(2==n)fill(0,0,1); else fill(1,1,0);
      ellipse(x-offsetX, y+(yInverted?1:-1)*offsetY, 2 * r, 2 * r);
      popStyle();
      if (dragged) {
        x = mouseX+offsetX;
        y = yInverted?height-mouseY-offsetY:mouseY+offsetY;
      }
    }
  
    boolean inside(float xpos, float ypos) {
      //println(String.format("xy=(%4.4f,%4.0f) mouseXY=(%4d,%4d) xypos=(%4.0f,%4.0f) dist=%8.3f r=%8.3f",x,y,mouseX,mouseY,xpos,ypos,dist(x,y,xpos,ypos),r));
      return dist(x, y, xpos, ypos) < r;
    }
  }
  
  void mousePressed() {
    for (int ii = 0; ii < n.length; ii++) {
      if (n[ii].inside(mouseX+offsetXs[ii],yInverted?height-mouseY-offsetYs[ii]:mouseY+offsetYs[ii])) {      
        n[ii].dragged = true;
        tagged=ii;
      }
    }
  }
  
  void mouseReleased() {
    for (int ii = 0; ii < n.length; ii++) {
      n[ii].dragged = false;
    }
  }
  void keyReleased() {
    didMove=false;
  }
  void feedKeys(){
   if( (true==keyPressed)
      &&(-1 != tagged)
      &&(false==didMove)
     ){
      if (key == CODED) { 
        if (UP == keyCode) {
          n[tagged].y+=yInverted?1:-1;
        } else 
        if (DOWN == keyCode) {
          n[tagged].y-=yInverted?1:-1;
        } else 
        if (LEFT == keyCode) {
          n[tagged].x-=1;
        } else 
        if (RIGHT == keyCode) {
          n[tagged].x+=1;
        }
        didMove=true;
      }
    }
  }
  void drawBezierDraggable(){
    noFill();
    pushStyle();
      strokeWeight(2);
      //stroke(127, 100);
      stroke(1,0,0);
      //line(n[0].x, n[0].y, n[1].x, n[1].y);
      //line(n[3].x, n[3].y, n[2].x, n[2].y);
    popStyle();
    renderNodes();
    
    // Draw nice smooth Bézier curves! 
    /* You will need to retrofudge any transforms... this is from the POV of no transformation */
    stroke(0);
    //stroke(0,1,1);
    strokeWeight(2);
    bezier(n[0].x, n[0].y, n[1].x, n[1].y, n[2].x, n[2].y, n[3].x, n[3].y);
    //println(String.format("(%9.3f,%9.3f),(%9.3f,%9.3f),(%9.3f,%9.3f),(%9.3f,%9.3f)",n[0].x, n[0].y, n[1].x, n[1].y, n[2].x, n[2].y, n[3].x, n[3].y));
    println(String.format("bezier(%4.0f,%4.0f, %4.0f,%4.0f, %4.0f,%4.0f, %4.0f,%4.0f);",
      n[0].x, n[0].y,
      n[1].x, n[1].y,
      n[2].x, n[2].y,
      n[3].x, n[3].y
    ));
  }
  void drawLineDraggable(){
 
    renderNodes();
    
    stroke(0);
    strokeWeight(1);  
    line(n[0].x, n[0].y, n[1].x, n[1].y);
    //println(String.format("(%9.3f,%9.3f),(%9.3f,%9.3f),(%9.3f,%9.3f),(%9.3f,%9.3f)",n[0].x, n[0].y, n[1].x, n[1].y, n[2].x, n[2].y, n[3].x, n[3].y));
    println(String.format("line(%4.0f,%4.0f, %4.0f,%4.0f);",
      n[0].x, n[0].y,
      n[1].x, n[1].y
    ));
  }

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 12, 2018, 6:00am UTC](https://discourse.processing.org/t/whack-a-mole-game-make-mole-change-color-when-hit/6523/3 "2018-12-12T06:00:58Z")

</div>

@TPMoyer , thanks for this example and a + + for link and mention link and name in code again + +  
but pls, edit the post,  
better insert again, as

> " for text/quote not for code

insert can have damaged the code  
better use the

```auto
</> for code

```