javascript - 酸流碰撞检测

Question

我正在制作一款名为 Acid Run 的游戏，当你与酸相撞时，玩家就会死亡。我似乎无法让碰撞发挥作用。我想要根据颜色进行碰撞...请帮忙!

这是该程序的代码

    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);
    }
};

Answer 1

有一种方法可以用jquery检测2个div之间是否存在冲突。

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;
}

提供此问题的答案在这里:

How to detect if two divs touch with jquery?

及其 fiddle :http://jsfiddle.net/nGRwt/7/

(也从上面的答案中提供)

希望这有帮助!