How can I loop this if statement when I call a function - javascript

I want to call the boss[i].showBoss() and .moveBoss() functions every time the counter is 10,20,30,40...(dividable by 10), ( if(counter % 10 === 0) works only when the counter is at a number divisible by 10, not the others), but this hard-coded example only runs the code once after counter == 10, not when counter == 20,30,40 etc. Any suggestions on how I can can start the functions every time counter % 10 == 0, but not stop them after the counter is not % 10, for instance 11?
function draw() {
// put drawing code here
background(220);
if (counter >= 10) {
for(i = 0; i < boss.length; i++){
boss[i].showBoss();
boss[i].moveBoss();
}
} else if (counter >= 20) {
for(i = 0; i < boss.length; i++){
boss[i].showBoss();
boss[i].moveBoss();
}
} else if (counter >= 30) {
for(i = 0; i < boss.length; i++){
boss[i].showBoss();
boss[i].moveBoss();
}
}
}

Create an object to represent your boss action you want to start. When divisible by 10, create one of these and added to a list of bosses to draw. Every draw loop, draw all your bosses.
let bossesToDraw = [];
function draw(){
if(counter % 10 == 0){
bosses.push({
// state for the boss like its current position
// this could also create a new boss if you have a proper object
});
}
bosses.forEach(function(boss){
boss.showBoss();
boss.moveBoss()
});
//maybe check if you should remove the boss
}

You are kind of answering your own question here...
Can't you just do:
function draw() {
// put drawing code here
background(220);
if (counter % 10 === 0) {
for (i = 0; i < boss.length; i++) {
boss[i].showBoss();
boss[i].moveBoss();
}
}
}

The function draw() will run anyways. What you need to do is to check when your counter is divisible by 10, your instruction counter % 10 === 0 works fine for that.. Here I've mimic the draw function behaviour with a setInterval. Please note that the draw function is now an arrow function, that's to have access to the counter variable in the scope. This is irrelevent in your case.
let counter = 0;
let draw = () => {
// we do normal draw things
// background(255);
if(counter % 10 === 0) {
// we need to animate the boss.
console.log('current counter was divisible by 10', counter);
}
counter ++;
};
setInterval(draw, 100)

Related

p5js one tough puzzle returning not enough numbers to console

i'm trying to create a one tough puzzle solver thing, can anyone help me on why this is only showing 4 numbers in console instead of 8.
s1 = [1,-4,-1,2];
s2 = [2,-4,-3,4];
s3 = [4,-1,-3,3];
s4 = [3,-3,-4,4];
s5 = [2,-4,-3,2];
s6 = [4,-2,-4,3];
s7 = [1,-2,-4,2];
s8 = [1,-1,-4,4];
s9 = [1,-3,-3,4];
pieces = [s1,s2,s3,s4,s5,s6,s7,s8,s9];
correct =[];
pog = 0;
function setup() {
createCanvas(400, 400);
for(i=0;i<8;i++){
for (h=1;h<8;h++){
if(h==i){
i++;
}
for(j=0;j<4;j++){
if(pieces.at(i).at(1) == -pieces.at(h).at(3)){
console.log(h);
break
i=h;
} else {
shiftL(pieces.at(h));
}
}
}
}
}
//BTW the piece above another piece is 3 pieces away!!!!
function draw() {
background(220);
frameRate(1);
}
function shiftL(array) {
let sV = array.at(0);
array.splice(0,1);
array.splice(array.length-1,0,sV);
}
i'm trying to output more but it only shows 1,3,7,2.
i'm adding more text so that this is able to be published.
It is pretty hard to tell what you are trying to do and your for loop logic is very convoluted, here it is with comments and log statements:
for (i = 0; i < 8; i++) {
console.log(`begin i = ${i}`);
for (h = 1; h < 8; h++) {
console.log(`begin h = ${h}`);
// When i == 0 this will be false
if (h == i) {
// when i == 1 and h == 1, this increments i to 2
// on the next pass through the for loop that increments h,
// i == 2 and h == 2, this increments i to 3
// so on, for each iteration of the inner loop, i gets incremented
i++;
console.log(`incremented i to ${i}`);
}
// this loop should happen just 14 times, 7 times for i = 0 and then 7
// times starting with i = 1
for (j = 0; j < 4; j++) {
if (pieces.at(i).at(1) == -pieces.at(h).at(3)) {
console.log(h);
// exits the loop for j
break;
// unreachable, never happens
console.log("never happens");
i = h;
} else {
console.log(`shiftL(piecese.at(${h}))`);
shiftL(pieces.at(h));
}
}
}
}
Hopefully this helps you figure out why this code is not working properly.

Javascript: Waiting for one (or multiple) condition in For Loop

