I am building a browser pet raising game. My plan is to use if/else to determine what the HP drop rate should be for the pet. If below a certain hunger / happiness, the HP will drop faster and faster.
I am using a variable setInterval, and the value inside is not update, but the value is updating when printing to the console.
let hp = 100;
let dropHPWeight = 6000;
let dropHPCall = setInterval(dropHP, dropHPWeight);
function dropHP() {
hp = (hp % 360) - 1;
console.log(dropHPWeight);
dropHPWeight = dropHPWeight + 6000;
}
Here I am dropping the HP every 6 seconds, and then as a test, I am seeing if it will increase, but it does not.
Where am I going wrong here?
As some are mentioning in the comments, you cannot change the interval of a setInterval once it has been initiated. You are better off using setTimeout. Like this:
let hp = 100;
let dropHPWait = 6000;
function dropHP() {
hp = (hp % 360) - 1;
dropHPWeight = dropHPWait + 6000;
if (somecondition){
setTimeout(dropHP, dropHPWait)
}
}
dropHP()
Now you call dropHP, which changes the interval, and then uses setTimeout to call itself again after the given increment. I stuck the setTimeout inside some conditional, because you don't want it to run forever (so you have to decide at what point you want it to stop running).
Related
I am trying to create a Countup counter Starting from 1 to 10000 and i do not want it to reset when user refreshes the page or cancels the page. The Counter should start from 1 for every user that visits the page and keep running in background till it gets to 10000 even if the page is closed.
I have written the page below which;
Starts from the specified number for every new visitor
Saves the progress and does not reset when page is refreshed, however
It does not keep counting when page is closed and starts from the last progress when user closes the tab and comes back later. My code is
function countUp() {
var countEl = document.querySelector('.counter');
var countBar = document.querySelector('.progress-bar');
var x = parseInt(localStorage.getItem('lastCount')) - 1 || 1;
var y = countEl.dataset.to;
var z = countBar.dataset.to;
function addNum() {
countEl.innerHTML = x;
x += 1;
if (x > y && x > z) {
clearInterval(timer);
}
localStorage.setItem('lastCount', x);
}
var timer = window.setInterval(addNum, 1000);
localStorage.setItem("addNum", counter);
toggleBtn.addEventListener('click', function(){
countUp();
toggleBtn.classList.add('hidden');
});
}
countUp();</script>
<body onload=countUp();>
<div class="counter" data-from="0" data-to="10000000"></div>
<div class="progress-bar" data-from="0" data-to="10000000"></div>
</body>
It's difficult to show an example on StackOverflow because it doesn't let you fiddle with localStorage but, it sounds like you want something like:
When a user visits the page check localStorage for a timestamp.
If timestamp exists, go to step 4
Timestamp doesn't exist so get the current timestamp and stash it in localStorage.
Get the current timestamp. Subtract the timestamp from before. If over 10,000, stop, you're done.
Display difference calculated in step 4.
Start a 1 second timer, when time is up, go to step 4.
Something along those lines should work even if they refresh the page and since you are calculating from the original timestamp it will "count" in the background even if the page is closed.
window.addEventListener("DOMContentLoaded", () => {
const start = localStorage.getItem("timestamp") || Date.now();
localStorage.setItem("timestamp", start);
function tick() {
const now = Date.now();
const seconds = Math.floor((now - start) / 1000);
const display = document.getElementById("display");
if (seconds > 10000) return display.innerHTML = "We're done";
display.innerHTML = seconds;
setTimeout(tick, 1000);
}
tick();
});
<div id="display"></div>
So, client-side code can't normally execute when a client-side javascript page is closed.
What you could do, however, is calculate where the timer should be then next time it is loaded.
For example, in your addNum() function, you could in addition to the last count, also store the current date (and time).
function addNum() {
countEl.innerHTML = x;
x += 1;
if (x > y && x > z) {
clearInterval(timer);
}
localStorage.setItem('lastCount', x);
localStorage.setItem('lastDate', new Date());
}
Then, when your code starts, you can retrieve lastDate, and then subtract the current Date() from it.
Then use that to add the difference to your counter.
function countUp() {
let storedCount = parseInt(localStorage.getItem('lastCount'));
let storedDate = Date.parse(localStorage.getItem('lastDate'));
let now = new Date()
let diffSeconds = (now.getTime() - storedDate.getTime()) / 1000;
let storedCount += diffSeconds;
var countEl = document.querySelector('.counter');
var countBar = document.querySelector('.progress-bar');
var x = storedCount - 1 || 1;
var y = countEl.dataset.to;
var z = countBar.dataset.to;
}
I'm sure there are some more changes required to make it work with your code, but the idea is to store the current time so that when the page is closed and reopened, you can 'adjust' the count to catch up to what it should be.
What you want here is not possible just from the client-side code, there is no way for 2 different machines to share that information at all.
Here's the thing though, you can do this with a backend where the database gets updated every time a new IP hits the server. Note with this approach, a user here is one system and not different browsers or sessions.
To update this real-time for someone who is already on the website, run a timer and call an API that specifically gives you the count. Therefore the page gets updated frequently. You can also do this with react-query as it comes with inbuilt functions to do all this.
i need help to discover how to do this
Basicly im trying to build a game like pacman, i have a matrix that defined where is the blocks, the pacman, the enemys and the balls, here is my matrix.
var MeshDataPac =
[
"------------------------------",
"-ooooooooooooo--ooooooooooooo-",
"-o----o------o--o------o----o-",
"-o----o------o--o------o----o-",
"-oooooooooooooooooooooooooooo-",
"-o----o--o----------o--o----o-",
"-oooooo--ooooo--ooooo--oooooo-",
"------o------ -- ------o------",
"------o- -o------",
"------o- ---- ---- -o------",
"- o- - e - -o -",
"------o- ---------- -o------",
"------o- -o------",
"------o- ---------- -o------",
"-ooooooooooooo--ooooooooooooo-",
"-o----o------o--o------o----o-",
"-ooo--oooooooo--ooooooooooooo-",
"---o--oooo oooo------",
"---o--o--o-----------o-o--o---",
"-oooooo--ooooo--oooooo-o--ooo-",
"-o-----------o--o-----------o-",
"-oooooooooooooooXoooooooooooo-",
"------------------------------"
];
to discover colisions between my pacman and the blocks and balls i discover where is the position of the "-" and "o" and the movement on each keypress is always the SCALE that i gave at the begin on creating the map for example 10, this kinda works well.
But now i need to animate the enemys "e" and i want that they move like when i press a key but randomly, if i try to increment the position on my animate function with the same as the pacman the speed is to fast, i want to control that speed but i also want that he moves always 1 block on my matrix, the only way that i know to reduce speed in this case is to put the position increment lower, but i cant do that as i said, because i want him to move 10 or SCALE each time
Tryed to use SetTimeout inside my enemyMove function and tryed to give a timeout to request animationframe but first seems like bad approach, then it becomes kinda buggy
here is my keypress function
function handleKeyPressed(e) {
var PacMan = scene.getObjectByName('PacMan');
gameSong.play();
switch(String.fromCharCode(e.which))
{
case "w": if(!detectaColisao(PacMan.position.x, PacMan.position.y + SCALE))
PacMan.position.y += SCALE;
break;
case "a": if(!detectaColisao(PacMan.position.x - SCALE, PacMan.position.y))
PacMan.position.x -= SCALE;
break;
case "s": if(!detectaColisao(PacMan.position.x, PacMan.position.y - SCALE))
PacMan.position.y -= SCALE;
break;
case "d": if(!detectaColisao(PacMan.position.x + SCALE, PacMan.position.y))
PacMan.position.x += SCALE;
break;
}
}
function anima()
{
moveEnemys();
var delta=clock.getDelta();
orbitCamera.update(delta);
requestAnimationFrame( anima);
renderer.render(scene, camera);
}
how can i do that the moveEnemys become slower but without changing the number of position increment that i want, that i have a animation like when i press a key?
Right now, the moveEnemys function gets called every time anima is run. As you've mentioned, this means moveEnemys is happening too many times and causing your enemies to move too quickly. Try replacing your anima function with this:
var enemyTimer = null;
function anima() {
if (enemyTimer == null) {
// The enemy timer has not been created yet
// Making the second argument 1000 means moveEnemys will get called
// once per second
enemyTimer = setInterval(moveEnemys, 1000);
}
var delta=clock.getDelta();
orbitCamera.update(delta);
requestAnimationFrame( anima);
renderer.render(scene, camera);
}
This way, the first time anima is called, you set up an interval causing moveEnemys to happen once per second. Modify 1000 as necessary to change how often moveEnemys occcurs.
requestAnimationFrame callbacks have current time stamp as the first argument and you should utilize that to run your app at a desired frame rate. This is how IMO the mainloop for most games should look like:
var _prevTime = 0.0;
var _at = 0.0;
var _stepSize = SOME_NUMBER;
var _frame = 0;
function loop(newTime){
newTime /= 1000;
var tick = newTime - _prevTime;
_prevTime = newTime;
tick = Math.max(tick, SOME_MAX_TICK); // important: prevent slow updates from spiraling out of control.
_at += tick;
while (_at > _stepsize){
_at -= _stepsize;
_frame += 1;
CALL_UPDATE_HERE();
}
CALL_DRAW_HERE();
requestAnimationFrame(loop);
}
I have built a script which takes a sequence of images and displays them on a canvas element in a animation loop.
This works really well on my desktop, but on IPAD (3 retina) it is very slow. Could you suggest any way to improve the performance?
var videoItts = 0;
function playVideo() {
if(videoItts < 92) {
setTimeout(function() {
ctx.clearRect(0,0,canvas.width,canvas.height)
ctx.drawImage(imagesL[videoItts],0,0,1024,636);
requestAnimationFrame(playVideo);
videoItts ++;
}, 1000/22)
}
}
requestAnimationFrame(playVideo);
The imagesL is an array of pre-loaded images.
I would suggest not mixing setTimeout and requestAnimationFrame. You can solve it using only requestAnimationFrame:
var startTime = Date.now();
var fps = 22;
var lastDrawnIndex = null;
var totalFrames = 92;
function drawVideo() {
var currTime = Date.now();
var currFrameIndex = Math.round((currTime - startTime) / (1000/fps)) % totalFrames;
// Since requestAnimationFrame usually fires at 60 fps,
// we only need to draw the image if the frame to draw
// actually has changed from last call to requestAnimationFrame
if (currFrameIndex !== lastDrawnIndex) {
ctx.drawImage(imagesL[videoItts],0,0,1024,636);
lastDrawnIndex = currFrameIndex;
}
requestAnimationFrame(drawVideo);
}
requestAnimationFrame(drawVideo);
The idea is that for every call to requestAnimationFrame we calculate, based on the elapsed time and the desired animation frame rate, which frame index to draw. If it's different from last calculated frame index we draw it. Then we schedule drawVideo to be called next animation frame by calling requestAnimationFrame(drawVideo) at the end.
The code above will loop frames 0-91 continously at 22 fps. I removed the ctx.clearRect call, it is only needed if the frames contains transparency. So you might want to add that back.
I'm working on a JavaScript game that involves throwing a snowball. I need the snowball to render as often as possible during its flight path. Chrome does all the calculations, including setting the style.left and style.top properties, but doesn't actually redraw the snowball until it reaches its destination. Opera doesn't have this problem.
A relevant point is that putting in an alert() after renderSnowball() fixes the problem, except using the alert() is an obvious issue.
Here's my code so far:
function throwSnowball()
{
var theta = parseFloat(angleField.value) * Math.PI/180 ;
var Vir = parseFloat(velocityField.value) ;
if (!isNaN(Vir) && !isNaN(theta) )
{
Vix = Math.cos(theta) * Vir * 50;
Viy = Math.sin(theta) * Vir * 50;
time = new Date() ;
var timeThrown = time.getTime() ;
while (snowballPosY > 0)
{
current = new Date() ;
var currentTime = current.getTime() ;
var timeElapsed = (currentTime - timeThrown)/5000 ;
snowballPosX += Vix * timeElapsed;
snowballPosY += Viy * timeElapsed;
Viy -= GRAVITY * timeElapsed ;
renderSnowball() ; //renderSnowball() sets the style.left
// and style.top properties to snowballPosX pixels
// and snowballPosY pixels respectively
timeThrown = currentTime ;
}
snowballPosX = 0 ;
snowballPosY = 50 ;
renderSnowball() ;
}
}
You're totally blocking the main thread. Have you tried using a setTimeout (even with a zero timeout) to allow other things to happen during your animation?
If you're willing to use experimental technology, requestAnimationFrame would be even better.
Edit: the setTimeout approach would look something like this (replacing the while loop):
var drawAndWait = function() {
if (snowballPosY > 0) {
// movement/drawing code here
setTimeout(drawAndWait, 20 /* milliseconds */);
} else {
// reset code that would normally go after your while loop
}
};
drawAndWait();
So each time the drawing finishes, it arranges for itself to be invoked again, if appropriate. Note that your throwSnowball function will return quickly; the throwing isn't actually done until later on. This takes awhile to get used to doing correctly; don't be too concerned if it's not intuitive at first.
Try getting out of the tight loop. Chrome may not want to redraw until your function exits. Try using setInterval or setTimeout to give Chrome a chance to repaint.
I had a task to make a progress bar and a process duration timer along with it. So, not thinking twice I did this:
<div class="mainInfo">
<div id="timer"><span id="elapsedText">0:00</span>/<span id="durationText">3:00</span></div>
<div id="progressBar"><div id="progress" style="width:0;"></div></div>
</div>
And the JS:
var time = 1000;
var duration = 180;
var $progress = $("#progress");
var $elapsedText = $("#elapsedText");
updateTime();
function updateTime() {
var elapsed = time / 1000;
$elapsedText.text(Math.floor(elapsed / 60) + ":" + Math.floor(elapsed % 60));
$progress.css('width', (elapsed * 100 / duration) + "%");
time = time + 1000;
setTimeout("updateTime()", 1000);
}
Time is actually retrieved from another variable - this ones for the demo (to illustrate that I actually have the value in miliseconds).
And it worked (not only on my PC), and still does, but the procmon shows a CPU spike on browser (chrome, ff) process when this cycle is running - 30-40% instead of regular 0,5%.
Is there a more efficient way to do this?
There is a standard function for that: SetInterval(function, delay_in_ms).
It calls a function in millisecond intervals.
Instead of
setTimeout("updateTime()", 1000);
use
setTimeout(updateTime, 1000);
The fact that you're invoking the compiler each second could really hurt performance. Passing a string to setTimeout is basically causing an eval within the setTimeout.
There is a default for that, and that is setInterval.
Be careful, the function passed as the first argument to setInterval is always executed in global scope.
Number two, a progress bar is usually created along-side expensive processes. You are using it for display purposes only and forcing a delay, which I don't particularly find useful, but if you like the layout, I guess you can go for it.
The way you would usually use it is:
executeFirstPotentiallyExpensiveProcess();// this is a call to a big function.
// then update the value of the progress bar in percentage style.
executeSecondPotentiallyExpensiveFunction()// this is the second part of your process.
// then again update..
// repeat until you have 100%.
// Basically, you logically divide the expenses of your various executions
// into numerable bits, preferably equal to one another for your convenience,
// but you chunk your loading process or whatever type of process and increment
// the progress after each chunk is complete.
Your use of jQuery disturbs me...
var time = 1000;
var duration = 180;
var $progress = document.getElementById("progress");
var $elapsedText = document.getElementById("elapsedText");
var beginTimestamp = new Date().getTime();
updateTime();
setInterval(updateTime,1000);
function updateTime() {
var now = new Date().getTime();
var elapsed = now-beginTimeStamp + time;
$elapsedText.firstChild.nodeValue = Math.floor(elapsed / 60) + ":" + Math.floor(elapsed % 60);
$progress.style.width = (elapsed * 100 / duration) + "%";
}
Maybe without jQuery your browser might run better ;)
Try with the function setInterval.