Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

117
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda