Game project issue

[rectorjordan94]

What's the problem you're trying to solve?

I'm struggling with randomly generating obstacles in the environment and saving the state so that I can alternate their placement depending on the level in the game. I'm also struggling with my centipede object staying together when it's moving.

Post any code you think might be relevant (one fenced block per file)

class CentipedeSegment {
    constructor(x, y) {
        this.x = x
        this.y = y
        this.speed = 10
        this.radius = 8
        this.color = 'green'
        this.direction = {
            down: false,
            left: false,
            right: true
        }
    }
    render() {
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI)
        ctx.fillStyle = this.color
        ctx.fill()
    }
    move() {
        if (this.direction.right === true) {
            this.x += this.speed
            if (this.x + this.radius >= canvas.width - 16) {
                this.direction.right = false
                this.direction.down = true
            }
        }
        if (this.direction.left === true) {
            this.x -= this.speed
            if (this.x <= 0) {
                this.direction.left = false
                this.direction.down = true
            }
        }
        if (this.direction.down === true) {
            this.y += 16
            if (this.x > 350) {
                this.direction.left = true
            } else if (this.x < 350) {
                this.direction.right = true
            }
            this.direction.down = false
        }

    }
}

class CentipedeBody {
    segmentArray = [
        new CentipedeSegment(100,100),
        new CentipedeSegment(116,100),
        new CentipedeSegment(132,100),
    ]
    render() {
        this.segmentArray.forEach((segment) => segment.render())
    }
    moveBody() {
        this.segmentArray.forEach((segment) => segment.move())
    }
}

const getRandomCoordinates = (max) => {
    return Math.floor((Math.random() * max) + 50)
}

class Obstacle {
    constructor() {
        this.x = getRandomCoordinates(canvas.width - 100)
        this.y = getRandomCoordinates(canvas.height / 2 + 100)
        this.width = 9
        this.height = 9
        this.color = 'pink'
        this.alive = true
        this.health = 3
    }
    render() {
        if (this.health === 3) {
            ctx.fillStyle = this.color
            ctx.fillRect(this.x, this.y, this.width, this.height)
        } else if (this.health === 2) {
            ctx.fillStyle = 'red'
            ctx.fillRect(this.x, this.y, this.width, this.height - 3)
        } else if (this.health === 1) {
            ctx.fillStyle = 'purple'
            ctx.fillRect(this.x, this.y, this.width, this.height - 6)
        }
    }
    takeDamage(damage) {
        this.health -= damage
    }
}

const levelOneObstacles = [
    new Obstacle(),
    new Obstacle(),
    new Obstacle(),
    new Obstacle(),
    new Obstacle(),
    new Obstacle(),
    new Obstacle(),
    new Obstacle(),
    new Obstacle(),
    new Obstacle(),
    new Obstacle(),
    new Obstacle(),
    new Obstacle(),
    new Obstacle(),
    new Obstacle(),
    new Obstacle(),
    new Obstacle(),
    new Obstacle(),
    new Obstacle(),
    new Obstacle(),
    new Obstacle()
]

const centipede = new CentipedeBody()

const gameLoop = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    projectileController.render()
    player.render()
    player.movePlayer()
    centipede.render()
    centipede.moveBody()
    levelOneObstacles.forEach((obstacle) => {
        if (projectileController.collideWith(obstacle)) {
            if (obstacle.health <= 0) {
                const index = levelOneObstacles.indexOf(obstacle)
                levelOneObstacles.splice(index, 1)
            }
        } else {
            obstacle.render()
        }
    })
}

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

Currently the issue with the obstacles is that the only way I seem to get them to save their state in between frames is to hard code them, but I think it would be more efficient to generate those with a loop. Another issue I'm experiencing is that I'm experiencing some issues with my centipede's movement, as the different segments of the body aren't staying together once it hits a wall and changes direction, and I definitely want to fix that before I add the ability for the centipede to collide with the obstacles themselves.

What is your best guess as to the source of the problem?

I think the obstacle issue has something to do with randomly generating the locations for each obstacle and then rendering them, because then when I do it that way the obstacles location changes every frame that they are rendered even if they are declared in a function outside of the game loop. For the centipede movement issue, my best guess is that it possibly has something to do with the framerate of my game and them lagging when they're supposed to change direction upon colliding with the outside edge of the canvas.

What things have you already tried to solve the problem?

Currently it works with the obstacles and centipede body locations being hard coded either into the class or into a separate array. I've tried getting them to generate with for loops and forEach loops but as I said before it keeps regenerating their locations every frame. I've also tried generating the objects in a separate function or in an ObstacleSpawner class but to no avail.

Paste a link to your repository here

https://github.com/rectorjordan94/Centipede

[timmshinbone]

Yeah, I would definitely recommend against using the random start coordinates hard coded in the obstacle class, and design a function that builds obstacles dynamically, pushes them into an array, and then using that array to display your obstacles.

As far as moving the centipede's body around and keeping the squares together, I think I'd have to see the functionality in person, so we can do a 1:1 a little later about it so you can share your screen and I can look at what your code is doing.

For now, rework the obstacles like I said before and let me know if that improves performance.

[rectorjordan94]

Okay will do, thank you

[timmshinbone]

Hey @rectorjordan94 are you still working on this issue?

[rectorjordan94]

Built spawner functions for the centipede and the obstacles that generate them at random start coordinates (within constraints). For centipede movement issue, I was right and the issue was the framerate of the game so I ended up changing the gameLoop from using setInterval to instead use requestAnimationFrame and the game runs much smoother overall and the centipede is no longer lagging.