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():
Here is my main gameloop:
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?
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?
I also changed the listener:
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';
})