trigger code after x amount of increments - javascript

thanks for looking into this for me.
The issue I am facing is this:
I am keeping track of a variables value, i want to trigger blocks of code after certain values are reached.
currently I am using a switch statement but I am looking for something dynamic.
Example I have now:
class className{
constructor(param){
this.param = param
switch(param.x){
case 25:
param.y += 0.1;
break;
case 50:
y += 0.1;
break;
case 75:
y += 0.1;
break;
}
}
As you can see i want run a block of code after the value of X increments by 25
to manually code each block becomes tedious
i want the same code to run every time the value of x increments by 25
x has no limit and this increments infinitely
so i was looking for some kind of infinite loop or something
does anyone know what I can use for this particular situation
If i could right it like this:
param.x.forEach(25){
param.y += 0.1;
}
I did try this above but to no avail it did not work lol
how can i do this guys any help please?

You could do the calculation like this (x % 25) == 0
var y = 0;
var x = 0;
function trig() {
x++;
console.log(x)
if ((x % 25) == 0) {
y += 0.1;
console.log(y, x)
}
}
setInterval(() => {
trig()
}, 100)
ON Class
class className {
constructor(param) {
this.param = param
}
inc() {
this.param.x++;
if ((this.param.x % 25) == 0) {
this.param.y += 0.1;
}
}
//you could call the inc() function on you click or activity
}

I believe you can just check if (x % 25 === 0 ){ ..do stuff }

Related

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

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)

how to exit out of a document.onkeydown function in javascript?

I would like to, when x reaches 5, exit out of a document.onkeydown function. I tried this:
var x = 0
document.onkeydown = function() {
console.log("Still running...")
x += 1
if (x >= 5) {
break
}
}
but the console says that it was an illegal break statement. I have also tried using a return statement to exit out of the onkeydown loop, but that hasn't worked either. Do any of you know how to exit out of one of these? If so, I would very much like to know it.
I don't see any problem other than replacing break to return... Your code comes out of funtion when X reaches 5
var x = 0
document.onkeydown = function() {
console.log("Still running...")
x += 1
console.log("x" + x)
if (x >= 5) {
console.log("Existing..." )
return;
}
else{
/** Do your stuff **/
console.log('Working')}
}

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>

if condition in javascript using variables

The problem with this code is when I'm executing the if condition. The condition only works if i am using if (pixel.getx() <=100) but does not work for a var x = pixel.getX() & if (x <= 100). Can someone tell me why?
var image = new SimpleImage (200,200);
print (image);
for (var pixel of image.values())
var x = pixel.getX();
var y = pixel.getY()
if (x <= 100 && y <= 100)
{
pixel.setRed(255);
pixel.setBlue(0);
pixel.setGreen(0);
}
else if (x > 100)
{
pixel.setBlue(255);
pixel.setGreen(0);
pixel.setRed(0);
}
print (image);
your for loop is missing {}.
all it does the way you have it in your example is
executing var x = pixel.getX(); as many times as there are image.values()
if you need to repeat a multi line block of code within a for loop it needs to be inside {}
if you are repeating one statement - you don't need {} - that's why it worked when you had if (pixel.getX() <= 100) {...}
Your for loop is missing the braces { } and that's why its not working.
Modified code,
var image = new SimpleImage (200,200);
print (image);
for (var pixel of image.values()) {
var x = pixel.getX();
var y = pixel.getY()
if (x <= 100 && y <= 100) {
pixel.setRed(255);
pixel.setBlue(0);
pixel.setGreen(0);
} else if (x > 100) {
pixel.setBlue(255);
pixel.setGreen(0);
pixel.setRed(0);
}
print (image);
}

Why does the x & y values not increment?

I am building a virtual joystick and this is part of the code that I made so that when the joystick is in between a certain value the x and y value will keep on incrementing by a certain value for instance when the joystick is between 1 and 20 for deltaX it will keep incrementing every second once or if it is in between 21 and 40 it will increment twice every second and I want it to keep incrementing and not staying at the same value of two. When I try this code, the x & y values just stick to 1, 2 or 3 and doesn't increment, could anyone suggest why this happens?
edit:
The If statements need to be outside the function as the joystick breaks and doesn't run if its inside.
if (joystick.deltaX() >= 1 && joystick.deltaX() <= 20) {
(function movex1() {
x = x + 1;
setTimeout(movex1, 1000);
})();
}
if (joystick.deltaX() >= 21 && joystick.deltaX() <= 40) {
(function movex2() {
x = x + 2;
setTimeout(movex2, 1000);
})();
}
if (joystick.deltaX() >= 41 && joystick.deltaX() <= 60) {
(function movex3() {
x = x + 3;
setTimeout(movex3, 1000);
})();
}
if (joystick.deltaY() >= 1 && joystick.deltaY() <= 20) {
(function movey1() {
y = y + 1;
setTimeout(movey1, 1000);
})();
}
if (joystick.deltaY() >= 21 && joystick.deltaY() <= 40) {
(function movey2() {
y = y + 2;
setTimeout(movey2, 1000);
})();
}
if (joystick.deltaY() >= 41 && joystick.deltaY() <= 60) {
(function movey3() {
y = y + 3;
setTimeout(movey3, 1000);
})();
}
When your code executes, joystick.deltaX() and joystick.deltaY() more likely have a value of 0, so no timeout is ever set.
Also, avoid so many ifs when you can just replace them with a division.
Why not use an interval?
var x = 0, y = 0;
// Execute every second
var intervalId = setInterval(function() {
x += Math.ceil(joystick.deltaX() / 20);
y += Math.ceil(joystick.deltaY() / 20);
}, 1000);
// Stop after 20 seconds
setTimeout(function() {
clearInterval(intervalId);
}, 20000)

Categories

Resources