More efficient number comparison

Question

I have an array that is part of a small JS game I'm working on. I need to check (as is often reasonable) that each of the elements in the array has not left the “scene” or “pad”, so I can delete them and save the script loading

I coded below and wondered if anyone knows a faster / more efficient way to calculate this. This is done every 50 ms (we are talking about movement).

Where bots[i][1]is the motion in X, and bots[i][2]is the motion in Y (mutually exclusive).

for (var i in bots) {
    var left = parseInt($("#" + i).css("left"));
    var top = parseInt($("#" + i).css("top"));
    var nextleft = left + bots[i][1];
    var nexttop = top + bots[i][2];
    if(bots[i][1]>0&&nextleft>=PLAYGROUND_WIDTH) { remove_bot(i); }
    else if(bots[i][1]<0&&nextleft<=-GRID_SIZE) { remove_bot(i); }
    else if(bots[i][2]>0&&nexttop>=PLAYGROUND_HEIGHT) { remove_bot(i); }
    else if(bots[i][2]<0&&nexttop<=-GRID_SIZE) { remove_bot(i); }
    else {
        //alert(nextleft + ":" + nexttop);
        $("#" + i).css("left", ""+(nextleft)+"px");
        $("#" + i).css("top", ""+(nexttop)+"px");
    }
}

Similarly, note remove_bot (i); the function is as shown below, is it correct (I can not merge, since it changes all the IDs of the elements in the array.

function remove_bot(i) {
    $("#" + i).remove();
    bots[i] = false;
}

Thanks so much for any advice!

Answer 1

• $("#" + i) ; , , jQuery.

  var self = $('#' + i);
  var left = parseInt(self.css("left"));
  var top = parseInt(self.css("top"));
  

• bots[i] :

  var current = bots[i];
  var nextleft = left + current[1];
  var nexttop = top + current[2];
  

• () jQuery DOM . 50 .

  , $('#' + i). , , jQuery jQuery DOM. JS. / DOM JavaScript.

  $('#' + i) , ? $('#' + i) , 50 .

  element Bot, (, bots[i][3])

• () DOM, , CSS .

for (.. in ..) , . for (..;..;..)

JavaScript; .

, , :

function Bot (x, y, movementX, movementY, playground) {
    this.x = x;
    this.y = y;
    this.element = $('<div class="bot"/>').appendTo(playground);
    this.movementX = movementX;
    this.movementY = movementY;
};

Bot.prototype.update = function () {
    this.x += this.movementX,
    this.y += this.movementY;

    if (this.movementX > 0 && this.x >= PLAYGROUP_WIDTH ||
        this.movementX < 0 && this.x <= -GRID_SIZE ||
        this.movementY > 0 && this.y >= PLAYGROUND_HEIGHT ||
        this.movementY < 0 && this.y <= -GRIDSIZE) {
        this.remove();
    } else {
        this.element.css({
            left: this.x,
            right: this.y
        });
    };
};

Bot.prototype.remove = function () {
    this.element.remove();
    // other stuff?
};

var playground = $('#playground');
var bots = [new Bot(0, 0, 1, 1, playground), new Bot(0, 0, 5, -5, playground), new Bot(10, 10, 10, -10, playground)];

setInterval(function () {
    var i = bots.length;

    while (i--) {
        bots[i].update();
    };
}, 50);

Answer 2

parseInt. , 0 , parseInt.

var left = $("#" + i).css("left") | 0;

.

, jQuery 50 , ( $ ..). JavaScript . , , id i . :

var item = document.getElementById(i);
var iStyle = item.style;
var left = iStyle.left;
…

( , jQuery, 100%, .)

, while , for loops (). ,

var i = bots.length;
while (i--) {
    …
}

Answer 3

javascript.

... in . - for , . - :

for(var i, len = bots.length; i < len; i++) { ... }

, , , , .

Answer 4

Use offset()or position(), depending on whether you need coordinates relative to the document or parent. position()most likely faster since browsers are effective at finding offsets relative to the parent. No need to parse CSS. You also do not need variables leftand topsince you use them only once. It may not be so readable, but you go for efficiency:

var left = $("#" + i).position().left + bots[i][1];
var top = $("#" + i).position().top + bots[i][2];