Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Javascript Canvas Game that each time you die, the game gets faster, something is wrong?

DREAM68

New Coder
So I am new to Javascript, I have been watching videos and have created a demo game from this.

It seems to mostly work ok, however when you die and hit Start Game again, the game starts but certain game objects now run at twice the speed, if you die again, the game gains speed yet again and does so for each death.

I have console.log() out a variety of variables, one was for "dt" my delta or change in time for the update(dt) function, on the second time through there seems to be 2 console logs for each dt, then i die a third time there are 3 console logs for each dt?

What am i not stopping or clearing?

Link to Game

Here is the link to the game where you can see the source with inspect.

Any help appreciated.

Oh also if you refresh the browser, everything gets sets back to normal?

So here is my Powerup Class where in its Update() function i call the console.log():

JavaScript:
class Powerup {
    constructor (x, y, radius, colour, velocity, hit = 0) {
        this.x = x
        this.y = y
        this.radius = radius
        this.colour = colour
        this.velocity = velocity
        this.energy = 6
        this.hit = hit
    }

    draw() {
        c.beginPath() 
        c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
        c.fillStyle = this.colour
        c.fill()
    }

    update(dt) {
        if (this.energy <= 1) {
            this.colour = 'purple'
            this.radius = 6
            this.velocity.x *= 1.1
            this.velocity.y *= 1.1
        }
        this.x += this.velocity.x * dt
        this.y += this.velocity.y * dt
        console.log('dt = ' + dt)
    }
}
}


Here is my main gameloop:

JavaScript:
function gameLoop() {

    let secondsPassed = 0;

    let oldTimeStamp = 0;

    let fps;

    if (setSpawners == 0) {

        setSpawners = 1;

        spawnEnemies();

        spawnPowerups();

    }

    const callBack = (timeStamp) => {

        // Calculate the number of seconds passed since the last frame

        secondsPassed = (timeStamp - oldTimeStamp) / 1000;

        // Move forward in time with a maximum amount

        secondsPassed = Math.min(secondsPassed, 0.1);

        oldTimeStamp = timeStamp;

        // Calculate fps

        fps = Math.round(1 / secondsPassed);

        fpsEl.innerHTML = fps

        if (debug == 1) console.log('fps = ' + fps);

        if (tabFocus == 1) update(secondsPassed);

        if (tabFocus == 1) render();

        requestAnimationFrame(callBack);         

    }       

    callBack();

Then the main Update() function loops through each of the objects we have Enemies, Powerups, Particles and Projectiles, with each loop for each object is where we call the Update() on each of the objects. The powerup is the easiest object to see the speed increase on, its the yellow ball that comes toward you as the player.

I have one listener that starts the gameloop off when the Start Button is clicked, should this code be in the main game loop?

JavaScript:
startGameBtn.addEventListener('click', (event)=> {
    init();
    gameLoop();
    modalEl.style.display = 'none';
})

So i discovered a new thing, i changed the gameLoop() function as foolows, now i do not get the speed increase each time i die, but i am still getting Console.log()s that are extra than when i run the game for the first time.

So now the first time through i am only seeing dt being updated once, then i die, now i see two sets of dt, one with a value and one at 0, then i die again and i see one set of dt with values and now 2 sets of dt =0, i die again it keeps adding another dt = 0 in the concole.log() outputs, its like there is a thread from the previous game still running in parralel?


JavaScript:
//function gameLoop() {
let secondsPassed = 0;
let oldTimeStamp = 0;
let fps;
if (setSpawners == 0) {
    setSpawners = 1;
    spawnEnemies();
    spawnPowerups();
}
const callBack = (timeStamp) => {
    // Calculate the number of seconds passed since the last frame
    secondsPassed = (timeStamp - oldTimeStamp) / 1000;
    // Move forward in time with a maximum amount
    secondsPassed = Math.min(secondsPassed, 0.1);
    oldTimeStamp = timeStamp;
    // Calculate fps
    fps = Math.round(1 / secondsPassed);
    fpsEl.innerHTML = fps
    if (debug == 1) console.log('fps = ' + fps);
    if (tabFocus == 1) update(secondsPassed);
    if (tabFocus == 1) render();
    requestAnimationFrame(callBack);         
}       
    //callBack();
//}

I also changed the listener:

JavaScript:
startGameBtn.addEventListener('click', (event)=> {
    init();
    callBack();
    if (setSpawners == 0) {
        setSpawners = 1;
        spawnEnemies();
        spawnPowerups();
    }
    //gameLoop();
    modalEl.style.display = 'none';
})
 
It appears like you're adding new listeners with each restart, but you'll need to submit some of the essential code here for more assistance. (For example, the code containing the console.log that appears to be duplicated, as well as how it is called/triggered)
So I am new to Javascript, I have been watching videos and have created a demo game from this.

It seems to mostly work ok, however when you die and hit Start Game again, the game starts but certain game objects now run at twice the speed, if you die again, the game gains speed yet again and does so for each death.

I have console.log() out a variety of variables, one was for "dt" my delta or change in time for the update(dt) function, on the second time through there seems to be 2 console logs for each dt, then i die a third time there are 3 console logs for each dt?

What am i not stopping or clearing?

Link to Game

Here is the link to the game where you can see the source with inspect.

Any help appreciated.

Oh also if you refresh the browser, everything gets sets back to normal?

So here is my Powerup Class where in its Update() function i call the console.log():

JavaScript:
class Powerup {
    constructor (x, y, radius, colour, velocity, hit = 0) {
        this.x = x
        this.y = y
        this.radius = radius
        this.colour = colour
        this.velocity = velocity
        this.energy = 6
        this.hit = hit
    }

    draw() {
        c.beginPath()
        c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
        c.fillStyle = this.colour
        c.fill()
    }

    update(dt) {
        if (this.energy <= 1) {
            this.colour = 'purple'
            this.radius = 6
            this.velocity.x *= 1.1
            this.velocity.y *= 1.1
        }
        this.x += this.velocity.x * dt
        this.y += this.velocity.y * dt
        console.log('dt = ' + dt)
    }
}
}


