how to keep my cats/objects on the canvas

[emilybarwinczak]

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

i've gotten the cats to spawn at random spots and move in different directions but once they reach the edges of the canvas, they are gone forever.

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

let catsbrown = new Crawler(Math.floor(Math.random() * game.width), Math.floor(Math.random() * game.height), 'brown', 15, 15)
let catsorange = new Crawler(Math.floor(Math.random() * game.width), Math.floor(Math.random() * game.height), 'orange', 15, 15)
let catsblack = new Crawler(Math.floor(Math.random() * game.width), Math.floor(Math.random() * game.height), 'black', 15, 15)

//movement handler here

const detectHit = () => {
    // if the player's x + width or y + height hits the ending point's x+width or y+height, win game
    if (
        player.x < friendshouse.x + friendshouse.width &&
        player.x + player.width > friendshouse.x &&
        player.y < friendshouse.y + friendshouse.height &&
        player.y + player.height > friendshouse.y
    ) {
        friendshouse.reached = true
        document.querySelector('#bottom-right > h2').innerText = 'You Win!'
    } else if (
        player.x < catsbrown.x + catsbrown.width &&
        player.x + player.width > catsbrown.x &&
        player.y < catsbrown.y + catsbrown.height &&
        player.y + player.height > catsbrown.y
    ) {
        catsbrown.reached = true
        document.querySelector('#bottom-right > h2').innerText = 'You lose a life!'
    } else if (
        player.x < catsorange.x + catsorange.width &&
        player.x + player.width > catsorange.x &&
        player.y < catsorange.y + catsorange.height &&
        player.y + player.height > catsorange.y
    ) {
        catsorange.reached = true
        document.querySelector('#bottom-right > h2').innerText = 'You lose a life!'
    } else if (
        player.x < catsblack.x + catsblack.width &&
        player.x + player.width > catsblack.x &&
        player.y < catsblack.y + catsblack.height &&
        player.y + player.height > catsblack.y
    ) {
        catsblack.reached = true
        document.querySelector('#bottom-right > h2').innerText = 'You lose a life!'
    // } else if (
    //     game.x < catsbrown.x + catsbrown.width &&
    //     game.x + game.width > catsbrown.x &&
    //     game.y < catsbrown.y + catsbrown.height &&
    //     game.y + game.height > catsbrown.y
    // ) {
    //     game.reached = true
    }
}

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

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

that i am doing something wrong

What things have you already tried to solve the problem?

have tried if else statements, += and -=, and functions but i can't figure out what will keep these crazy cats on canvas

[DoireannJane]

are you still working on this issue?

[TaylorDarneille]

Create a global "direction" variable that keeps track of which direction the cat is going. When the cat hits a wall, change the variable value. Add an if-statement in the game loop that checks the direction var to decide whether to + or -.

[emilybarwinczak]

PRAISE THE LORD THIS ISSUE IS CLOSED!!!!!

function catbrownMoveX () { console.log(catsbrown.x) if (catsbrown.x > 1087){ catDirection = false } else if (catsbrown.x < 0) { catDirection = true } console.log('Cat Direction' + catDirection) if (catDirection === true){ catsbrown.x += 4 console.log('+') } else { catsbrown.x -= 4 console.log('-') } }

was using === instead of < and moving at 4 was skipping over 1087