Bdtjtk

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.

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.

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()'

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. -