Help Dragging Arrayed images

edited January 2016 in Questions about Code

Im trying to create a game where i can drag and drop images created from an array into trash and recycle bins the bottles into one and the trash into another. Any help is appreciated.

// 20 Second Game Template
// re-design start.gif (start screen) and end.gif (end screen) to give appropriate instructions

int begin;
int bottleSize = 50;// Time the event/game begins
boolean active;          // Flag for event/game status
boolean done;            // Flag for "game over"
PImage beginImage;       // Start with this image
PImage endImage;         // End with this image
PImage trash;
PImage bottle;
PImage bluebin;
float[] x = new float[100];
float[] y = new float[100];
float[] q = new float[100];
float[] m = new float[100];
boolean overBottle = false;
boolean locked = false;
float i;
float xOffset = 0.0;
float yOffset = 0.0;
//float m[i];
//float q[i];


void setup() 
{

  active = false;        // Don't begin with action
  done = false;          // The event/game has not finished
  beginImage = loadImage("startimage.png");
  endImage = loadImage("endimage.png");
  size(500, 400);
  fill(255, 200);
  trash = loadImage("trash.png");
  bottle = loadImage("bottle.png");
  bluebin= loadImage("bluebin");
  for (int i = 0; i < 100; i++) {
    x[i] = random(-1000, 500);
    y[i] = random(-1000, 500);
    q[i] = random(-1000, 500);
    m[i] = random(-1000, 500);
  }

}



void draw() 
{
  background(204);

  if (active == true) {
    eventGame();         // Run the event/game
    timer();             // Time the event/game
  } 
  else {
    if (done == true) {
      endScreen();       // Show the "end" screen
    } 
    else {
      beginScreen();     // Show the "first" screen
    }
  }
}



void eventGame() 
{
  background(255);

  for (int i = 0; i < 100; i++) {

    image(trash, x[i], y[i], 40, 40);
    image(bottle, m[i], q[i], 50, 50);
    x[i]+=1;
    y[i]+=1;
    q[i]+=1;
    m[i]+=1;


    if (x[i] > width) {
      x[i] = random(-1000, 0);
    }
    if (y[i] > height) {
      y[i] = random(-1000, 0);

      if (m[i] > width) {
        m[i] = random(-1000, 0);
      }
      if (q[i] > height) {
        q[i] = random(-1000, 0);
      }

      if ( mouseX > m[i] - bottleSize && mouseX < m[i] + bottleSize && mouseY > q[i] -bottleSize && mouseY < q[i] + 50) {
        overBottle = true;
      }
    }
  }
}

void mousePressed() 
{
  // Begin the event/game when the mouse is clicked
  // and the event/game is not already happening
  if (active == false) {
    active = true;
    begin = millis();
  } 
  else { 
    if (overBottle) { 
      locked = true; 
      fill(255, 255, 255);
    } 
    else {
      locked = false;
    }
//    xOffset = mouseX-m[i]; 
//    yOffset = mouseY-q[i];
  }
  print("mouse pressed\n");
}

void mouseReleased() {

  locked = false;
}

void mouseDragged() {
  {
    if (locked) {
      m[i] = mouseX-xOffset; 
     q[i] = mouseY-yOffset;
    }
  }


  print("dragged\n");
}

void mouseMoved() 
{
  // Your mouse events go here...
  print("moved\n");
}

void keyPressed() 
{
  // Your key events go here...
  print("key pressed\n");
}

void keyReleased() 
{
  // Write your key events here...
  print("key released\n");
}

void timer() 
{
  int curTime = millis();
  if (curTime > begin + 20000) {
    active = false;
    done = true;
  }
  noStroke();
  fill(255);
  rect(0, height-5, width, 5);
  fill(0);
  rect(0, height-5, (curTime-begin)/50, 5);
}

// Displays when the game/event begins
void beginScreen() {
  image(beginImage, 0, 0);
}

// Displays when the 10 seconds are over
void endScreen() {
  image(endImage, 0, 0);
}

Answers

  • Hi, What exactly do you need help with? What's the current behavior of your program, and what's the desired behavior?

  • My current behavior is two different images falling from an array. My desired behavior is to have the two images falling from the arrays be draggable objects to where I can place them into two different corners for points. The intent is for this to be a game but im not sure how to control these arrayed image using a drag and drop feature.

  • Hi, I have this code from an old answer it is a basic drag and drop with several objects, maybe it can help...

    DragMe[] drags = new DragMe[40];
    
    void setup() {
      size(400, 400);
      for (int i = 0; i < drags.length; i++) {
        drags[i]  = new DragMe();
      }
    }
    
    void draw() {
      background(255);
      for (int i = 0; i < drags.length; i++) {
        drags[i].display();
        drags[i].update();
      }
    }
    
    void mousePressed() {
      for (int i = 0; i < drags.length; i++) {
        if (!drags[i].isOver())
          drags[i].dontMove = true;
        drags[i].offset_x = mouseX - drags[i].pos_x;
        drags[i].offset_y = mouseY - drags[i].pos_y;
      }
    }
    
    void mouseReleased() {
      for (int i = 0; i < drags.length; i++) {
        drags[i].locked = false;
        drags[i].dontMove = false;
      }
    }
    
    
    class DragMe {
      float pos_x, pos_y, SIZE = 20;
      float prev_x, prev_y;
      boolean locked;
      boolean dontMove;
      color c = color (0, 170, 170);
      float offset_x, offset_y;
    
      DragMe() {
        pos_x = random(width-SIZE);
        pos_y = random(height-SIZE);
      }
    
      void update() {
        if (isOver() && !locked && !dontMove || locked && !dontMove )
          c = color (170);
        else
          c = color (0, 170, 170);
    
        if (isClicked()) {
          locked = true;
        }
        if (locked && !dontMove) {
    
          pos_x =  mouseX - offset_x;
          pos_y =  mouseY - offset_y;
        }
      }
    
    
    
      void display() {
        fill(c);
        rect(pos_x, pos_y, SIZE, SIZE);
      }
    
      boolean isOver() {
        float right_x = pos_x + SIZE;
        float bottom_y = pos_y + SIZE;
        return mouseX >= pos_x && mouseX <= right_x &&
          mouseY >= pos_y && mouseY <= bottom_y;
      }
    
      boolean isClicked() {
        return isOver() && mousePressed && !dontMove;
      }
    }
    
Sign In or Register to comment.