Collision Detetion on Acid Run

Question

I am making a game called Acid Run and when you collide with the acid the player dies. I cannot seem to make the collisions work. I want collision according to color... please help!

Here is the code for the program

    var PW = 5;
var PH = 5;
var PX = 104.5;
var PY = 5;
var prtlX = 305;
var prtlY = 355;
var color1 = random(0, 255);
var color2 = random(0, 255);
var color3 = random(0, 255);
var you = "YOU";
var lose1 = "LOSE";
var win1 = "WIN";
var keys = [];
var page = "P1";

var keyPressed = function(){
    keys[keyCode] = true;
};
var keyReleased = function(){
    keys[keyCode] = false;
};
var playerDead = false;
var playerWin = false;
var playerSpeed = 1;

var player = function(x,y) {
    this.x = PX;
    this.y = PY;

    this.level = 0;
    this.win = playerWin;
    this.dead = playerDead;
    this.deathCount = 0;

    this.speed = playerSpeed;

    rectMode(CENTER);
    fill(0, 0, 255);
    rect(this.x, this.y, PW, PH, 1);
};

var acid = function(x,y,w,h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;

    rectMode(CORNER);
    fill(50, 255, 0);
    rect(this.x, this.y, this.h, this.w);
};

var portal = function(x,y,w,h) {
    this.x = x;
    this.y = y;
    this.w = 10;
    this.h = 10;

    rectMode(CENTER);
    fill(random(100), random(100), random(255));
    rect(prtlX, prtlY, this.w, this.h);
};

noStroke();

var a = acid();

var level1 = function() {
    player();
    portal(375, 395);
    acid(0, 0, 100, 100);
    acid(110, 0, 100, 290);
    acid(10, 110, 100, 110);
    acid(110, 100, 100, 100);
    acid(220, 110, 100, 160);
    acid(390, 100, 130, 10);
    acid(130, 210, 100, 240);
    acid(380, 220, 180, 20);
    acid(0, 220, 200, 120);
    acid(130, 320, 70, 100);
    acid(200, 315, 80, 100);
    acid(310, 320, 70, 100);
    fill(0, 0, 0);
    textSize(25);
    text("Do not touch the acid!", 150, 50);
    text("Or the border", 40, 160);
    text("Do touch the portal", 160, 270);
};

draw = function() {
    background(255, 255, 255);

    if(page === "P1") {
    level1();
    }
    cursor("NONE");
    fill(random(255), random(255), random(255));
    ellipse(mouseX, mouseY, 10, 10);

    if(keyPressed&&keys[LEFT]){
        PX-=1;
    }
    if(keyPressed&&keys[RIGHT]){
        PX+=1;
    }
    if(keyPressed&&keys[UP]){
        PY-=1;
    }
    if(keyPressed&&keys[DOWN]){
        PY+=1;
    }

    if(PX > 397.5) {
        PX = 397.5;
        playerDead = true;
    } if(PX < 2.5) {
        PX = 2.5;
        playerDead = true;
    } if(PY < 2.5) {
        PY = 2.5;
        playerDead = true;
    } if(PY > 397.5) {
        PY = 397.5;
        playerDead = true;
    } if(PX > 300 && PX < 310 && PY > 350 && PY < 360) {
        playerWin = true;
    }

    if(playerWin === true) {
        background(random(10), random(250), random(250));
        fill(random(50), random(200), random(200));
        textSize(150);
        text(you, 30, 150);
        text(win1, 45, 300);
        textSize(20);
        fill(0, 0, 0);
        text("Press Restart to play again", 100, 380);
        cursor("NONE");
        fill(random(255), random(255), random(255));
        ellipse(mouseX, mouseY, 10, 10);

    }

    if(playerDead === true) {
        background(200, 50, 10);
        textSize(150);
        fill(random(255), random(30), random(30));
        text(you, 35, 150);
        text(lose1, 10, 320);
        fill(0, 0, 0);
        textSize(20);
        text("Press Restart to play again", 100, 380);
        cursor("NONE");
        fill(random(255), random(255), random(255));
        ellipse(mouseX, mouseY, 10, 10);
    }
};

In what way are you unable to 'make the collisions work'. Can you give a specific example of a situation in which collision detection gives the wrong result? — gareththegeek, Dec 04 '15 at 14:10
So I want to have the player move through the white path safely but when it touches the green it dies. I want to make it so that when the blue player touches green walls he dies. I do not know how to do that... and no one else seem to have the same version of code as me... so It is always different and when they try to help it does not work because it is so different so I am kind of stuck and I talk to much... — ETD Coding, Dec 04 '15 at 15:02

score 0 · Answer 1 · edited May 23 '17 at 12:07

There is a way to detect if there is a collision between 2 divs with jquery.

function collision($div1, $div2) {
  var x1 = $div1.offset().left;
  var y1 = $div1.offset().top;
  var h1 = $div1.outerHeight(true);
  var w1 = $div1.outerWidth(true);
  var b1 = y1 + h1;
  var r1 = x1 + w1;
  var x2 = $div2.offset().left;
  var y2 = $div2.offset().top;
  var h2 = $div2.outerHeight(true);
  var w2 = $div2.outerWidth(true);
  var b2 = y2 + h2;
  var r2 = x2 + w2;

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
  return true;
}

The answer which provided this is here:

How to detect if two divs touch with jquery?

and its fiddle: http://jsfiddle.net/nGRwt/7/

(also provided from the answer above)

Hope this helps!

I think that we are on a different kinds of JavaScript because mine is not letting me do that...where you have return false it is giving error asking if I meant to say case instead of false — ETD Coding, Dec 04 '15 at 14:39

Collision Detetion on Acid Run

1 Answers1