Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

115
Views
How to do slope based physics in JavaScript

I have a player (a square), and every frame I update its velocity and move it accordingly. I also have a level, (a 2d array), which consists of blocks that are JSON objects, each having an array of vertices:

//Tile object
{id:"f",vertices:[
            [0,0],
            [1,0],
            [1,1],
            [0,1]
    ], 
danger : false, 
solid:false}

The, in my update function, I check each corner of the player, and check weather the block is solid or not. if it is , I then check another position one pixel away, so that i know what direction to halt velocity in. for example:

//PLAYER LEFT SIDE
/*parameters for findCollision(): 
   1. player corner num (starting at top right, proceeding clockwise)
   2. direction of collision
   3. offset (x,y)
*/

if(findCollision(1,"x",[-1,0]) || findCollision(4,"x",[-1,0])){
    player.xV = 0;
}

And this continues for every corner. The problem arises when I have a slope or triangle, because then, when the player tries to move up or down it, it will get stuck, though I want it to fall, glide up and down them. my current method wont work, because if it checks for the next pixel over, it will always be inside of the slope. I haven't taken any physics or computer science classes, and I'm relatively new to stuff like this, so any tips or edit suggestions to this question, please post them.

Thanks in advance :D

findCollision function if needed:

function findCollision(corner,axis,offset = [0,0],ts=levels[game.levelNum].tileSize){
    pYv = 0;
    pXv =  0;

    if(axis == "x"){
        pXv = player.xV
    }else if(axis == "y"){
        pYv = player.yV
    }else{
        return false;
    }


    tileRelCoords = getRelCoordinates(player.getCorner(corner).x + pXv,player.getCorner(corner).y + pYv,levels[game.levelNum].tileSize);
    if(insidePolygon(
        [tileRelCoords.x,tileRelCoords.y],
        getTileFromCoords(levels[game.levelNum], player.getCorner(corner).x + pXv, player.getCorner(corner).y + pYv).vertices
       ) && 
       insidePolygon(
        [tileRelCoords.x + (offset[0]/ts),tileRelCoords.y + (offset[1]/ts)],
        getTileFromCoords(levels[game.levelNum], player.getCorner(corner).x + pXv + offset[0], player.getCorner(corner).y + pYv + offset[1]).vertices
       )
    ){
        return true;
    }
    return false;
}

You can veiw the full code here

And play the game (prior to this refactor) here

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!