如何使用Javascript为下落物体游戏中的每个“弹丸”生成一个随机的X值？

Question

I am coding a game that is currently in its very early stages for a project to try to learn more about coding. In my game, objects generate randomly (green squares), and the player (red square), avoids them. I am having trouble trying to get the green squares to generate from a random position on the x-axis. I already have a formula to generate a random number for X, but after it selects a number randomly, all the "projectiles" generate there, rather than all generating from a different area. How would I get all the "projectiles" to generate from different positions on the x-axis randomly?

   var randomX = Math.floor(Math.random() * 480) + 15;

    function updateGameArea() {
    var x, y;
    for (i = 0; i < projectiles.length; i += 1) {
        if (player.crashWith(projectiles[i])) {
            gameArea.stop();
            return;
        } 
    }
    gameArea.clear();
    gameArea.frameNo += 1;
    if (gameArea.frameNo == 1 || everyinterval(150)) {
        x = randomX;
        y = gameArea.canvas.height; 
        projectiles.push(new component(40, 40, "green", x, y));
    }
    for (i = 0; i < projectiles.length; i += 1) {
        projectiles[i].y += -1; // the shape is using its coordinates to build downward from its y position
        projectiles[i].update();
    }
    player.newPos();    
    player.update();
}

    function everyinterval(n) {
    if ((gameArea.frameNo / n) % 1 == 0) {return true;}
    return false;

Expected : Green squares generate in random positions on the x- axis every 3 seconds and move upwards

Actual : Green squares all generate from the same random position on the X-axis.

Answer 1

You should reset X every time you're adding a new projectile:

if (gameArea.frameNo == 1 || everyinterval(150)) {
    randomX = Math.floor(Math.random() * 480) + 15;
    x = randomX;
    y = gameArea.canvas.height; 
    projectiles.push(new component(40, 40, "green", x, y));
}

Otherwise, the randomX value stays constant as the value originally evaluated on line 1 when the interpreter reached it.

Answer 2

Here's your problem:

var randomX = Math.floor(Math.random() * 480) + 15;
// Generates a random number and stores it to randomX
// Called using 'randomX'

You need to turn it into a function if you want it to run each time:

var randomX = function() { Math.floor(Math.random() * 480) + 15 }; 
// Returns a new number each time
// Called using 'randomX()'

Answer 3

Both shivashriganesh mahato and natelouisdev have, essentially responded to how to fix the issue but since you are learning coding here is a tip. When you code, the code will run in a particular order. If you want something to be reassigned repeatedly, in this case a randomized number being used, and you want it to occur only after an event, you need to make sure that it gets trigger within each event.

natelouisdev has a good approach because, by using it as a function, you can call your randomizer more cleanly in your code and make it reassign the value of x each time.

Since you are building a game, it is also a good idea to compartmentalize your code. It'll make it easier to keep your ideas in order for each event trigger.

Example:

• function gameLoss(){} - Define event return upon game loss. You can then create editable rules to reason for loss without having to edit the loss

• function gameActive(){} - Defines what is normal gameplay. everything that occurs during normal gameplay should be managed here.

• function gameArea(){} - Defines game canvas that function more for UI than for gameplay (scores, lifes, size of screen, etc)

Had you created individual functions you'd realize you only need a randomized 'x' value upon regular play thus you'd assign it within the gameActive() function and not as a global variable. Then you'd call the gameActive() function as many times as needed within a time interval to ensure a unique value is created each time.

-Side note: Don't litter unnecessary global variables. It'll make a mess off of your code when debugging. -