0
\$\begingroup\$

I've been reading Timothy Wright's "Fundamental 2D Game Programming With Java". I'm trying to apply its principles to a Lunar Lander game - it's a JSFiddle for now, and can be found here.

The problem is with the collision function. It never returns true. I don't actually understand how it works, I just ported it from Java to JavaScript. It would be nice if someone could enlighten me. (I'm bad at math...)

The ship is just a 14x14 rectangle (with an antenna on top :) ). It is translated with a translation matrix according to the changing velocity.

function collision() {
  for(var i = 1; i < map.length; i++) {
    var largestMin = -Number.MAX_VALUE;
    var smallestMax = Number.MAX_VALUE;
    var start = new VectorPoint((i - 1) * 20, map[i-1]);
    var end = new VectorPoint(i * 20, map[i]);
    var d = VectorFunctions.sub(end, start);
    var len = VectorFunctions.len(d);
    d = VectorFunctions.norm(d);
    for(var j = 0; j < 2; j++) {
      var n = VectorFunctions.sub(shipCopy.body[j], shipCopy.body[j + 1]);
      n = VectorFunctions.norm(n);
      var sub1 = VectorFunctions.sub(shipCopy.body[j], start);
      var sub2 = VectorFunctions.sub(shipCopy.body[j+1], start);
      var e0 = VectorFunctions.dot(n, sub1);
      var e1 = VectorFunctions.dot(n, sub2);
      var f = VectorFunctions.dot(n, d);
      if(Math.abs(f) > EPSILON) {
        var t0 = e0 / f;
        var t1 = e1 / f;
        if(t0 > t1) {
          var swap = t0;
          t0 = t1;
          t1 = swap;
        }
        largestMin = Math.max(largestMin, t0);
        smallestMax = Math.min(smallestMax, t1);
        console.log(largestMin + ", " + smallestMax);
        if(largestMin > smallestMax) {
          return false;
        }
        if(smallestMax < 0) {
          return false;
        }
      }
      else if(e0 * e1 > 0) {
        return false;
      }
    }
  }
  var t = t0 > 0 ? t0 : t1;
  return true;
}

The VectorFunctions namespace is defined as follows:

var VectorFunctions = {
  // v1: VectorPoint
  // v2: VectorPoint
  add: function(v1, v2) {
    return new VectorPoint(v1.x + v2.x, v1.y + v2.y);
  },
  // v1: VectorPoint
  // v2: VectorPoint
  sub: function(v1, v2) {
    return new VectorPoint(v1.x - v2.x, v1.y - v2.y);
  },
  // v: VectorPoint
  // n: number
  div: function(v, n) {
    return new VectorPoint(v.x * n, v.y * n);
  },
  // v: VectorPoint
  len: function(v) {
    return Math.sqrt(v.x * v.x + v.y * v.y);
  },
  // v: VectorPoint
  norm: function(v) {
    return VectorFunctions.div(v, VectorFunctions.len(v));
  },
  // v1: VectorPoint
  // v2: VectorPoint
  dot: function(v1, v2) {
    return v1.x * v2.x + v1.y * v2.y;
  },
  // x: number, y: number, w: number
  vectorW: function(x, y, w) {
    var v = new VectorPoint(x, y);
    v.w = w;
    return v;
  }
};

The VectorPoint class is here...

// x: number
// y: number
function VectorPoint(x, y) {
  this.x = x;
  this.y = y;
  this.w = 1;
};
\$\endgroup\$
0
\$\begingroup\$

Same as your other question

Line rect intersection - lines behave like rays

  // v: VectorPoint
  // n: number
  div: function(v, n) {
    return new VectorPoint(v.x * n, v.y * n);
  },

You need to change the operators over to a divide.

Be aware of copy and pasting code, make sure all the building blocks are working first and foremost before tackling a higher-level problem. Unit testing would have caught this immediately.

Sorry for sounding like a nagging mum but it's problems like these that could waste you many hours.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.