Sign in to follow this  
mgiga0420

Need help spawning falling items in random position html5

Recommended Posts

I am trying to make a platformer mod of the first tutorial platformer, and this is my first time working with phaser. I am attempting to have diamonds spawn from the sky on a timer, that the player may collect. Everything except the spawning of diamonds seems to be working correctly, my code is as follows:

<!--The sprites and some of the movement controls for this game come from
this tutorial: https://phaser.io/tutorials/making-your-first-phaser-game -->
<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>Phaser - Making your first game, part 9</title>
    <script type="text/javascript" src="js/phaser.min.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">

//sets up a game, setting the area of play and loading it in
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

//loads what will be needed for the game before the game starts
function preload() {

    game.load.image('sky', 'assets/sky.png');
    game.load.image('ground', 'assets/platform.png');
    game.load.image('diamond', 'assets/diamond.png');
    game.load.spritesheet('dude', 'assets/dude.png', 32, 48);

}

//here I can set variables that can be accesses by create,
//much like putting in variables before calling them in unity
var player;
var platforms;
//directional keys to use for movement
var cursors;

var score = 0;
var scoreString = '';
var scoreText
var scoreText;
var firingTimer = 0;

//uses the preloaded items and other lines of code to make the beef of the game
function create() {
    game.add.sprite(0, 0, 'sky');
    //enables arcade physics
    game.physics.startSystem(Phaser.Physics.ARCADE);

    diamonds = game.add.group();
    diamonds.enableBody = true;

    diamonds.createMultiple(30, 'diamond');
    diamonds.setAll('anchor.x', 350);
    diamonds.setAll('anchor.y', 350);
    diamonds.setAll('outOfBoundsKill', true);
    diamonds.setAll('checkWorldBounds', true);
    

        //  The score
    scoreString = 'Score : ';
    scoreText = game.add.text(10, 10, scoreString + score, { font: '34px Arial', fill: '#fff' });
    //background
   

    //will contain the ground
    platforms = game.add.group();
    //any object in the platforms group will have a body
    platforms.enableBody = true;
    // Here is where the ground is created
    var ground = platforms.create(0, game.world.height - 64, 'ground');
    //  Scale it to fit the width of the game (the original sprite is 400x32 in size)
    ground.scale.setTo(2, 2);
    //  This stops the ground from falling away when you jump on it
    ground.body.immovable = true;


     // The player and its settings
    player = game.add.sprite(350,  400, 'dude');
    //  We need to enable physics on the player
    game.physics.arcade.enable(player);
    //  Player physics properties.
    player.body.bounce.y = 0.2;
    player.body.gravity.y = 600;
    player.body.collideWorldBounds = true;
    //Our two animations, walking left and right.
    player.animations.add('left', [0, 1, 2, 3], 10, true);
    player.animations.add('right', [5, 6, 7, 8], 10, true);

    //controls
    cursors = game.input.keyboard.createCursorKeys();
}

function update() {
    
    console.log(firingTimer);
    //  Collide the player with the ground
    game.physics.arcade.collide(player, platforms);

    //  Reset the players velocity (movement)
    //this means that if no keys are pressed, the player will
    //remain in place
    player.body.velocity.x = 0;

    //if the left arrow is pressed, add velocity to the player and play an animation
    if (cursors.left.isDown)
    {
        //  Move to the left
        player.body.velocity.x = -400;
        player.animations.play('left');
    }
    //if the right arrow is pressed, add velocity to the player and play an animation
    else if (cursors.right.isDown)
    {
        //  Move to the right
        player.body.velocity.x = 400;
        player.animations.play('right');

    }
    else
        //if no keys are pressed. animation is set to one constant frame
        //and no velocity is added
    {
        //Stand still
        player.animations.stop();
        //sets player's frame to the one facing forward
        player.frame = 4;
    }
    
    //  Allow the player to jump if they are touching the ground.
    if (cursors.up.isDown && player.body.touching.down)
    {
        player.body.velocity.y = -350;
    }

    if (game.time.now > firingTimer)
    {   //enemyfires
        generateDiamond();
    }
    game.physics.arcade.overlap(diamonds , player, aquireDiamond, null, this);
}

    function generateDiamond(){
        diamond = diamonds.getFirstExists(false);

        if(diamond){
            diamond.reset(350, 350);
            firingTimer = game.time.now + 2000;
            diamond.body.gravity.y = 200;
        }

    } 

        function aquireDiamond(player,diamond){
            diamond.kill ();
            score+=100;
            scoreText.text = scoreString + score;
            Debug.log

        //if time = certain amount then spawn diamond in random
        //position above screen and let it fall, it will not stay on the ground
    }


</script>

</body>
</html>

 

Share this post


Link to post
Share on other sites

So your line:

diamond.reset(350, 350)

sets the diamonds to spawn at that exact position in the world each time you make a new one (x350, y350)

You can use https://photonstorm.github.io/phaser-ce/Phaser.World.html#randomX and https://photonstorm.github.io/phaser-ce/Phaser.World.html#randomY to get a random position in the world to spawn them in.

as such:

diamond.reset(game.world.randomX, game.world.randomY)

This may spawn the diamond inside the tilemap, so you may want to work around that somehow.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.