How to loop an array in JavaScript

Question

I'm making a roulette using HTML/CSS/JS. How it work: The roulette circles are a background-image that is made of 15 circles. 7red 7blue and 1green. The background-img is repeat-x so it never end. Then the javascript randomize a px position of the background img than the roulette image moves to that px. For an example if it randomize 17839, the roulette img will move to that point. Now I'm trying to figure out how to tell the javascript on with color the roulette stoped.

My question is "How to loop an array(or copy) so it will have at least 2000 string Index of pattern below?"

I was trying to make a array:

var colors = ["red", "blue", "red", "blue", "red", "blue", "red", "blue", "red", "blue", "red", "blue", "red", "blue", "green"];

And then loop it somehow to make the array verry long. The max px that can be randomized is 20000. Every color circle is 100px. That make the whole patern 1500px long. That mean that I need a array that is at least 2000 string long. It feels wrong to write an array that long at my own so I'm trying to loop the color array to make it longer.

This is some example how I want it to work.

Random number is 1534.

random = 1534; //randomized pixel number
position = Math.floor(random/1500); //dividing the random number with patern lenght
arrayConv = position - 1; //converting to an arrayIndex

The result will be 1, that mean that the color was red (array index 0)

Random number is 17534.

random = 17534; //randomized pixel number
position = Math.floor(random/1500); //dividing the random number with patern lenght
arrayConv = position - 1; //converting to an arrayIndex

The result will be 11, that mean that the color was red (array index 10)

why not simply use the modulus operator instead? then you dont need to duplicate anything in the array. — Derek
– Derek, Commented Nov 8, 2018 at 20:12
I was thinking since you only have red and black in alternate values on your array ad infinitum, why not assign red as odd and black as even and see if your random integer is odd or even. @Derek exactly! — Iskandar Reza
– Iskandar Reza, Commented Nov 8, 2018 at 20:12
I think you mix up things: if a color circle is 100px, why do you divide by 1500px to know which circle you are on? You should divide by 100. As you divide now, you will not get the color index, but how many times the whole pattern is repeated at the left of the circle. — trincot
– trincot, Commented Nov 8, 2018 at 20:22

Artem Arkhipov · Accepted Answer · 2018-11-08 20:34:58Z

2

As you said there is 7 blue and 7 red blocks and 1 green in the end. So we can assume that blue/red color can depend on even/odd generated number is, except the case when number can be divided by 15 - in that case it means green.

function resolveColor(number) {
  if (number % 15 === 0) {
    return 'green';
  }
  if (number % 2 === 0) {
    return 'red';
  }
  return 'blue';
}

const x = Math.ceil(Math.random()*20000);
console.log('Generated number: ', x);
console.log('Result is: ', resolveColor(x));

edited Nov 8, 2018 at 20:34

answered Nov 8, 2018 at 20:29

Artem Arkhipov

7,5256 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marchewka PL Over a year ago

Hello and thanks alot for your help. The idea is great but it seams not to work. It is because when the patern start over, the odd number is now even and even is now odd. i.imgur.com/PjrdHq1.png

Akolade Adesanmi · Accepted Answer · 2018-11-08 20:58:26Z

0

has previously discussed by I.r.r and Marchewka PL.There are three colours, And the result of random px calculated would always fall between 1 - 15. You can assign the red and blue as odd and even respectively and have the green colour to be a default; on a conditional statement.

edited Nov 8, 2018 at 20:58

answered Nov 8, 2018 at 20:49

Akolade Adesanmi

1,26012 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to loop an array in JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related