I want to check a condition for k times for a value to be true, inside a For loop, each time I want to wait 2 seconds, after that I want to go next iteration of the for a loop. For example, I tried something like below -
var k = 0;
for (let i = 0; i < B.length; i++) {
setTimeout(function F_stTimer() {
if (B[i].innerText === "S") {
var A = "True"; //just for example
if (A === true && k == 0) {
// Do something
k = k + 1;
i = i - 1; // so , I can check the ith element again once start the loop again
} //if
else if (A === true && k > 0 && k < 5) { //checking 5 times for A to be false
k = k + 1;
}, i * 2000);
i = i - 1;
} //if
else if (A === true && k == 5) {
k = 0;
} //if
} // if
}, 5000);
} // i loop
But the above type of code is not working because I do not change when it is inside setTimeout.
Anyway, can anyone help me with the problem I have?
One does not need to follow the way I mentioned above, what I want to do is-
check a condition for k times for a value to be true, inside a For loop, each time I want wait t seconds (duration of each delay/interval of delay), after that, I want to go next iteration of the for a loop.
Plz comment for further clarification.
You could take an interval and check a counter.
var counter = 0,
interval = setInterval(function () {
counter++;
if (counter === 5) {
counter = 0;
console.log('five');
} else {
console.log('not five');
}
}, 1000);
You could write a function that takes two arguments:
howManyTimes - number of times you want to iterate
howOften - in what intervals you want to do the check (in milliseconds)
function checkInIntervals(howManyTimes, howOften) {
var counter = 0;
var interval = setInterval(function() {
counter++;
if (counter === howManyTimes) {
clearInterval(interval);
}
// do something
console.log(counter, 'iteration')
}, howOften)
}
// run the function
checkInIntervals(10, 2000);
Inside the interval the counter is incremented and when it's equal the the desired number of iterations, the interval is cleared and the execution stops.

Why does my node's style only decrease and not increase?

Im working on a website, and I'm trying to programmatically fade an object in and out.
However when i run my loop it only subtracts the opacity from the object, when I try to add to the opacity it just stays at 0.01 for the entire 100 loops, but when it runs 100-199 it subtracts 0.01 every time.
I'm confused why its doing such...
function searched() {
var count = 0;
if (srched) {
return
} else {
let runloop = setInterval(function () {
if (count <= 99) {
document.getElementById("done").style.opacity += 0.01;
} else if (count > 99 && count <= 199) {
document.getElementById("done").style.opacity -= 0.01;
} else {
clearInterval(this)
srched = false;
}
count += 1;
}, 40)
}
}
The html code is:
<p id = "done" style="opacity: 0; color: #1a5b02;">
There's no problem with the loop, just adding to the opacity.
The problem is that += can also mean concatenation, so the opacity property gets a value of '0' + '0.01' = '00.01' for a value the first time in the loop, which is corrected to 0.01, but then you get '0.010.01' in the next iteration, which is an error.
-= does not have the problem - it cannot be a string operation, so it just does the subtraction.
Solution: make sure not to do concatenation by mistake. I think the shortest solution is to write ...opacity -= -0.01; but I'm curious if there are any shorter ones ;)
You need to use Number() to add/subtract your opacity, otherwise it is treating as string and hence your effect is not working
var srched=false;
function searched() {
var count = 0,done=document.getElementById("done");
if (srched) {
return
} else {
let runloop = setInterval(function () {
if (count <= 99) {
done.style.opacity = Number(done.style.opacity)+0.01;
} else if (count > 99 && count <= 199) {
done.style.opacity = Number(done.style.opacity)-0.01;
} else {
clearInterval(this)
srched = false;
}
count += 1;
}, 40)
}
}
searched();
<p id="done">Lorem ipsum doner inut</p>

Delay in for-loop

