javascript - Alternative to using excessive for() loops to search for matches in an array -

(you can view full code on codepen here)

i'm working on physics simulation project using html5 canvas.
code uses lot of for() loops, drawing grid, drawing each particle, checking collisions ect.
works, cause fps drop after 150+ particles have been added canvas, each particle having loop though 150 long array , check collisions.

each particle in array stored in dictionary this:

{     x : 10,     y : 15,     color : "#fff" }   

the simple collision detection loops through each particle in array , checks if y value equal current particle position + 1.

// begin loop  (var part in particles) {     // p = current particle being drawn & updated canvas     if (p.y + grid.size == particles[part].y && p.x == particles[part].x) {        move.down = false;     }  }  // move particle if allowed  if (move.down) {     p.y += grid.size;  }

this particles array looks after being populated 10 particles.

[{"x":195,"y":505,"color":"skyblue"},{"x":195,"y":500,"color":"skyblue"},{"x":195,"y":495,"color":"skyblue"},{"x":195,"y":490,"color":"skyblue"},{"x":195,"y":485,"color":"skyblue"},{"x":135,"y":505,"color":"skyblue"},{"x":245,"y":505,"color":"skyblue"},{"x":160,"y":505,"color":"skyblue"},{"x":435,"y":505,"color":"skyblue"},{"x":355,"y":505,"color":"skyblue"}]   

is there more efficient way this? alternative using for() loop?

you can view full code on codepen here

var fps_last;  var fps = 0;    var grid = {     size: 5,     height: 500,     width: 500,     padding: 5,     color: "rgba(100,100,100,0.3);"  };    var canvas = $("#canvas")[0];  var canvas_width = canvas.width = grid.width + (grid.padding * 2) + 1;  var canvas_height = canvas.height = grid.height + (grid.padding * 2) + 1;  var ctx = canvas.getcontext('2d');    var particles = [];  var mouse = {};    function draw() {     animationframe();     $(".fps").html(fps + " fps");     $(".part").html("particles: " + particles.length);     ctx.clearrect(0, 0, canvas.height, canvas.width);    // loop     (var x = 0; x <= canvas.width; x += grid.size) {        ctx.moveto(0.5 + x, 0);        ctx.lineto(0.5 + x, canvas.height);     }    // loop     (var x = 0; x <= canvas.height; x += grid.size) {        ctx.moveto(0, 0.5 + x);        ctx.lineto(canvas.width, 0.5 + x);     }     ctx.strokestyle = grid.color;     ctx.stroke();     // loop     (var = 0; < particles.length; i++) {        var p = particles[i];        ctx.beginpath();        ctx.fillstyle = p.color;        ctx.rect(p.x+1, p.y+1, grid.size-1, grid.size-1);        ctx.closepath();        ctx.fill();        var move = {           down : true        }        // loop.        for(var part in particles){           if(p.y+grid.size == particles[part].y && p.x == particles[part].x){              move.down = false;           }        }                if(move.down && p.y < grid.height+grid.padding){           p.y += grid.size;        }             }  }    function particle() {     this.x = 0;     this.y = 0;     this.color = "#fff";  }    function create_particle(x, y) {     var npart = new particle();    // more loops     (var i; < particles.length; i++) {        if (x == particles[i].x && y == particles[i].y) {           return;        }     }     npart.x = x * grid.size;     npart.y = y * grid.size;     npart.color = "skyblue";     particles.push(npart);  }    function animationframe() {    if(!fps_last) {       fps_last = date.now();       fps = 0;       return;    }    delta = (date.now() - fps_last)/1000;    fps_last = date.now();    var d = math.floor(1/delta);    d > 200 ? fps = 200 : fps = d;  }     canvas.onclick = function(e) {     var c = $("#canvas");     var x = math.floor((e.x - c.offset().left) / 5);     var y = math.floor((e.y - c.offset().top) / 5);     create_particle(x, y);  }    canvas.onmousemove = function(e) {     if (mouse.down) {        var c = $("#canvas");        var x = math.floor((e.x - c.offset().left) / 5);        var y = math.floor((e.y - c.offset().top) / 5);        create_particle(x, y);     }  }    $(document).mousedown(function() {     mouse.down = true;  }).mouseup(function() {     mouse.down = false;  });    setinterval(draw, 1);

@import url(https://fonts.googleapis.com/css?family=slabo+27px|titillium+web:400,300,600,700|raleway:400,300,500,600,700|pt+sans:400,400italic,700);  html,  body {    background: #111;    color: #ccc;    height: 100%;    width: 100%;  }    #project_container {    font-family: 'raleway', serif;    padding: 15px;    width: 80%;    margin: 0px auto;  }    #project_container h2 {    font-family: 'titillium web', serif;    font-size: 20pt;    letter-spacing: 3px;  }    #project_container p {    color: white;  }    #project_container p a:hover {    color: orange;  }    #project_container p {    color: gray;    padding: 5px;    font-size: 10pt;  }    #projectbox {    margin-top: 1em;  }    body,  html {     cursor: default;  }    #canvas {     outline: solid 1px #fff;     display: block;     margin-bottom: 0.5em;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="project_container">     <h2>canvas testing</h2>     <p>testing using html5 canvas</p>     <div id="projectbox">        <!-- start project html -->        <canvas id="canvas" width="500" height="500"></canvas>        <button onclick='particles=[];'>delete particles</button>        <p class='fps'></p>        <p class='part'></p>                <!-- end project html -->     </div>  </div>

how represent particles in matrix (2d array) instead of list. way able check immediate neighbours in o(1)