Develop Reference

How to make for loop happen every set amount of time?

I need to add "momentum" to an object on a grid. The player can control the object as long as he hold the key down, however, I want the ability to press the key one time and the object will keep going in the direction of the key until he hits the border. I have create a simple for loop that works, however because it happens so fast the object just kind of "teleports" to the border. I want the for loop to happen for example every second. Here is a short part of my code:
case "ArrowRight":
if (snakex + 1 == 26) {
temp += 1;
}
else {
for (let i = snakex; i < 26; i++) {
snakex += 1;
snake.style.gridArea = snakey + "/" + snakex;
}
}
break;
The game board is a 25x25 grid, if the fact that going to the right will result in going out of the board, the function will not do anything (temp is there for filling out a "fail mechanic" that I didn't add).
Without the for loop, the player needs to hold down the right key. This for loop makes it so the player needs to press it once, however it happens so fast it "teleports" like I said. Is it possible to make this loop happen every second, for example?
Any help would be appreciated. Thanks in advance!

you can control the speed of a loop by wrapping it in an async function, then you can write a custom function for sleep and await the sleep function at the beginning of every loop.
async function test() {
for(let i =0; i < 10; i++ {
await sleep(1000)
//logic goes here
}
}
function sleep(ms: number) {
return new Promise(r => setTimeout(r,ms))
}

Optimize function without looping through array

I've developed a small memory game, the game contains a function to flip cards for every turn. I'm looping thru the array containing the images every time to pick one card. I'm sure there's away to optimize this function so I don't have to loop thru the array every time in order to just turn one card. But I'm a bit clueless how to proceed and would like to get some guidance of how I possibly could optimize this function.
Can I create some sort of if statement perhaps? Note. Looking for vanilla javascript suggestions only and without creating an object to replace the array.
I'm clueless of another method then to loop thru the array.
function flipCards() {
var i; // Loopvar
// For loop
for (i = 0; i < cardsElems.length; i++) {
if (this == cardsElems[i]) {
if (cardsCounter > 1) {
return;
}
cardsElems[i].className = "brickFront";
cardsElems[i].src = "pics/" + allCards[i] + ".png";
removeListener(cardsElems[i], "click", flipCards);
if (cardsCounter < 1) {
card1 = i;
} else {
card2 = i;
}
cardsCounter += 1;
}
}
if (cardsCounter < 2) {
nextBtn.disabled = true; // Disable button
}
if (cardsCounter == 2) {
turns += 1;
turnNr.innerHTML = turns;
nextBtn.disabled = false; // Enable button
}
if (brickBack.length == 0) {
endGame();
}
} // End flipCards

how about using Loadash ?
It has plenty of function to manipulate arrays and very efficient.
you can store your data inside an object.By key(card name) value(fliped or not). then access by the key to change the value to be flipped or not.
example : {Ace: true} = {'cardName': 'isFlipped'}

Algorithm : finding nearby value the fastest way

I have an array of sorted numbers, and a starting value. For the sake of simplicity, let's say the array has values from 1 to 20, and the starting value is 10.
The value to find can change every 5 seconds, based on user input. It can either increase or decrease and it always keeps in the range of values of the table.
The only thing I cannot know is whether the value is increasing or decreasing. I have come up with the (very) simple algorithm below.
Can you think of a way to improve it ?
Ideally, I think the best approach would be to run the two for loops simultaneously and return when value is found... Using workers for example ?
In my example, the "going down" for loops is exhausted before "going up" starts running. Which, idealy, shouldn't happen, since I'm trying to spread tries -1/+1 each time.
Btw : the reason why I'm trying to do this is because I have to run quite heavy functions in the for loops. The code is running in node.js context.
Here's a JSFiddle and the code below
const attempts = document.getElementById('attempts');
let attemptsCount = Number(attempts.textContent);
const lastValue = 10;
const valueToFind = 16; //this must be found in the least possible number of attempts
const table = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
const lookup = () => {
for (var i = lastValue; i > 0; i--) {
if (table[i] == valueToFind) {
alert('Found going down');
return;
} else {
attemptsCount++;
attempts.textContent = attemptsCount;
}
}
for (var i = lastValue; i < table[table.length-1]; i++) {
if (table[i] == valueToFind) {
alert('Found going up');
return;
} else {
attemptsCount++;
attempts.textContent = attemptsCount;
}
}
}
//find new value
lookup();

Right now, each for loop you have runs async from one another...so one side will always finish before the other side starts...which is not ideal.
Remember that for loops are set up to initialize, check if bool statement = true, and set next step...so like if statements, you can implement multiple statements in each scenario.
Reducing the loop attempts can be simple as doing it at the same time:
const lookup = () => {
for (var up = lastValue, down = lastValue-1; up < table[table.length-1] || down > 0; up++, down--) {
if (up < table[table.length-1] && table[up] == valueToFind) {
alert('Found going up');
return;
} else if (down > 0 && table[down] == valueToFind) {
alert('Found going down');
return;
} else {
attemptsCount++;
attempts.textContent = attemptsCount;
}
}
Your JSFiddle updated

How to make if statement true only once?

How do I make an if statement run only once. I am making a game in javascript and once the users score is 5 I want to add a new enemy into the array. The problem I am having is once the if statement is true it keeps adding new enemies over and over until the whole screen is covered with enemies. I want it to add only 1 new enemy when score is 5 then another when score is 10 and so on. I cannot think of a way to accomplish this. Thank You.
Sketch.js
var score = 0;
//3 three enemies once game starts
function StartingEnemies() {
for (var i = 0; i < 2; i++) {
enemies[i] = new BasicEnemy();
}
}
//add new enemies into the array
function spawnNewEnemies() {
enemies.push(new BasicEnemy());
}
if (score == 5) {
spawnNewEnemies();
}

var addNew=true;
if (score == 5 && addNew) {
spawnNewEnemies();
addNew=false;
}
If you are running the code inside of a function, make sure that addNew is declared somewhere that it will persist between calls.

You need a simple latch. Try adding a boolean variable called isEnemyAddedAtFive and set it to false as it's default value.
var isEnemyAddedAtFive = false;
Then at your check point test this value and if not latched, act and latch:
if( score == 5 && !isEnemyAddedAtFive ) {
addEnemy();
isEnemyAddedAtFive = true;
}
Good Luck!

if ( score != 0 && score % 5 == 0) {
spawnNewEnemies();
}
Try this one.

This is a little more complex than you are currently coding. There are a few ways you could interpret this. Firm your requirements.
Do you want to only add an enemy if the score is divisible by 5... Meaning only when the score ends in 0 or 5 (5, 10, 15, 20, etc):
If (score % 5 == 0) {
enemies.push(new BasicEnemy());
}
Otherwise you may need to track a total score and a level/segmented score representing the score since the program last took action on the game.
// Initialization
var totalScore = 0;
Var currents core = 0;
// Game event loop
while (player.lifeState > 0) {
// Check current score is 5 or more on every iteration of the game event loop
if (currentScore >= 5) {
// Handle score
spawnNewEnemies();
// Update scoring
totalScore += currentScore;
// Reset currentScore (or not if you want to do more stuff in the level before resetting but this may change the above logic)
currentScore = 0;
}
Your logic will get more complex as you as more features. The best first step is to define clear requirements before coding as one retirement may influence how you implement another

//post this snippet at some top level of your code.
var onceMap = {};
function once(key) {
if (onceMap[key]) {
return false;
} else {
onceMap[key] = true;
return true;
}
}
var score = 10;
//do this in your task function
function task() {
if (score >= 5 && once("score5")) {
console.log("score 5 action");
}
if (score >= 10 && once("score10")) {
console.log("score 10 action");
}
}
task();
task();
task();

What comes first to mind after seeing your code is that:
It should be
for (var i = 0; i < 3; i++)
for 3 enemies
You are calling your code (i.e .js file multiple times). This means that score resets to 0 each time it is called and score==5 condition occurs multiple times.
Solution:
Change your logic such that the .js file is called only once and store the score for the entire duration of the game.
Hope this helps

!( score != 0 && score % 5 == 0) || spawnNewEnemies()
//how it functions
!true || run()
I'll have to admit this is a bit abstract. But what this does is if the score is true, it forces into false and runs spawnNewEnemies. If the score isn't true. It forces into true and don't run the false condition.
However id suggest a function edit:
var spawnNewEnemies =scored=> !(scored !=0 && scored%5===0) || enemies.push(new BasicEnemy());
spawnNewEnemies(score);
SpawnNewEnemies now takes a score parameter. But also is an arrow function that can be used for quick one-liners. Since score is a dependency, itll run on that condition. If the base score is 0 and also divisible by 5, the condition returns true, but the "bang" (!) operator forces it into false, and executes the new enemies. If the score isn't divisible by five, itll return false but the bang flips it and will not return the OR false arguement.

How to make an infinite for loop (for(;;)) not crash?

I'm new to JS, so most of my code hasn't worked. I've made a program to find out every prime number, but every time I use it, it crashes. Is there any way to make this code not crash upon running?
var i = 0;
for (;;) {
if (i % 2 === 0 || i % 3 === 0 || i % 5 === 0 || i % 7 === 0) {
i++;
}
else {
return i;
i++;
}
}

The correct approach is to use a single timer. Using setInterval, you can achieve what you want as follows:
window.onload = function start() {
primes();
}
function primes() {
var i = 0;
window.setInterval(function () {
if (i % 2 === 0 || i % 3 === 0 || i % 5 === 0 || i % 7 === 0) {
i++;
} else {
console.log(i);
i++;
}
}, 1000); // repeat forever, new value every 1 second
}
This will print the values to the console once a match is found (It does a check every second). But you can adjust this on the second parameter of the setInterval function.
If you want the results on the actual page, you can replace the console.log() with document.createTextNode().
Also, i have not checked this or know if the algorithm is right. Just adapted from your code.

List of fixes:
You manually update i and use a blank for loop instead of using the for loop normally, but having the middle condition always return true (a while loop could be used here also, but would still require manually updating i) as you don't plan on stopping. However, you can actually just put the whole thing in a timer instead of a loop, like #Leonel Atencio did.
You use return outside of a function, and if you did put this code inside of a function, it would just return the first prime number every time, so it would always return 1.
The formula is incorrect, only checking for some examples of primes; As #Alexandru-Ionut Mihai said, 121 would be considered prime, even though it is 11x11.
Fixed:
var primes = [];
var i = 1; //Start at 2; since "i" is incremented at the start of the function, this won't start it at 1, which would cause problems (the array would only have 1 in it, since all other whole numebrs are divisible by one)
setInterval(primeFunc,100);
function primeFunc(){
i++; //Increment current number
isPrime=true; //Assume prime
for(var j=0;j<primes.length;j++){ //Rule out non-primes with the power of modulo
if(i%primes[j]==0) { //If the current number can be divided (is divisible) by any previous prime...
//...then it's not a prime, so cancel any further chacks and move on
isPrime=false;
break;
}
}
if(isPrime){
//The current number is not divisible by any other primes, so it is itself a prime; if it was divisible, isPrime would be set to false by our loop above
primes.push(i);
output.innerHTML=primes;
}
}
<span id="output"></span>