Ahhhh ! I am stuck -- don't know how to get my objects to move

[emilybarwinczak]

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

I have my player and a function that ends the game in a win when you reach the house. I've created three new crawlers (cats of varying color) but am just dead stuck on figuring out how to get them to move around the board on their own

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

let player = new Crawler(50, 630, 'white', 18, 18)
let friendshouse = new Crawler(750, 150, 'white', 48, 32)
console.log('this is the player', player)
console.log('this is the friends house', friendshouse)

// add new crawlers for cats? with some sort of function that pushes them to move at random times?

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)
//can i simplify this into an array? and make them all move randomly as well?

//movement handler and other stuff here

const gameLoop = () => {
    // clear the canvas
    ctx.clearRect(0, 0, game.width, game.height)
    // display relevant game state(player movement) in our movement display
    moveDisplay.innerText = `X: ${player.x}\nY: ${player.y}`
    // check if the endingPoint has been reached, if not, render the endingPoint
    friendshouse.render()
    player.render()
    catsbrown.render()
    catsorange.render()
    catsblack.render()

    // function moveCrawler() {
    //     const $span = $(catsbrown);
    //     $span.fadeOut(1000, function(){
    //         var maxLeft = $(window).width() - $span.width();
    //         var maxTop = $(window).height() - $span.height();
    //         var leftPos = Math.floor(Math.random() * (maxLeft + 1))
    //         var topPos = Math.floor(Math.random() * (maxTop + 1))

    //         $span.css({ left: leftPos, top: topPos }).fadeIn(1000);
    //     });
    // };

    detectHit()
    if (friendshouse.reached) {
        stopGameLoop()
        // add in our detection to see if the hit has been made
        console.log('You win!')
    }
}

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

no error. not seeing any unexpected behavior either

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

was thinking about making an array with movements inside and somehow have one selected at random and move that one of (or all) the objects accordingly but I am sturgggggggglin

What things have you already tried to solve the problem?

a lot of random code to get one specific item to move but then it disappears from the game board all together

[DoireannJane]

What's going on here : ``` const $span = $(catsbrown); // $span.fadeOut(1000, function(){

[emilybarwinczak]

it was a random function I tried to see if it would make one of the cats move...have been trying a lot of random things haha

[DoireannJane]

I think you're using some jQuery there but we should just stick to vanilla JS

[DoireannJane]

So what you're thinking through is making an array that holds a set of movements? And then a function that loops through that array and is called later to move the cats?

[emilybarwinczak]

yes that's my tentative plan right now, just am not currently able to start that process on account of my brain stopped working :) and also not even sure if that's the best (or even a good) way to do it, ahh woe is me!

[emilybarwinczak]

worked with Tom and figured out how to get them to move randomly, now onto my next issue!

in my gameLoop after rendering each cat:

catsbrown.render()
catsorange.render()
catsblack.render()
catsbrown.x += 4
catsorange.x -= 4
catsblack.y += 4