How to obtain a set of points on the coordinate plane?

I decided to get rid of the global variables and all data necessary for work functions and pass it through the parameters. For the problem of obtaining the set of points on the coordinate plane I wrote the following code:

walls const$ = combineLatest(
 range(0, constants.wallsCnt),
of(constants.canvasWidthPx),
of(constants.canvasHeightPx),
of(constants.wallSizePx),
)
.pipe(
 map(([range, canvasWidthPx, canvasHeightPx, wallSizePx]) => {
 return {
 x: Math.floor(Math.random() * Math.floor(canvasWidthPx - wallSizePx)),
 y: Math.floor(Math.random() * Math.floor(canvasHeightPx - wallSizePx)),
 strength: Math.floor(Math.random() * Math.floor(constants.wallStrengthMax)) + 1,
}
}),
toArray(),
 tap(v => {
console.log(v)
}),
).subscribe()


The problem is that I get the output only one point, although I should get 3. Because
constants.wallsCnt = 3

It is noteworthy that the problem is solved if you rewrite the code using the global variables:
walls const$ = range(0, constants.wallsCnt)
.pipe(
 map(_ => {
 return {
 x: Math.floor(Math.random() * Math.floor(constants.canvasWidthPx - constants.wallSizePx)),
 y: Math.floor(Math.random() * Math.floor(constants.canvasHeightPx - constants.wallSizePx)),
 strength: Math.floor(Math.random() * Math.floor(constants.wallStrengthMax)) + 1,
}
}),
toArray(),
)


But I need it in the first option. Please help to fix the code.

Don't ask why I need it. I'm writing a small 2D game, full code here, if interested.
April 19th 20 at 12:26
1 answer
April 19th 20 at 12:28
Solution
However, you question was forced to smash his head
Of course, the way to think so coordinates this is a complete perversion, however, this behavior combineLatest for some time greatly puzzled me :)

But it was pretty simple https://stackblitz.com/edit/tanks-field-without-gl...
Spot the difference.
Just range in the end) beautiful) - Emmie commented on April 19th 20 at 12:31
@Emmie, but it should not be: https://rxmarbles.com/#combineLatest - Elody_Willms commented on April 19th 20 at 12:34
@zodiak Maybe the problem in version RxMarbles?
https://github.com/staltz/rxmarbles/blob/master/pa... - Emmie commented on April 19th 20 at 12:37
@Emmie, I don't know... if it is considered documentation:
https://rxjs.dev/api/index/function/combineLatest

in combineLatest the order of threads is not important - Elody_Willms commented on April 19th 20 at 12:40
@Elody_Willms,
An Observable of projected values from the most recent values from each Observable input, or an array of the most recent values from each input Observable.

of range and give their values synchronously, i.e. it should work simultaneously, but simultaneity in js is not, so the order is important.
You when it came to the subscription of, range has worked.
Maybe it should be considered a bug in the rx and it's time to start issue.
There's even a clear indication of sheduler does not affect the result. - rashawn.Ve commented on April 19th 20 at 12:43

Find more questions by tags Reactive ExtensionsTypeScriptJavaScript