Here is my main gameloop:

JavaScript:
function gameLoop() {

    let secondsPassed = 0;

    let oldTimeStamp = 0;

    let fps;

    if (setSpawners == 0) {

        setSpawners = 1;

        spawnEnemies();

        spawnPowerups();

    }

    const callBack = (timeStamp) => {

        // Calculate the number of seconds passed since the last frame

        secondsPassed = (timeStamp - oldTimeStamp) / 1000;

        // Move forward in time with a maximum amount

        secondsPassed = Math.min(secondsPassed, 0.1);

        oldTimeStamp = timeStamp;

        // Calculate fps

        fps = Math.round(1 / secondsPassed);

        fpsEl.innerHTML = fps

        if (debug == 1) console.log('fps = ' + fps);

        if (tabFocus == 1) update(secondsPassed);

        if (tabFocus == 1) render();

        requestAnimationFrame(callBack);        

    }      

    callBack();

Then the main Update() function loops through each of the objects we have Enemies, Powerups, Particles and Projectiles, with each loop for each object is where we call the Update() on each of the objects. The powerup is the easiest object to see the speed increase on, its the yellow ball that comes toward you as the player.

I have one listener that starts the gameloop off when the Start Button is clicked, should this code be in the main game loop?

JavaScript:
startGameBtn.addEventListener('click', (event)=> {
    init();
    gameLoop();
    modalEl.style.display = 'none';
})

So i discovered a new thing, i changed the gameLoop() function as foolows, now i do not get the speed increase each time i die, but i am still getting Console.log()s that are extra than when i run the game for the first time.

So now the first time through i am only seeing dt being updated once, then i die, now i see two sets of dt, one with a value and one at 0, then i die again and i see one set of dt with values and now 2 sets of dt =0, i die again it keeps adding another dt = 0 in the concole.log() outputs, its like there is a thread from the previous game still running in parralel?


JavaScript:
//function gameLoop() {
let secondsPassed = 0;
let oldTimeStamp = 0;
let fps;
if (setSpawners == 0) {
    setSpawners = 1;
    spawnEnemies();
    spawnPowerups();
}
const callBack = (timeStamp) => {
    // Calculate the number of seconds passed since the last frame
    secondsPassed = (timeStamp - oldTimeStamp) / 1000;
    // Move forward in time with a maximum amount
    secondsPassed = Math.min(secondsPassed, 0.1);
    oldTimeStamp = timeStamp;
    // Calculate fps
    fps = Math.round(1 / secondsPassed);
    fpsEl.innerHTML = fps
    if (debug == 1) console.log('fps = ' + fps);
    if (tabFocus == 1) update(secondsPassed);
    if (tabFocus == 1) render();
    requestAnimationFrame(callBack);        
}      
    //callBack();
//}

I also changed the listener:

JavaScript:
startGameBtn.addEventListener('click', (event)=> {
    init();
    callBack();
    if (setSpawners == 0) {
        setSpawners = 1;
        spawnEnemies();
        spawnPowerups();
    }
    //gameLoop();
    modalEl.style.display = 'none';
})
It appears like you're adding new listeners with each restart, but you'll need to submit some of the essential code here for more assistance. (For example, the code containing the console.log that appears to be duplicated, as well as how it is called/triggered)
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom