0

enter image description here

Hey I am trying to make a game , so my collisions aren't working with more than one platform , please help

this is the code: main:

const platforms = [new Platform(100,300) , new Platform(500,300)]

function update()
{
    requestAnimationFrame(update)
    platforms.forEach(platform =>{
        platform.draw()})
    platforms.forEach(platform =>{
        if(player.position.y  + player.height > platform.position.y
            && ...) 
            player.isGrouned = true
        else player.isGrouned = false //player.velocity.y = 0
    })}

Platform class:

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

export default class Platform{
    constructor(x,y){
        this.position = {x,y}
        this.width = 200
        this.height = 30
    }
    draw(){
        ctx.fillStyle = 'yellow'
        ctx.fillRect(this.position.x,this.position.y,this.width,this.height)
    }
}

i did try to use constructor({x,y}) and like its in the snippet i tried searching on google and youtube , nothing helped

IndieValentin
  • 1
  • 1
  • If the first platform collides, you set `player.isGrouned = true`. If the second platform does not collide, you set `player.isGrouned = false`. Final result: `player.isGrouned = false`. Since you’re constantly overriding this boolean property, every platform is ignored except the last one. `forEach` is not what you want here. Use [`some`](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/some), i.e. `player.isGrouned = platforms.some((platform) => player.position.y + player.height > platform.position.y &&`…`)`. – Sebastian Simon Nov 01 '22 at 18:32

0 Answers0