I want to loop over an array and assign a color on each iteration. When the color is set, I want to delay until the next iteration before changing the color again.
This is the code I currently have but I could not create the delay between each iteration of the for-loop over the just1 array.
var colors = new Array("Good","Warning","Bad");
var crntcolor= 0;
just1=[[2.8077203491999057, -1.0756484331027858], [5.4610502752805568, -1.1574541704299315], [2.414925300315495, -1.506728995633369], [11.3143165555403673, -1.4461945021353346]];
function ChangeText()
{
document.getElementById('changeText').innerHTML = colors[crntcolor];
for(i=0; i<just1.length; i++)
{
if(just1[i][0] >= -5 && just1[i][0] <= 5)
{
crntcolor =0;
}
else if (just1[i][0] > 5 && just1[i][0] <= 10)
{
crntcolor = 1;
}
else if (just1[i][0] > 10)
{
crntcolor = 2;
}
setTimeout("ChangeText();",1000);
}
}
ChangeText();
I suppose what you want to do is loop over the array and between each element have a delay. You need to get rid of the for loop and change the text only for one element at a time:
var colors = new Array("Good","Warning","Bad");
var crntcolor= 0;
var just1 = [[2.8077203491999057, -1.0756484331027858], [5.4610502752805568, -1.1574541704299315], [2.414925300315495, -1.506728995633369], [11.3143165555403673, -1.4461945021353346]];
function ChangeText(index)
{
document.getElementById('changeText').innerHTML = colors[crntcolor];
if(just1[index][0] >= -5 && just1[index][0] <= 5)
{
crntcolor =0;
}
else if (just1[index][0] > 5 && just1[index][0] <= 10)
{
crntcolor = 1;
}
else if (just1[index][0] > 10)
{
crntcolor = 2;
}
if(index < just1.length)
{
setTimeout(function() { ChangeText(index+1); },1000);
}
}
ChangeText(0);
I'm not sure what you mean by the delay between the text specific to the array data present in just1. As far as I can tell, you have specified a fixed delay (1000). Do you mean you want a different delay based on the value of what's in your array? If so, you can alter the value in the loop:
setTimeout(function() { ChangeText(index+1); },1000 * just1[index][0]);
this would set the delay to
2.8, 5.45, 2.41 and 11.31 respectively when you loop through the array

How can I delay a loop depending on a condition?

I want to create a delay in a loop depending on a condition. Say, I have this:
var maxLoops = 50;
var counter = 0;
(function next() {
if (counter++ >= maxLoops) {
return;
}
setTimeout(function() {
console.log(counter);
next();
}, 100);
})();
Is there any way to pause the process for 2 seconds only when the counter is equal to 10, 20 or 30? So it should print:
1....10
(delay for a custom period of time)
11....20
(delay for a custom period of time)
21....30
(delay for a custom period of time)
31...50
The bottom line is, I don't want to delay at all when the counter isn't equal to 10, 20, 30.
Sure you can do that just change the timeout when you have a multiple of 10.
var maxLoops = 50;
var counter = 0;
(function next() {
counter += 1
var timeout_duration = counter % 10 == 0 ? 2000 : 0;
if (counter >= maxLoops) {
return;
}
setTimeout(function() {
console.log(counter);
next();
}, timeout_duration);
})();
That said, there need some few improvments because maxLoops and counter are defined on the global scope. Make it a function.
function loop (maxLoops, start) {
var counter = start || 0;
(function next() {
counter += 1
var timeout_duration = counter % 10 == 0 ? 2000 : 100;
if (counter >= maxLoops) {
return;
}
setTimeout(function() {
console.log(counter);
next();
}, timeout_duration);
})();
}
loop(50);
If you don't want to call next when counter isn't a multiple of 10, then you can add a usual loop in between the calls.
function loop (maxLoops, start) {
var counter = start || 0;
var timeout_duration = 2000;
(function next() {
while(counter < maxLoops && counter % 10 != 0) {
counter += 1
}
if (counter >= maxLoops) {
return;
}
setTimeout(function() {
console.log(counter);
next();
}, timeout_duration);
})();
}
loop(50);
That said, keep in mind that a setTimeout of 2000 doesn't mean exactly 2 seconds, but not less than 2 seconds. If somehwere, there is a loop that breaks the thread, the setTimeout could be never called as Javascript is single threaded and there is no fact that the function will be called after 2 seconds. If you're planning to use setTimeout to measure something within time, you might have to plan something else that will include the Date object for timings.
You can just use the setTimeout() with a different timing based on your counter:
var maxLoops = 50;
var counter = 0;
(function next() {
if (counter++ >= maxLoops) {
return;
}
var delay = 0;
// on multiples of 10, use a longer counter
if (counter % 10 === 0) {
delay = 2000;
}
setTimeout(function() {
console.log(counter);
next();
}, delay);
})();
Or, you could skip the setTimeout() completely when you don't need the delay.
var maxLoops = 50;
var counter = 0;
(function next() {
if (counter++ >= maxLoops) {
return;
}
// on multiples of 10, use a longer counter
if (counter % 10 === 0) {
setTimeout(function() {
console.log(counter);
next();
}, 2000);
} else {
console.log(counter);
next();
}
})();
Or, rather than recursion, you can just use a while loop as in this working snippet:
var maxLoops = 50;
var counter = 0;
(function next() {
// while we haven't hit maxLoops and while not a multiple of 10
while (counter < maxLoops && counter % 10 !== 0 && counter !== 0) {
log(counter);
++counter;
}
if (counter < maxLoops) {
setTimeout(function() {
log(counter);
++counter;
next();
}, 1000);
}
})();
function log(x) {
var div = document.createElement("span");
div.innerHTML = x + " ";
document.body.appendChild(div);
}

Categories

Resources