Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

118
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda